@font-face的用法

在利用css进行排版时，免不了要对文字的字体进行设置，但是字体的类型使用是否成功往往取决于用户电脑中是否有安装相对应的文字，如果没有，就只能使用浏览器默认的字体，这样就和我们想要达到的效果相悖。又或者，字体类型名称过长，我们也会有想要为他自定义名称的想法，这时候@font-face就派上了大用场：

@font-face支持的css属性有以下几种：font-family，src，font-style,font-weight,unicode-range,font-variant,font-strecth,font-feature-settings,其中，font-variant,font-strecth,font-feature-settings这三个属性基本使用次数很少，可以忽略。

语法如下：

@font-face {
  font-family: 'example';
  src: url(example.ttf);
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0025-00FF;
}

一、font-family

font-family就是一个字体变量，名称是自定义的，但是原本系统就具有的字体名称，不能随意设置，否则就会发生覆盖，除非这种效果是你想要达到的

二、src

表示调用字体文件，可以是本地字体文件，也可以是线上地址文件

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

.font {
    font-family: YH;
}

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

@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;
}

如果用户本地没有我们定义的字体，就需要利用url来外链字体文件

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

三、font-style

在@font-face规则下设置这个属性时，意味着当元素属性设置font-style时，将会使用这个font-style的字体。

@font-face {
  font-family: 'I';
  font-style: normal;
  src: local('FZYaoti');
}
@font-face {
  font-family: 'I';
  font-style: italic;
  src: local('FZShuTi');
}

注意：上面代码中，当文字样式为正常时，字体表现为方正姚体，当文字样式为斜体时，字体表现为方正舒体

四、font-weight

与font-style类似

五、unicode-range

可以让特定的字符或者字符片段使用特定字体。

比如，在一段的中文字体中，我想让双引号使用其他的字体类型：

@font-face {
  font-family: BASE;
  src: local('PingFang SC'),
       local("Microsoft Yahei");
}
@font-face {
  font-family: quote;
  src: local('SimSun');    
  unicode-range: U+201c, U+201d;
}
.font {
    font-family: quote, BASE;
}

unicode-range采用的值和语法：

/* 支持的值 */
unicode-range: U+26;               /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */

unicode-range真正使用的场景，是让特殊字符使用特定字体或是让英文使用一个字体，中文使用另一个字体，但是英文由于没有中文映射，所以英文字体对中文根本没有丝毫影响，这样我们只需要在设置的时候，把英文字体放在中文字体类型的前面就可以做到英文和中文使用各自的字体了，这样，unicode-range的真正功用就只有前者了。