在 HTML 中引入外部字体通常使用 CSS @font-face
规则。这允许您从外部源(例如 Google Fonts、Adobe Fonts 等)或您自己的服务器引入字体文件。
以下是使用 @font-face
在 HTML 中引入外部字体的基本步骤:
1. 获取字体文件
从可信赖的来源下载所需的字体文件(通常是 .woff
、 .woff2
、 .ttf
、 .otf
等格式的文件)。
2. 创建字体文件夹
将字体文件保存在您的项目中,最好将它们放在一个专门的文件夹中,例如 fonts/
。
3. 编写 CSS @font-face
创建一个 CSS 文件,并使用 @font-face
规则引入字体文件。在这个规则中,您可以指定字体的名称、文件路径、格式以及字体样式的描述。
示例代码:
/* 在您的 CSS 文件中 */
@font-face {
font-family: 'MyCustomFont'; /* 字体名称 */
src: url('fonts/YourFont.woff2') format('woff2'), /* 字体文件路径和格式 */
url('fonts/YourFont.woff') format('woff');
/* 可以添加多个不同格式的字体文件以提供更好的兼容性 */
/* 其他字体样式描述,例如 font-weight 和 font-style */
font-weight: normal;
font-style: normal;
}
/* 使用自定义字体 */
body {
font-family: 'MyCustomFont', sans-serif; /* 指定字体名称 */
}
4. 在 HTML 文件中引入 CSS
在您的 HTML 文件中引入这个 CSS 文件,确保它在需要使用自定义字体的元素上生效。
<!DOCTYPE html>
<html>
<head>
<title>引入外部字体</title>
<link rel="stylesheet" href="path/to/your/custom-font.css">
</head>
<body>
<h1>使用自定义字体</h1>
<p>这是一段使用自定义字体的文本。</p>
</body>
</html>
这样,您就可以在您的 HTML 文件中使用自定义字体了。记得替换示例中的字体名称和文件路径为您实际使用的字体名称和文件路径。