11. 字体

定义字体

@font-face 规则

@font-face {
    font-family: "myfont";
    src: url("./path/to/font.woff2") format("woff2"),
         url("./path/to/font.woff") format("woff");
    font-style: normal;
    font-weight: normal;
}

font-family：指定自定义字体的名称

src：字体的文件位置，有 2 种方式加载字体：

• local()：从用户本地查找指定的字体名称
• url()：可以是相对地址/绝对地址或者是网络地址（受跨域限制）

可以指定多个地址，用逗号分隔，浏览器会搜索并使用它能找到的第一个

format：指定字体的格式

字体格式	后缀	format	用途
Web Open Font Format	.woff2	woff2	w3c 推荐使用
Web Open Font Format	.woff	woff	w3c 推荐备用
TrueType Fonts	.ttf	truetype	常见字体，一般推荐
OpenType Fonts	.otf	opentype	ttf 的代替品，一般推荐
SVG Fonts	.svg	svg	矢量图形字体，不推荐
Embedded OpenType Fonts	.eot	embedded-opentype	IE 专用，不推荐

Warning

不能在一个 CSS 选择器中定义 @font-face

---

@font-face 自定义字体 - CSS Guidebook (tsejx.github.io)