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:"maozedong"; src:url("maozedong.ttf"); } body{ font-family: maozedong; } </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) |