语法
@font-face {
font-properties
}
@font-face 规则示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-face {
font-family: 'myFont';
src: url('webfont.eot');
/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
div {
font-family: myFont, sans-serif;
}
</style>
</head>
<body>
<h2>@font-face example</h2>
<div>
@font-face CSS at-rule 指定用于显示文本的自定义字体； 可以从远程服务器或者用户计算机上本地安装的字体加载字体。 如果提供 local() 函数，指定要在用户计算机上查找的字体名称，并且用户代理找到匹配项，则使用该本地字体。 否则，下载并使用使用 url() 函数指定的字体资源。
</div>
<p>
@font-face at-rule Jan 不仅可以在 CSS 的顶层使用，还可以在任何 CSS 条件组 at-rule 中使用。
</p>
</body>
</html>
CSS @font-face Rule 属性值说明
| Font 描述符 | 价值 | 描述 |
|---|---|---|
| font-family | 名称 | 它定义了字体的名称，它是一个要求。 |
| src | URL. | 它定义了将下载字体的URL，并且它是一个要求。 |
| font-stretch | 正常浓缩超浓缩超级浓缩半浓缩 explably 超展开 | 它定义了字体将如何延长。其默认值是正常的，它是可选的。 |
| font-style | 正常的斜体斜 | 它定义了字体如何样式。其默认值是正常的，它是可选的。 |
| font-weight | 普通股份 900 | 它定义了字体粗体。其默认值是正常的，它是可选的。 |
| unicode-range | unicode范围 | 它定义了字体支持的Unicode字符的范围。其默认值为u + 0-10ffff，它是可选的。 |
OTF/TTF
WOFF 是为响应 OpenType 字体和 TrueType 字体而创建的，因为这些格式很容易（并且非法）被复制。
但是，OpenType 功能可能会引起很多设计者的兴趣（例如连字）
SVG/SVGZ
可缩放矢量图形（字体）是字体的矢量重新创建，使其文件大小更轻，非常适合移动使用。
它是 Safari for iPhone 4.1 及以下版本允许的唯一格式。
SVGZ 是 SVG 的压缩版本。
CSS @font-face 是一个规则，它允许网页设计师定义在线字体以在他们的上显示文本。
因此，网页设计师将不再需要使用“网络安全字体”。
我们必须首先在新的@font-face 规则中为字体定义一个名称（如 myFirstFont），然后指向字体文件。
每个浏览器都有自己的格式。
我们使用 ttf、otf、eot、svg、svgz、woff、woff2 格式。
WOFF/WOFF2
Web Open Font Format，为在 Web 上使用而创建并由 Mozilla 与其他组织一起开发，WOFF 字体通常比其他格式加载更快，因为它们使用 OpenType (OTF) 和 TrueType (TTF) 字体使用的结构的压缩版本. WOFF2是新一代的WOFF，压缩性更好。
在使用自定义字体时，我们应该考虑以下几点：
- 文件大小。建议使用较轻版本的选项。
- 字符集限制。我们可以限制字体集以仅加载使用的字体。
- 小屏幕的系统字体。解决方案之一是在使用@media 加载自定义字体时定位更大的屏幕。
| 初始值 | 取决于浏览器。 |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.fontFamily =“Verdana，Sans-Serif”; |
EOT
微软（@font-face 的原始创新者）在 15 年前创建的 Embedded Open Type 格式是 IE8 及以下版本在使用 @font-face 时唯一能识别的格式。
浏览器支持
最深入的浏览器支持
这是支持最深的方法。
在任何样式之前，我们应该将 @font-face 规则添加到样式表中。
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
/* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
然后，它用于按以下方式设置元素的样式：
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
浏览器支持的实际水平
由于 WOFF 和 WOFF2 是常用的，我们可以使用以下内容：
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
}
超级渐进式浏览器支持
如果我们正在研究 WOFF，可以预期 WOFF2 可以在某个时候使用：
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}
替代技术
在某些情况下，最好使用托管字体。
这是由 Google Fonts 提供的，作为使用其字体的一种方式。
在以下代码中，@import 用于从 Google Fonts 加载字体：
@import url(//fonts.googleapis.com/css?family=Open+Sans);
然后它可以用于样式元素：
body {
font-family: 'Open Sans', sans-serif;
}
托管服务可能具有优势。
它可能会包含字体文件的所有变体，提供深度的跨浏览器兼容性，并且不需要我们自己托管文件。
@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
background: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 24px;
padding: 50px;
}
同样，样式表可以链接到 HTML 文档的 <head> 中的相同资产，而不是 CSS。
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
然后，元素可以像其他方法一样设置样式：
body {
font-family: 'Open Sans', sans-serif;
}
同样，@font-face 规则被导入，但它们被添加到 HTML <head>：
body {
background: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 24px;
padding: 50px;
}
h1 {
font-size: 30px;
line-height: 45px;
font-family: 'Open Sans', sans-serif;
}
使用 Google 字体的 @font-face 规则示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet">
<style>
h2{
font-family: 'Courier Prime', monospace;
font-weight:700;
}
div {
font-family: 'Courier Prime', monospace;
}
p{
font-family: 'Courier Prime', monospace;
}
</style>
</head>
<body>
<h2>@font-face example</h2>
<div>
@font-face CSS at-rule 指定用于显示文本的自定义字体； 可以从远程服务器或者用户计算机上本地安装的字体加载字体。 如果提供 local() 函数，指定要在用户计算机上查找的字体名称，并且用户代理找到匹配项，则使用该本地字体。 否则，下载并使用使用 url() 函数指定的字体资源。
</div>
<p>
@font-face at-rule Jan 不仅可以在 CSS 的顶层使用，还可以在任何 CSS 条件组 at-rule 中使用。
</p>
</body>
</html>