CSS@font face 的使用

阅读文本大概需要 6 分钟。

在网页开发中,可以在 CSS 中设置来指定对应的字体,通常我们都是用微软雅黑。有时,如果对电脑上有的字体都不满意怎么办?我们可以通过自定义字体,自己引入字体文件,来使用它。就是做这种工作的,它可以让你在的值上输入自己定义的字体名称,你甚至还能将「微软雅黑」这个名称替换成别的字体。

CSS字体家族

在开始之前,简单介绍下 css 的字体家族,只要涉及到文字都离不开它们,它们分别是,,,,以及。

应该很熟悉,定义文字使用什么字体,常见的是微软雅黑,宋体以及英文字体 Arial。字体又分为衬线字体和无衬线字体,区别是两种字体的装饰和粗细不同,微软雅黑属于无衬线字体。为了各个浏览器的兼容性,尽量写成英文名称比较好,如

定义文字的粗细程度,也就是字重。支持的属性值有很多,如下

这里有个很值得我们注意的点,就是我们经常在使用中发现无论设置 100、200、400 都没什么效果,好像只有 normal 和 bold 两个值有用,那是因为我们平常使用的字体通常是微软雅黑,它只有和两个值,所以你设置其它的数值没什么效果,实际上它是有用的。

这个很熟悉了,定义字体的大小,你想设置多少 px 都行,或者使用其它单位 em,rem,vh 等。

定义文字的样式。有如下属性值:

一个用处不大的属性,有两个值和,设置可以让字符跟小写字母一样大小,但样式是大写字母

上面这些样式的缩写,例如可以让文字大小和行高缩写为

@font face 语法

实际上,@font face 这个名称已经很类似 css 的变量了,根据 MDN 文档,@font face 有以下几个主要属性:

: 引入字体文件的取值名称,可以是 ‘$’ 或空格,该名字将被用于 font 或 font-family 属性。

: 字体文件地址,用表示当前系统内的字体,用表示外链的字体,通常后者用得较多

: 字重,这个属性的用处在于,比如你引入了同一个字体,但是设置了不同的,可以在不同的情况采用不同的字重

: 和一样,当设置了不同的值,就可以决定在这个字体下是采用正常样式还是倾斜字体,因为让字体变斜体

: 使用特定的 unicode 字体范围

实例

HTML

CSS

可以自己运行看看效果,两段文字的字体是不同的。

总结

css 有关文字这块有许多属性,除上面提到的一些基本属性外,其实还有很多,例如控制字间距,定义文字遇到空格如何换行,还有,等等,这些属性平常见得不多,但是在一些情况下很有用。最后还有对的认识。

「Stay hungry,stay foolish.」

"关注、点赞、转发都是一种支持!"

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181104G1GPHS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券