为了使设计具有吸引力，我们可以使用一些独特的字体。
在本教程中，我们将介绍添加自定义字体的最常用方法。
CSS @font-face 规则是一种向添加自定义字体的通用方法。
让我们看看如何做到这一点。
创建 HTML
- 使用 <h1> 标签。
- 将内容放在 <div> 标签内。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h1>@font-face example</h1>
<div>
经历过风雨，才懂得阳光的温暖。是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
</body>
</html>
添加 CSS
- 在 @font-face 规则中定义字体名称 ('myFont')。
- 使用 font-family 属性为所选元素创建字体系列名称的优先列表。
@font-face {
font-family: 'myFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
body {
font-family: 'MyFont', Fallback, sans-serif;
}
让我们看看结果。
使用 @font-face 规则添加自定义字体的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
@font-face {
font-family: 'myFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
body {
font-family: 'MyFont', Fallback, sans-serif;
}
</style>
</head>
<body>
<h1>@font-face example</h1>
<div>
经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
</body>
</html>
我们还可以从 Google Fonts 添加一些独特的字体，并将它们与 @font-face 规则一起使用。
为此，我们需要在 HTML 文档中添加一个特殊的样式表链接，然后在 CSS 样式中引用字体。
实现这些字体非常容易。
使用 Google Fonts 添加独特字体的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</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>
<h1>@font-face example</h1>
<div>
经历过风雨，才懂得阳光的温暖。是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
<p>
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
虽然 CSS @font-face 规则有很好的浏览器支持，但每个浏览器都有自己的格式：TTF、OTF、EOT、SVG、SVGZ、WOFF、WOFF2.
WOFF（Web 开放字体格式）字体使用 OpenType (OTF) 和 TrueType (TTF) 字体使用的结构的压缩版本。
它们通常比其他格式加载速度更快。
WOFF 字体还允许将另外的元数据添加到文件中。
这种格式的新一代是WOFF2.
EOT（嵌入式开放类型）字体使 OpenType 和 TrueType 字体能够链接到网页以使用所需的字体进行渲染。
SVG（可缩放矢量图形）是一种为渲染引擎嵌入字形信息的简单方法。
它提供较小的文件大小。
SVG 有一个压缩版本：SVGZ。
日期：2020-06-02 22:14:55 来源：oir作者：oir