第15篇 使用自定义字体

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

如何在网页中使用自定义的字体

使用@font-face规则。

@font-face

作用

让你在网页中可以指定文档元素使用自己自定义的字体。

该规则可以定义一个专门的字体族名称，该名称对应服务器上的一个字体文件，用户代理将会下载该字体文件，并使用它来渲染页面中的文本。

例如：

@font-face {
    font-family: "my-font";
    src: url("my-font.otf");
}

有了上述代码中的声明后，用户代理在其他地方见到 font-family: "my-font";后，会加载对应的字体文件，并使用他渲染文本。

字体文件加载时机及字型渲染时机

@font-face是惰性加载字型的，仅当需要使用指定字型渲染文本时，才会加载，否则不加载。

但是浏览器会在一开始下载声明的全部字体文件。

描述符的定义

自定义的字体的相关描述都应该在@font-face中编写。

必有的描述符

font-family

该之前介绍的font-familycss属性并不相同，该描述符是字体族描述符。

该描述符的作用就是给自定义字体指定一个名称，用户代理的字体族名称表中便会出现该名称。

属性值和font-family一样，但是属性值并不是一个属性值列表，而是一个单独的表示字体族名称的值。

src

使用url函数指定地址

该描述符会为定义的字型指定一个源或多个源【字体文件】，字型的字体样式就是从源中得到的。属性值为一个url列表，列表间的元素都用逗号间隔。

用户代理会挨个下载这些源，直到成功下载某个源。

不过字型的源必须要与样式表同源【但是若是设置了请求的跨域，便可以不同源】，因此不可以将src指向别人的网站，下载别人的字体，必须得在你的服务器有一个字体源文件或者使用的时候同时提供样式表和字体文件的的字体托管服务。

在url函数后使用format函数指定字体文件的格式

url后面可以跟format函数。该函数来描述该 URL 引用的字体资源的文件格式。

格式提示包含一个以逗号分隔的表示已知字体格式的格式字符串列表。如果用户代理不支持指定的格式，则跳过下载字体资源。如果未提供格式提示，则始终下载字体资源。

@font-face {
    font-family: "my-font";
    src: url("my-font.otf") format("opentype"),
        url("my-font.true") format("truetype");
}

使用local函数指定已安装的字体

当local()函数作为src描述符的值的时候，他表明将该自定义字体的源指向了一个已经在用户设备中安装的字体族名称。

@font-face {
    font-family: "my-font";
    src: local("MyFont"),
        local("myFont"),
        url("my-font.otf") format("opentype"),
        url("my-font.true") format("truetype");
}

解析到该函数时，用户代理会检测设备中是否有名为指定名称的字体族，若有就使用，否则则继续解析。

其他字体描述符

设定字体族在指定字重下使用font-weight

作用

使用font-weight描述符可以给@font-face指定的字体族去指定字重等级。当指定字重后，使用css的font-family指定同一个字体族名称，改变font-weight就可以得到不同的效果。

比如说使用@font-face指定字重为700的时候使用src为"700.otf"的字体，font-family指定为"test"。使用@font-face指定字重为600的时候使用src为"600.otf"的字体，font-family指定为"test"。

那么在外面使用css：font-family: test; font-weight: 600;时，元素在渲染的时候使用的是600.otf字体。若是写font-family: test; font-weight: 700;时，元素在渲染的时候使用的是700.otf字体。

注意

如果指定的权重不存在，则使用css中的font-weight属性的回退机制。缺少粗体的字体通常由用户代理合成。若要防止这种情况，请使用 font-syndrome 属性。

属性值

该描述符的属性值为一个属性值列表，列表的每个元素之间使用空格作为间隔符。

多个属性表示，当外面的css使用这些属性值的任意一个时，都会加载该字体。

属性值具体范围如下：

• normal：相当于400
• bold：相当于700
• 一个1-1000之间的数字，包括1和1000。在早期版本的规范中，该属性仅接受关键字值和数值 100、200、300、400、500、600、700、800 和 900;非可变字体使用这些100-900的值，而细粒度值（例如 451）将被转换为非可变字体的这些值之一。CSS 4级扩展了语法，可以接受1到1000之间的任何数字(包括1到1000) ，并引入了可变字体，可变字体便可以使用这些粒度细的【间隔小】的值。
• initial
• unset

示例

@font-face {
    font-family: test;
    font-weight:100;
    src: url("../font/100.otf") format("opentype");
}
@font-face {
    font-family: test;
    font-weight:400;
    src: url("../font/200.otf") format("opentype");
}
@font-face {
    font-family: test;
    font-weight:700;
    src: url("../font/300.otf") format("opentype");
}
@font-face {
    font-family: test;
    font-weight:900;
    src: url("../font/400.otf") format("opentype");
}
.test1 {
    font-family: test;
    font-weight: 100;
}
.test2 {
    font-family: test;
    font-weight: 300;
}

test1使用100.otf字体，test2使用200.otf字体。

字形描述符

可以给字体族指定各种字形时，使用的字体文件资源。 属性值如下：

• normal 竖直体，无倾斜
• italic 斜体，是单独的一种字体，除了倾斜外，外观也与竖直体不同
• oblique 倾斜体，只是竖直体的倾斜版。
• initial
• unset

@font-face {
    font-family: test;
    font-weight: 400;
    font-style: italic;
    src: url(../font/test.otf) format("opentype");
}

这表示当字体字重为400，字形为斜体时使用../font/test.otf指定的字体资源。

字体拉伸font-stretch

与font-weight描述符类似。给同一个字体族的不同宽度指定对应的字体源。 属性值如下：

• ultra-condensed 极窄
• extra-condensed 特窄
• condensed 窄
• semi-condensed 有一点窄
• normal 正常值
• semi-expanded 有一点宽
• expanded 宽
• extra-expanded 特宽
• ultra-expanded 极宽
• initial
• unset

@font-face {
    font-family: test;
    font-weight: 400;
    font-style: italic;
    font-stretch: expanded;
    src: url(../font/test.otf) format("opentype");
}

这表示当字体字重为400，字形为斜体，字宽指定为expanded时使用../font/test.otf指定的字体资源。

限制字符范围unicode-range

作用

该描述符用于指定自定义字体可以应用在哪些字符上。浏览器会检测当前页面有没有指定的范围的字符存在，若是不存在则不会下载指定字体文件，反之才会下载。

属性值

默认情况下，该描述符的值包含全部unicode字符，即，只要应用该字体，那么所有字符都可以被渲染。

但是我们可以给这个范围进行缩小，令浏览器仅仅渲染指定字符为该字体。

指定范围可以用以下两种方式指定：

• U+xxxx-xxxx【x为十六进制数字】，表示从某个码点到某个码点的字符应用该字体。注意：范围必须是从小到大指定。
• U+xxxx中的某些x使用?来代替，?在此处是通配符，表示0-F。比如：U+10??就相当于U+1000-U+10FF

该属性值为一个指定范围的属性值列表，列表的元素间使用逗号作为分隔符。