找寻开心Good Luck To You!

 font-weigh这个用法大家都已经很清楚了，不就是控制字体粗细的么，但是为什么还要选择不同的字体包呢。主要还是因为很多字体不包含粗细级别，所以设置了 font-weigh但是还是显示不出来。

举个例子：

使用同一个字体，font-weight 分别设置为 600、500、400、300

@font-face {
    font-family: B;
    src: url('A.ttf');}.f {
    font-family: 'B';}

<ul>
  <li class="f" style="font-weight: 600;">600找寻开心</li>
  <li class="f" style="font-weight: 500;">500找寻开心</li>
  <li class="f" style="font-weight: 400;">400找寻开心</li>
  <li class="f" style="font-weight: 300;">300找寻开心</li>
</ul>

结果我们看到的却是下面这样的

代码改成如下：

我们通过 @font-face 中的 font-weight 属性来设置不同的粗细使用不同的字体包

@font-face {
    font-family: A;
    src: url('A-B.ttf');
    font-weight: 600;}@font-face {
    font-family: A;
    src: url('A-M.ttf');
    font-weight: 500;}@font-face {
    font-family: A;
    src: url('A-R.ttf');
    font-weight: 400;}@font-face {
    font-family: A;
    src: url('A-L.ttf');
    font-weight: 300;}.ff {
    font-family: 'A';}

解释: 把一个字体，名为A，当font-weight 为 600 的时候，使用A-B.ttf 字体，为 500 的时候，使用A-M.ttf字体，为 400 的时候，使用 A-R.ttf 字体，为300 的时候，使用 A-L.ttf字体

再应用如下代码：

<ul>
  <li class="ff" style="font-weight: 600;">600找寻开心</li>
  <li class="ff" style="font-weight: 500;">500找寻开心</li>
  <li class="ff" style="font-weight: 400;">400找寻开心</li>
  <li class="ff" style="font-weight: 300;">300找寻开心</li>
</ul>

展现不同的粗细效果：

使用这样的设置方法，可以使我们的博客或者网站展现不同的效果。

赏