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