- 章节重复度20190523003
- 223
- 370字
- 2024-12-10 09:46:51
②@font-face（自定义字体）
@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。如果提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源。
▼
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
It's common to use both url( ) and local( ) together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.
通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能。
▲
@font-face {
font-family: "HONORSans";
font-weight: normal;
src: url(../Fonts/HONORSans-Regular.ttf);
}
@font-face {
font-family: "HONORSans";
font-weight: bold;
src: url(../Fonts/HONORSans-Bold.ttf);
}
@font-face {
font-family: "HONORSans";
font-style: italic;
src: url(../Fonts/DingTalk-Sans.ttf);
}
.HONORSans {
font-family: "HONORSans";
}
主字体：HONORSans-Regular（嵌入式字体不包含CJK字符集），粗字体：HONORSans-Bold（使用 b 元素调用），意大利体：DingTalk-Sans（使用 i 元素调用）
如果字体没有变化，表示不支持 @font-face 规则。这里的粗字体不是浏览器加粗计算的结果，而是CSS中定义的 Bold 字重。