本质是变量

@font face规则支持的CSS属性有：font-family，src，font-weight，font-style，unicode-range，font-variant，font-stretch，font-feature-settings。例如：

  1. @font-face {
  2.   // 字体变量名，当css中设置了font-family为该值时就会应用src对应字体
  3.   font-family: 'example';        
  5.   // 指定字体文件，也可以是本地字体 src: local("Microsoft Yahei")
  6.   src: url(example.ttf);
  9.   font-style: normal;
  10.   font-weight: normal;
  11.   unicode-range: U+0025-00FF;
  12.   font-variant: small-caps;
  13.   font-stretch: expanded;
  14.   font-feature-settings："liga1" on;
  15. }

@font face常用属性

1. src

作用1：字体文件名简写

  1. @font-face {
  2.   font-family: YH;
  3.   src: local("Microsoft Yahei");
  4. }
  6. .font {
  7.   font-family: YH;
  8. }

src还支持多个local字体地址同时出现

  1. body {
  2.     font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
  3. }
  5. @font-face {
  6.   font-family: BASE;
  7.   src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
  8. }
  10. body {
  11.     font-family: BASE;
  12. }

作用2： 优先使用用户本地字体
如果用户本地已经安装有所需要的字体，就不必再去请求网络资源字体。

  1. @font-face {
  2.   font-family: FZCYS;
  3.   src: local("FZYaSongS-B-GB"), 
  4.        url("FZCYS.woff2"),  
  5.        url("FZCYS.woff"),
  6.        url("FZCYS.ttf");
  7. }

2. font-style

  1. @font-face {
  2.   font-family: 'I';
  3.   font-style: normal;
  4.   src: local('FZYaoti');
  5. }
  6. @font-face {
  7.   font-family: 'I';
  8.   font-style: italic;
  9.   src: local('FZShuTi');
  10. }

制定一个字体，名叫’I’，当文字样式正常的时候，字体表现使用“方正姚体”，当文字设置了font-style:italic的时候，字体表现为“方正舒体”。

例子

  1. <p><i class="i">类名是i，标签是i</i></p>
  2. <p><span class="i">类名是i, 标签是span</span></p>
  1. .i {
  2.   font-family: I;
  3. }

上面一行文字表现为“方正舒体”，下面一行为“方正姚体”

3. font-weight

这个在项目中碰到过

  1. @font-face {
  2.   font-family: 'Montserrat';
  3.   src: url('../Montserrat-Black.ttf');
  4.   font-weight: 900;
  5. }
  6. @font-face {
  7.   font-family: 'Montserrat';
  8.   src: url('../../assets/fonts/badge/Montserrat-SemiBold.ttf');
  9.   font-weight: 600;
  10. }
  1. // 应用 Montserrat-Black.ttf 字体
  2. .xxx {
  3.     font-family: 'Montserrat';
  4.   font-weight: 900;
  5. }
  7. // 应用 Montserrat-SemiBold.ttf 字体
  8. .xxx {
  9.     font-family: 'Montserrat';
  10.   font-weight: 900;
  11. }

4. unicode-range


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