为理解决这个问题，CSS 引入 web 字体，许可浏览器从做事器下载字体，下载完成后再重新渲染字体。
字体文件格式利用 web 字体前，须要理解常用的字体文件格式。
TTF 字体文件，即 TrueType 字体，是由苹果和微软在 20 世纪 80 年代末开拓的字体标准。它是 macOS 和 Windows 操作系统利用最广泛的字体格式。
OTF 字体文件，即 OpenType 字体，是一种可缩放的打算机字体格式。它建立在 TrueType 根本上，是微软的注册牌号。OpenType 字体目前在紧张的打算机平台上广泛利用。
WOFF 字体文件，即 The Web Open Font Format 字体，是一种用于网页的字体格式，2009 年开拓，如今是 W3C（万维网同盟）的推举标准。WOFF 实质是 OpenType 或 TrueType 字体，但是经由压缩并附加额外的元数据。在带宽受限的网络中，WOFF 能更好的支持从做事器到客户真个字体传输。
WOFF 2.0 字体文件，比较于 WOFF，供应了更高的压缩效率。
SVG 字体，将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范，许可在 SVG 文档中创建字体。
EOT 字体文件，即 Embedded OpenType Fonts 文件，是微软设计的一种用于网页的嵌入式字体，它是 OpenType 字体的紧凑形式。
不同字体格式的浏览器兼容性下图所示：
不同字体格式的浏览器兼容性，截图数据来自 w3schools.com
利用自定义字体利用 @font-face CSS 指令定义自定义字体。利用前须要把字体文件放在做事器目录，然后定义新的字体名称，并指向字体所在位置。
以京華老宋体为例，这是一款可以免费商用的中笔墨体。下载字体文件后，放到和 index.html 同级的目录，重命名为 jh-song.ttf。
下载字体文件
在 @font-face 指令内，利用 font-family 定义字体名称，src 属性定义字体文件路径。
定义 web 字体
然后，像利用普通字体一样，利用自定义字体样式：
利用 web 字体
完全 HTML 代码如下：
完全的 HTML 代码
浏览器显示效果如下：
web 字体显示效果
转换字体格式在开拓者工具可以看到，上面中笔墨体的 ttf 文件体积高达 36.7MB。
考试测验转换为 woff 格式，看看体积会有什么变革。我们在这里利用一个 Node.js 工具 ttf2woff。
ttf2woff 的自我介绍
实行命令，创造 woff 文件比 ttf 小了 11MB 旁边。
转换字体文件格式
@font-face 指令的 src 属性支持多个字体格式，浏览器会根据自身支持情形，从前今后挨个匹配，终极渲染的字体是首个命中的字体。因此，一样平常把新字体放前面，旧字体放后面兜底。
利用多个字体文件格式
此时，浏览器会下载 .woff 文件：
浏览器自动识别下载 woff 字体
24MB 的字体依然不小，如果希望连续优化字体大小，可以利用百度前端团队出品的 fontmin 工具。它的事理是只提取用到的字符信息，重新天生新的字体文件。
Fontmin 自我介绍
Fontmin 的例子
参考资料CSS Web Fonts，https://www.w3schools.com/css/css3_fonts.asp@font-face，https://developer.mozilla.org/en-US/docs/Web/CSS/@font-faceThe Web Open Font Format (WOFF), https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/WOFFTracking the History of CSS Fonts，https://css-tricks.com/tracing-history-css-fonts/，by Robin Rendle, 2017-05-11京華老宋体（已更新2.0），https://zhuanlan.zhihu.com/p/637491623，特里王，2024-04-07Converting TTF fonts to WOFF2 (and WOFF)，https://dev.to/benjaminblack/converting-ttf-fonts-to-woff2-and-woff-3f5b，by Benjamin Black, 2018-09-11fontello/ttf2woff, https://github.com/fontello/ttf2woffecomefe/fontmin，https://github.com/ecomfe/fontmin完
