CSS进阶（18）—— CSS中的文本处理（中）

CSDN首席阴阳师
353 阅读4分钟

上一章讲了CSS中的font属性的相关内容，本章延续上一章的部分，把@font face规则单独拎出来进行讲解。

深入探究@font face规则

通常我们使用@font face是为了引入字体库，或字体图标库，用法一般如下: 

<p>我要用特殊字体</p>
<style>
@font-face{
    font-family:'example'; //随便取个名字
    src:url(example.ttf); //引入字体包
}
p{
    font-family:'example';
}
</style>

事实上，@font-face变量除了必要的font-family和src之外，还支持以下属性。 

@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-variant，font-stretch，font-feature-settings这3个属性，不需要深入了解，unicode-range的用处较小也不用深入了解，因此我们只需要了解以下属性即可。 

@font-face {
  font-family: 'example';
  src: url(example.ttf);
  font-style: normal;
  font-weight: normal;
}

下面我将详细介绍这五个属性。

1.font-family

font-family是一个字体变量，名称可以根据自己喜好来命名，但注意尽量不要占用系统的字体关键字，如"Microsoft Yahei"。如果使用系统的关键字命名，会覆盖系统的字体，可能对代码维护造成一定的困扰，需要注意一下。

2.src

src表示引入的字体资源。既然是资源，肯定包括内部资源和外部资源。src属性给内部资源和外部资源的引入方式做了区分，如果需要引入内部资源，需要用local()功能符，如果是外链字体，则使用url()功能符。

如果你看到local功能符，一般是为了偷懒，如我想把'Microsoft Yahei'简写成'YH'，就可以给内部资源重命名一下，如下 

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

引入外部资源的时候，还有一个搭配的功能附，format()，这个format是用于系统解析字体包之前判断字体包的格式的，常用的字体包格式有eot,ttf,woff2,woff等，因此在系统解析字体包之前声明一下字体包的格式能缩短一些解析时间，可能只是极短的时间，所谓积少成多，多写几个字母也不会占用你多久。在引入外部资源的时候，建议的写法如下: 

@font-face{
    font-family: 'example';
    src: url("example.ttf") format('ttf');
}

3.font-style和font-weight

刚才我在讲font-weight和font-style的时候都提到了系统字体的概念，即在什么样式下该用什么样的字体，如有些英文字体在声明斜体后就会有专门的倾斜字体，而不是字体倾斜一个角度。因此@font-face可以在你使用该自定义字体的时候，在声明了对应的font-style/font-weight的时候，使用该字体，听起来有点绕口，来一个具体实例，假设你声明了几个@font-face如下： 

@font-face{
    font-family: 'example';
    src: url("example100.ttf") format('ttf');
    font-weight:100;
}
@font-face{
    font-family: 'example';
    src: url("example200.ttf") format('ttf');
    font-weight:200;
}
@font-face{
    font-family: 'example';
    src: url("example300.ttf") format('ttf');
    font-weight:300;
}

这几个font-face的名字都是example，但并不会产生覆盖，因为这些自定义字体需要在特定的条件下才会生效，这个特定条件在你定义这个字体的时候就已经规定好了，即font-weight。因此如果你用下面的写法，这个自定义字体就不会生效 

<p>我想用自定义字体</p>
<style>
p{
    font-family:'example';
}
</style>

未生效的原因是没找到对应的font-face变量，你必须声明一个有效的font-weight才可以，如下写法： 

<p>我想用自定义字体example200</p>
<style>
p{
    font-family:'example';
    font-weight:200
}
</style>

font-style和font-weight同理，有兴趣的可以自己实验。CSS的font部分的探究就到此为止了，下半章会围绕文本处理属性展开，觉得此文有用的点个赞吧~

不忘初心，方得始终

喜欢博主的童鞋可以扫描二维码加博主好友~ 也可以扫中间二维码入驻博主的粉丝群（708637831）~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。

avatar
文章
阅读
粉丝