本文适合任何人，从初学者到最有经验的 Web 开发人员。 我见过长达十年的高级 Web 开发人员忽略字体并且没有正确处理它们，所以请继续阅读。
阅读下面几行后，您将使用正确的 @font-face 和 CSS，它们将在浏览器中正常工作。
您的网站在不同设备上的外观和性能都应如此。
什么是字体？
我假设您已经知道这一点，否则您将不会阅读本文。
然而，为了提供信息，@font-face 允许将特定字体嵌入到网站上，而不必依赖远程用户将它们安装在他们的系统上。
可用的字体类型有：“.woff”、“.woff2”、“.ttf”、“.otf”、“.eot”和“.svg”。
- ".woff" 代表 Web 开放字体格式
- ".woff2" 代表 WOFF 2.0 - Web 开放字体格式
- ".ttf", ".otf" 代表 TTF/OTF - TrueType 和 OpenType
- ".eot" 代表 EOT - 嵌入式 OpenType
- ".svg" 代表 SVG 字体
每个浏览器都有对这些类型的“自己的”支持（不幸的是），所以你需要考虑到这一点。
如果您希望您的页面在所有设备和浏览器上看起来都一样，则需要上述所有格式。
##如何正确使用Font Face？
这是棘手的部分，因为如果您对此进行谷歌搜索，即使是顶级网站也不会向您展示严酷的现实。
如上所述，每个浏览器都有自己的字体支持，如果你想让你的字体在每个浏览器上工作，你必须加载必要的字体类型并相应地调整你的 CSS。
例如，如果我们检查 Mozilla ，您会注意到以下内容：
1@font-face {
2 font-family: "Open Sans";
3 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4 url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}这够了吗？ 不，它不适用于所有浏览器。 例如，这在 Internet Explorer 下根本不起作用。
您可以结帐 https://caniuse.com/?search=woff2 并亲自查看。
另一个例子，如果我们结帐 W3 Schools ：
1@font-face {
2 font-family: myFirstFont;
3 src: url(myFirstFont.woff);
4}这个对吗？ 仍然没有，它不会支持所有浏览器。
为了支持所有浏览器，您加载的字体类型和 CSS 应如下所示：
1@font-face {
2 font-family: 'FONT';
3 src: url('FONT.eot'); /* IE9 Compat Modes */
4 src: local(''),
5 url('FONT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
6 url('FONT.woff2') format('woff2'), /* Super Modern Browsers */
7 url('FONT.woff') format('woff'), /* Modern Browsers */
8 url('FONT.ttf') format('truetype'), /* Safari, Android, iOS */
9 url('FONT.svg#FONT') format('svg'); /* Legacy iOS */
10}注意每种字体类型的注释，这是不言自明的。 这将支持所有浏览器，并且您的字体将相应地显示。
##如何转换和生成Font Face类型？
如果您正在为客户开发网站，他们通常会给您一种字体类型。 这要么只是 .otf 或 .ttf 格式，还不够。
您需要所有浏览器所需的所有格式，因此您需要将它们转换为适当的 @font-face 类型。
幸运的是，我们有在线工具可以自动执行此操作，甚至为它生成正确的 CSS（我们是否进化了）。
转换付费/自定义字体
我推荐你使用 Transfonter ，但你当然可以使用任何你喜欢的。
这个在线免费工具将转换您的字体并为您提供现成的字体类型和 CSS：
1@font-face {
2 font-family: 'Sample';
3 src: url('Sample.eot');
4 src: url('Sample.eot?#iefix') format('embedded-opentype'),
5 url('Sample.woff2') format('woff2'),
6 url('Sample.woff') format('woff'),
7 url('Sample.ttf') format('truetype'),
8 url('Sample.svg#Sample') format('svg');
9 font-weight: normal;
10 font-style: normal;
11}转换免费/开源字体
在另一种情况下，您的客户不会为您提供付费字体而是免费的 Google 字体，也有一个工具可以做到这一点：[https://google-webfonts-helper.herokuapp.com/fonts](https:/ /google-webfonts-helper.herokuapp.com/fonts）。
此工具还将生成在所有浏览器上正确显示字体所需的类型和 CSS。
我强烈建议您检查不同浏览器中生成的字体。
如何正确使用字体系列？
我可以打赌，您从未以最佳方式使用字体系列规范。 加载正确的字体是不够的，您还需要指定后备字体。
当当前字体不可用时使用备用字体。 由于 CDN 问题或网络超时，可能会发生这种情况。
您会注意到大多数 CMS 都定义了如下的后备字体：
1html {
2 font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}够了吗？ 嗯，没有。 不幸的是，每个设备上的系统字体都不相同。 Windows 有它自己的，Android 有它自己的，iOS 也有，等等。
那么该怎么办？ 正确声明它们，查看 Bootstrap 是如何做到的：
1 // Safari for OS X and iOS (San Francisco)
2 -apple-system,
3 // Chrome < 56 for OS X (San Francisco)
4 BlinkMacSystemFont,
5 // Windows
6 "Segoe UI",
7 // Android
8 "Roboto",
9 // Basic web fallback
10 "Helvetica Neue", Arial, sans-serif,
11 // Emoji fonts
12 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;将上述内容与自定义字体一起使用，结果将是：
1font-family: "自定义字体在这里", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";现在这是处理后备字体的一种巧妙方式，确保您的网站在字体加载（或根本不加载）时在所有设备上看起来都很流畅。
测试字体和字体系列
不要被测试这个词吓到，如果你聪明地工作，这是一个非常简单的过程。 您甚至不需要手动检查页面以查看已加载的字体（如果您很懒惰）。
随着技术的发展，开发人员可用的工具也在不断发展； 让生活更轻松，更容易创造事物。
检查你的 @font-face 和 font-family 是否正确加载是一个非常简单的过程，见下文。
检查字体和字体系列
- 使用浏览器扩展轻松查看您的网站使用的字体：
- 编辑您的页面并“破坏”
@font-face，模拟未加载自定义字体的情况。您可以通过更改导致不存在字体的字体名称或 URL 来“中断”加载。 - 结果应该是与您的设备匹配的第一个字体作为后备。例如，如果您使用的是 Apple 设备，则应为“-apple-system”。
＃＃＃ 技巧和窍门
- 如果您从 CDN 加载字体，请使用“预连接”HTML 链接标题标签。
- 在每个字体声明中，添加
font-display: swap;以加速加载。这指示浏览器使用后备字体显示文本，直到自定义字体完全下载。 - 仅加载实际需要的字体，我见过有人加载相同字体的 7 种字体类型，但只使用其中一种。
- 要提高页面速度，请使用 HTTP/2 预加载（第一个或必要的）字体。这将大大加快您的页面速度并修复 Google PageSpeed“确保文本在 webfont 加载期间保持可见”。
好了，就是这样，希望这篇文章对你有所帮助。
评论