如何使用下载的字体在 CSS 中

什么是 CSS 中的自定义字体？

在 CSS 中，自定义字体是我们下载或创建后可以使用的字体。简单来说，自定义字体就是系统中未内置的字体。它们可以包括我们下载的字体或公司使用的特定品牌字体。

如何在 CSS 中使用下载的字体

如果我们想在 CSS 中添加或使用下载的字体，我们需要下载想要添加到项目文件中的字体文件。我们可以从网站上下载字体，或者购买字体许可证。

有几种方法可以用来在 CSS 中添加下载的字体

• @font-face
• @import
• <link>

CSS @font-face

在 CSS 中，使用 CSS @font-face，我们可以为我们的网页指定自定义或下载的字体。

让我们举个例子以便更好地理解

说明

在上面的例子中

• @font-face: 是一个 CSS 属性，用于添加自定义或下载的字体。
• font-family: 我们将字体系列设置为 Roboto
• Src: 它指定了我们下载字体的路径和格式

我们可以在网页上使用自定义或下载的字体。

CSS @font-face 规则

在 CSS 中，我们使用 @font-face 将下载的字体加载到网页上。借助 @font-face，可以从远程服务器加载自定义字体，也可以从用户本地系统安装字体。

语法

• @font-face 指代要加载的字体系列
• Src 用于指定文件中自定义字体的 URL 和格式
• url 指定了远程或本地托管的字体路径
• format 指的是 CSS 中的字体文件

示例

HTML

CSS

输出

CSS @import 规则

在 CSS 中，我们使用 @import 属性来导入其他远程托管的字体。借助 CSS 中的 @import 属性，我们可以轻松地从其他网站导入自定义字体。

语法

示例

HTML

CSS

输出

CSS <link> 标签

在 CSS 中，借助 <link> 标签，我们可以像在 @import 规则中一样将字体加载到文件中。使用 <link> 标签，我们可以将下载的或自定义的字体添加到项目中。

语法

让我们看看 CSS 中 <link> 标签的语法

示例

HTML

CSS

输出

在 CSS 中使用自定义字体的优点

在网站上使用自定义字体有很多好处

品牌塑造

在 CSS 中，我们使用自定义字体为品牌创建独特且吸引人的外观，使其更具记忆点并易于用户识别。

性能

在 CSS 中，我们可以使用自定义字体来设计网站的特定内容并针对其特定需求进行优化。这可以加快数据加载速度并提高性能。

灵活性

通过使用自定义字体，我们可以修改或定制设计以更好地适应网站，而 Web 字体通常是固定的，不易更改。

控制

在 CSS 中，使用自定义字体使我们能够更好地控制网站的外观。借助下载的字体，我们可以选择字体的确切大小、间距和其他方面，但对于 Web 字体，我们仅限于服务提供的选项。

唯一性

通过使用自定义字体，我们可以帮助我们的网站脱颖而出，变得更加独特，从而在竞争中取得优势。