资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Custom Font Example

创作时间:

作者:

@小白创作中心

Custom Font Example

引用

来源

https://docs.pingcode.com/baike/3007584

在网页设计中，字体的选择和应用对于提升用户体验至关重要。本文将详细介绍如何在HTML中调用字体文件，包括使用@font-face规则、Google Fonts以及自定义字体文件等多种方法，并提供具体的代码示例和优化建议。

一、使用@font-face规则

@font-face 是 CSS3 提供的一种规则，可以让开发者在网页中使用自定义的字体文件。通过这种方法，你可以直接引用本地或远程服务器上的字体文件。

1.1 添加字体文件到项目

首先，你需要将字体文件（如 .ttf、.woff 或 .otf 格式）添加到项目的合适位置。通常，这些文件会放在一个名为 "fonts" 的文件夹中，例如：

/project-root
/fonts
custom-font.ttf
index.html
style.css

1.2 在 CSS 中使用@font-face

接下来，在 CSS 文件中使用@font-face规则来定义字体的属性和源文件路径：

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/custom-font.woff2') format('woff2'),
         url('fonts/custom-font.woff') format('woff'),
         url('fonts/custom-font.ttf') format('truetype');
}

1.3 在 HTML 中应用自定义字体

最后，在 HTML 或 CSS 中应用你定义的字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Font Example</title>
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            font-family: 'CustomFont', sans-serif;
        }
    </style>
</head>
<body>
    <h1>使用自定义字体</h1>
    <p>这是一个使用自定义字体的示例。</p>
</body>
</html>

二、使用 Google Fonts

Google Fonts 是一个非常方便的工具，提供了大量的免费字体库，可以直接在网页中使用。

2.1 引入 Google Fonts

首先，在 HTML 文件的 <head> 部分添加 Google Fonts 提供的链接。例如：

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

2.2 应用 Google Fonts

接下来，在 CSS 中使用引用的字体：

body {
    font-family: 'Roboto', sans-serif;
}

三、使用自定义字体文件

如果你有自己的字体文件，可以直接引用本地或远程的字体文件。

3.1 下载字体文件

首先，确保你有字体文件（如 .ttf、.woff、.eot 等格式），并将这些文件放置在项目中合适的位置。

3.2 在 CSS 中定义@font-face

在 CSS 文件中定义@font-face规则，并指定字体文件的路径：

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/my-custom-font.eot'); /* IE9 Compat Modes */
    src: url('fonts/my-custom-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/my-custom-font.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/my-custom-font.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/my-custom-font.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/my-custom-font.svg#MyCustomFont') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

3.3 应用自定义字体

在 CSS 中应用自定义字体：

body {
    font-family: 'MyCustomFont', sans-serif;
}

四、字体格式和兼容性

不同的浏览器对不同的字体格式支持有所不同。为了确保最大的兼容性，建议提供多种格式的字体文件。

4.1 常见的字体格式

TrueType Fonts (TTF): 广泛支持，但文件较大。
OpenType Fonts (OTF): 比 TTF 更加灵活，支持更多特性。
Web Open Font Format (WOFF): 专门为网页设计，支持压缩和元数据。
Web Open Font Format 2 (WOFF2): WOFF 的改进版，支持更高的压缩比。
Embedded OpenType (EOT): 主要用于 Internet Explorer。
Scalable Vector Graphics (SVG): 主要用于移动设备。

4.2 提供多种格式的示例

为了确保不同浏览器的兼容性，可以在@font-face规则中提供多种格式的字体文件：

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/my-custom-font.eot'); /* IE9 Compat Modes */
    src: url('fonts/my-custom-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/my-custom-font.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/my-custom-font.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/my-custom-font.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/my-custom-font.svg#MyCustomFont') format('svg'); /* Legacy iOS */
}

五、字体的优化和性能

使用自定义字体时，需要考虑页面加载速度和性能。以下是一些优化技巧：

5.1 使用 WOFF 和 WOFF2 格式

WOFF 和 WOFF2 格式具有较高的压缩比，能有效减少字体文件的大小，提高页面加载速度。

5.2 字体子集化

如果字体文件过大，可以通过字体子集化工具（如 Font Squirrel）生成只包含所需字符的字体文件，减少文件大小。

5.3 异步加载字体

通过 CSS 的 font-display 属性可以控制字体的加载行为，避免阻塞页面的首次渲染：

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/my-custom-font.woff2') format('woff2');
    font-display: swap;
}

5.4 使用字体加载库

使用字体加载库（如 Google 的 Web Font Loader）可以更灵活地控制字体的加载和应用：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Droid Sans', 'Droid Serif']
        }
    });
</script>