真正了解@font face里font-weight的作用

详细了解@font-face使用规则可以去看张鑫旭的文章真正了解CSS3背景下的@font face规则

我们这里只重点强调@font-face里font-weight,font-style的用法，因为我在使用@font-face时对这一块的使用根本不清楚，感觉网上好多人忽略了这个非常重要的地方。

@font face规则支持的CSS属性如下

@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-face {
  font-family: 'example';
  src: url(example.ttf);
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0025-00FF;
}

font-weight和font-style类似，不过是定义了不同字重使用不同字体，对于中午而言，这个要比font-style适用性强很多。我这里就有一个非常具有代表性的例子，版权字体“汉仪旗黑”自重非常丰富，但是这个字体不像“思源黑体”，天然可以根据font-weight属性值加载对应的字体文件，怎么办呢？很简单，使用@font face规则重新定义一下即可，例如下面的CSS代码：

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

解读一下就是，是一个全新的字体，名为’QH’，当字重font-weight为400的时候，使用“汉仪旗黑 40S”字重字体，为500的时候，使用“汉仪旗黑 50S”字重字体，为600的时候，使用“汉仪旗黑 60S”字重字体。
于是乎，当我们应用如下的CSS和HTML代码的时候：

.hy-40s,
.hy-50s,
.hy-60s {
  font-family: 'QH';
}
.hy-40s {
  font-weight: 400;
}
.hy-50s {
  font-weight: 500;
}
.hy-60s {
  font-weight: 600;
}

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

我们就可以看到，文字粗细错落有致的效果，如下截图：

如果用在网页开发中，必定会让我们的界面更加的细腻，设计更加的精致，视觉更加的愉悦。

从张鑫旭给出的这里例子我们不难看出，如果我们前端开发拿到的设计图，使用同一种的字体不同粗细的话，例如GoogleSans-Regular和GoogleSans-Medium，我们没有必要定义两种字体@font-face:GoogleSans-Regular'，和@font-face:GoogleSans-Medium,因为这样会很麻烦。而我们可以直接通过下面这种方式：

@font-face {
        font-family:'Google Sans';
        src:url(../font/GoogleSans-regular.ttf);
        font-style:normal;
        font-weight:400;
        font-display:swap;
        unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face {
	font-family:'Google Sans';
	src:url(../font/GoogleSans-medium.ttf);
	font-style:normal;
	font-weight:500;
	font-display:swap;
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
	}

使用的时候只需要通过font-weight的值就可以确定使用哪种字体文件的字体了，比如如果字体设置了font-weight:400是使用的是GoogleSans-regular.ttf这个文件的地体，如果font-weight:500使用的是GoogleSans-medium.ttf这个文件的字体。

我们只需要按照下面这个规则来设置font-weight 即可。

字体粗细：‘font-weight’属性
名称： font-weight
取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始： normal
适用于：    所有元素
继承： 是
百分比：    （不适用）
媒介： 视觉
计算值：    详见描述
动画： -
‘font-weight’属性执行字体中字形的重量，这取决于黑度等级或笔划粗细。
其值的意义如下：
100至900
这些有序排列中的每个值，表示至少与其起身拥有相同黑度的重量。其大致符合下列通用重量名称：
100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Regular (Normal、Book、Roman)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

normal、regular与'400'相同。
bold与'700'相同。
bolder指定外观的重量大于继承的值。
lighter 指定外观的重量小于继承的值。