css3中的自定义字体方法@font-face

文章目录

一、基本语法
二、属性规则说明
- 2.1. font-family
- 2.2. src
- - 2.2.1. local
  - 2.2.2. url
  - 2.2.3. format
- 2.3. font-weight
- - 2.3.1. 语法
  - 2.3.2. 取值说明
  - 2.3.3. 取数值情况下应该对应的每个字体
- 2.4. font-style
- - 2.4.1. 语法
  - 2.4.2. 取值说明
- 2.5. unicode-range
- - 2.5.1. 取值说明
- 2.6. font-display
- - 2.6.1. 语法

@font-face 属性可以让我们自定义网站字体属性，然后引用到想要应用该字体的元素上。

一、基本语法

@font-face {
  font-family: <font-name>;
  src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
  unicode-range: <unicode-range>;
  font-variant: <font-variant>;
  font-feature-settings: <font-feature-settings>;
  font-variation-settings: <font-variation-settings>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
  font-display: <font-display>;
}

二、属性规则说明

2.1. font-family

给你引入的字体起一个专属的字体名字， font-name ，然后他会在元素 font-family: 中使用，如 div{font-family:font-name}

2.2. src

用于指定加载字体文件的路径或者加载本地字体

2.2.1. local

加载一个本地字体， font-name 表示本地的字体名称，比如 Microsoft YaHei | 微软雅黑；如果本地有应用此字体显示文本。

示例：

/* 加载一个本地字体 */
@font-face{
  font-family: myFont;
  src: local('Microsoft YaHei');
}
/* 加载多个本地字体 */
@font-face{
  font-family: myFont;
  src:  local(黑体), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local(sans-serif);
}
/* 应用自定义字体 */
.box{
  font-family: myFont;
}

在上边代码中看到，可以使用一个或多个 local ，多个之间用逗号分开，括号中的字体名称可以使用单引号或者双引号括起来，也可以不带引号直接写字体名称，有空格的必须添加引号，但是只能写一个字体名称；

上边的写法让我们在定义字体的时候变得方便很多，我们只需要定义好自定义名称然后直接引用该字体等同于下边代码：

.box{
  font-family: 黑体, "Microsoft YaHei", "HelveticaNeue-Light", "Helvetica Neue Light", "PingFang SC", sans-serif;
}

2.2.2. url

表示服务器端提供的字体地址，这个也是可以使用多个，多个之间用逗号隔开，一般写多个是为了浏览器兼容加载不同格式的字体。

目前web可以加载六种格式的字体EOT、TTF、OTF、WOFF、WOFF2、SVG

全拼： Embedded_OpenType ，是由微软开发的字体格式规范，所以只适用于IE浏览
详细介绍

全拼： TrueType ，是一种轮廓字体标准，最早是由苹果公司研发，后来成为 Mac OS 、 Microsoft Windows 系统中最常用的字体格式

详细介绍

全拼： OpenType ，是可缩放计算机字体的格式，是由微软和Adobe公司联合开发。

[详细介绍]https://link.zhihu.com/?target=https://en.wikipedia.org/wiki/OpenType)

WOFF

全拼： Web Open Font Format web网络开放字体格式，他是专为网络设计的一种字体格式， WOFF 是把 OpenType 和 TrueType 字体进行了封装，并进行了压缩优化，它使用了广泛应用的 zlib 压缩，并添加了XML元数据，这种字体格式体积更小，适用于网络传输，可以使用户体验做到更好

详细介绍

WOFF2

它是WOFF的升级版，它使用 Brotli 进行字节级压缩，比 WOFF 体积更小

全拼： Scalable Vector Graphics 可缩放矢量图形，是一种基于可扩展标记语言（XML）的矢量图像格式，用于二维图形，并支持交互性和动画，字体中就是使用svg技术来呈现文字样式。我测试只有苹果 Safari 支持；

详细介绍

2.2.3. format

可选值，表示给加载的外部字体指定字体格式，用来告诉浏览器让浏览器能够识别所使用的字体格式，可用的类型有 embedded-opentype , truetype , opentype , woff , woff2 , svg。分别对应上边我们介绍的字体格式。

示例

/* 加载一种字体格式 */
@font-face{
  font-family: "myFontName";
  src:  url('font.woff') format('woff');
}

/* 加载多个字体格式，兼容更多浏览器 */
@font-face{
  font-family: "myFontName";
  src: url('font.eot'); /* IE9*/
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font.woff2') format('woff2'),
  url('font.woff') format('woff'), /* chrome、firefox */
  url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}

从上边语法来看我们可以加载一个格式的字体文件，也可以加载多个格式字体，之间用逗号分开，浏览器会优先读取写在前面的字体格式并且检测是否支持，如果支持就使用该格式的字体文件。

2.3. font-weight

表示自定义字体规则的字重程度，我们可以给一个字体指定不同的粗细规则引用不同规格的字体文件。

2.3.1. 语法

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

2.3.2. 取值说明

normal ：默认值，表示该字体规则是在默认情况下的字体，也就是在应用改字体的元素中不规定字体的粗细情况或者 font-weight: 400 | normal 下应用该字体；
bold ：粗体，表示元素设置 font-weight: bold | 700 ，或者使用、 元素的时候应用该字体。
400 ：也可以设置成数值，在CSS Fonts Level 4之前的版本只能去 100-900 的100倍数值，之后的数值可以去 1-1000 的任意数值。
normal bold ：可以使用多个关键字来定义此字体规则，多个关键字之间用逗号分开，表示元素字重设置为此关键字中的其中一个值时应用该字体。
300 500 ：也可以使用多个数值来定义此字体规则。

2.3.3. 取数值情况下应该对应的每个字体

value对应的字体的自重名称

100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)

代码示例：因为字体有版权限制，这里我们使用阿里的免费商用字体来演示

2.4. font-style

表示自定义字体规则的样式表现形式，我们可以给一个字体指定不同的样式规则引用不同规格的字体文件。

2.4.1. 语法

font-style: normal | italic | oblique <angle>{0,2}

2.4.2. 取值说明

normal
italic
oblique

当我们同时定义 italic 和 oblique 规则的字体时，写在后边的生效所设置的斜体字体显示。

2.5. unicode-range

表示自定义字体规则的unicode字符范围

/* unicode-range 取值规则 */
unicode-range: U+26;                /* 单个值 */
unicode-range: U+0-7F;              /* 字符编码区间*/
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 可以写多个值，多个值之间用逗号分开 */

2.5.1. 取值说明

取值规则：前边是 U+ 后边跟上字符的 charCode 值

可以是单个值，表示文本中只有该字符的字应用该字体。
可以使用一个字符区间，表示文本中如果有在此区间的文字将应用改字体规则。
也可以使用通配符来设置一个区间规则其中 ? 表示一个16进制 0-F 的之间的值 U+4?? 表示 U+400 到 U+4FF 区间的字符编码。
也可以使用多个值，多个值之间使用逗号分开。

从上边案例可以看出， unicode-range 是用来规定应用当前字体规则的文字 unicode 码在规则内的将以此字体规则显示字体。

他能让我们来控制一个段落中的个别字的显示效果，一般要显示的字体规则排在最前面，将优先显示。

2.6. font-display

设置自定义字体在没有加载完的显示方式取值如下：

2.6.1. 语法

font-display: auto | block | swap | fallback | optional
auto
block
swap
fallback
optional