CSS3下的@font-face规则

例子

@font-face {
font-family: 'example';
src: url(example.ttf);
font-style: normal;
font-weight: normal;
unicode-range: U+0025-00FF;
font-variant: small-caps;
font-stretch: expanded;
font-feature-settings："liga1" on;
}
.font {
font-family: example;
}

font-family

@font-face {
font-family: '$';
src: local("Microsoft Yahei");
}

这里的font-family可以看成是一个字体变量，名称可以非常随意；

对普通HTML元素，你设置其font-family属性值为’$’，则其字体表现就变成了“微软雅黑”（如果本地有这个字体）。

使用这些稀奇古怪的字符或者有空格的时候，一定要加引号。

虽然说自己变量名可以很随意，但是有一类名称，不能随便设置，就是原本系统就有的字体名称

src

@font-face {
font-family: 'YH';
src: local("Microsoft Yahei");
}
@font-face {
font-family: 'T';
src: url("FZCYST.ttf");
}
@font-face {
font-family: FZCYS;
src: local("FZYaSongS-B-GB"),
url("FZCYS.woff2"),
url("FZCYS.woff"),
url("FZCYS.ttf");
}

src表示调用字体文件，可以是本地字体文件（IE9+支持），也可以是线上地址（可能有跨域限制）。

尽量都先用local,后加url.

body {
font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}
.xxxx {
font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}

优化后：

@font-face {
font-family: BASE;
src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}
body {
font-family: BASE;
}
.xxxx {
font-family: BASE;
}

font-style

@font face规则中的font-style和font-weight类似，都是用来

设置对应字体样式或自重下该使用什么字体

。

因为有些字体可能会有专门的斜体字，注意这个斜体字，并不是让文字的形状倾斜，而是专门设计的倾斜的字体，很多细节会跟物理上的请求不一样。于是，我在CSS代码中使用font-style:italic的时候，就会调用这个对应字体。

<i class="stupid">“笨蛋”、笨蛋、大笨蛋</i>
<p class="stupid">“没错”，我就是笨蛋、大笨蛋</p>

@font-face {
font-family: 'T';
src: url("FZCYST.ttf");
font-style: italic;
}
@font-face {
font-family: 'T';
src: url("FZST.ttf");
font-style: normal;
}
.stupid {
font-family: T;
font-size: 20px;
}

font-weight

font-weight和font-style类似，不过是定义了不同字重使用不同字体。

html:

<ul>
<li class="hy-40s">汉仪旗黑40s</li>
<li class="hy-50s">汉仪旗黑50s</li>
<li class="hy-60s">汉仪旗黑60s</li>
</ul>

@font-face {
font-family: 'QH';
font-weight: 400;
src: local('HYQihei 40S');
}
@font-face {
font-family: 'QH';
font-weight: 500;
src: local('HYQihei 50S');
}
@font-face {
font-family: 'QH';
font-weight: 600;
src: local('HYQihei 60S');
}
.hy-40s,
.hy-50s,
.hy-60s {
font-family: 'QH';
}
.hy-40s {
font-weight: 400;
}
.hy-50s {
font-weight: 500;
}
.hy-60s {
font-weight: 600;
}

unicode-range

unicode-range的作用是可以让特定的字符或者字符片段使用特定的字体。

@font-face {
font-family: 'YH';
src: local("Microsoft Yahei");
}
.stupid {
font-family: YH;
font-size: 20px;
}

@font-face {
font-family: 'YH';
src: local("Microsoft Yahei");
}
@font-face {
font-family: quote;
src: url('simsun.ttf');
unicode-range: U+201c, U+201d;
}
.stupid {
font-family: quote,YH;
font-size: 20px;
}

Can i use

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/

https://caniuse.com/#search=font-face