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