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) |