font-family
CSS的font-family属性可以指定（选择）字体。
语法：
|
1
|
font-family: Gill Sans Extrabold, sans-serif;
|
font-family的属性值是字体名称，有多个字体使用逗号隔开。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>font-family</title>
<style>
body{
font-family: "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
</style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
</body>
</html>
|
@font-face
@font-face 允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。
@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
@font-face 有3个常用属性
| 属性 | 说明 |
| font-family | 所指定的字体名字将会被用于font或font-family属性 |
| src | 远程字体文件位置的URL或者用户计算机上的字体名称 |
| format | 指定宝体所用的格式 |
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face</title>
<style>
@font-face{
font-family:"mao*";
src:url("mao*.ttf");
}
body{
font-family: mao*;
}
</style>
</head>
<body>
<h1>利永贞网</h1>
<h2>学编程，上利永贞网</h2>
<p>study hard, improve every day</p>
</body>
</html>
|
源码下载
字体格式
在桌面上浏览器支持的字体格式有：
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1) | 4.0 | 4.0 | 10.0 | 3.1 |
| WOFF | 3.5 (1.9.1) | 6.0 | 9.0 | 11.10 | 5.1 |
| WOFF2 | 39 (39)[1] | 38 | 未实现 | 24 | 未实现 |
| SVG Fonts[2] | 未实现[3] | (Yes) | 未实现 | (Yes) | (Yes) |
| unicode-range |
36 (36) |
(Yes) | 9.0 | (Yes) | (Yes) |
在手机上浏览器支持的字体格式有：
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.9.1) | ? | 未实现 | 10.0 | (Yes) |
| WOFF | 4.4 | 5.0 (5.0) | 10.0 | 未实现 | 11.0 | 5.0 |
| WOFF2 | 未实现 | 39.0 (39.0)[1] | 未实现 | ? | ? | 未实现 |
| SVG Fonts[2] | ? | 未实现[3] | ? | 未实现 | 10.0 | (Yes) |
| unicode-range | ? | 36.0 (36.0) | ? | 未实现 | ? | (Yes) |