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
>
|
源码下载
字体格式
在桌面上浏览器支持的字体格式有:
扫描二维码关注公众号,回复:
5612874 查看本文章
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) |