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>我们就可以看到，文字粗细错落有致的效果，如下截图：
如果用在网页开发中，必定会让我们的界面更加的细腻，设计更加的精致，视觉更加的愉悦。
unicode-range
unicode-range 的作用是可以让特定的字符或者字符片段使用特定的字体。举个例子，下图是文字应用了“微软雅黑”字体后的效果：
但是，这两个“引号”左右间隙不均，方向不明，实在是看着不爽，此时我们就专门指定这两个“引号”使用其他字体，如下CSS：
@font-face {
font-family: BASE;
src: local("Microsoft Yahei");
}
@font-face {
font-family: quote;
src: local('SimSun');
unicode-range: U+201c, U+201d;
}
.font {
font-family: quote, BASE;
}然后效果就变成这样子了：
嗯，一下子变得舒服多了。
三、结束语
根据我个人的感觉， @font-face 的为人所知要得益于icon fonts小图标技术。因为自定义的小图标字体几乎一定是外链的，而恰恰好，低版本IE7，IE8浏览器的 src 只能是 url() 外部字体文件。外加矢量、颜色可控等特性，于是成为了兼容时代最好的小图标解决方案，可谓功不可没，但也带来了另外一个弊端，让很多同学误以为 @font-face 除了自定义一些小图标之外就一无是处了。于是，当越来越多产品和项目不需要兼容IE7，IE8浏览器的时候，由于有更好的SVG图标解决方案， @font-face 似乎又很少被提及了。
