在 HTML 和 CSS 中导入自定义字体

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

很多刚入门的网页开发者不知道如何给网站添加自定义字体！我相信你来对地方了。在这篇博客中，我将向你解释如何将自定义字体导入你的网站。

为您的网站添加独特的字体是让您的设计在网络上脱颖而出的好方法。

在这篇博客中，我将一步一步地指导您如何将任何字体添加到您的网站。

所以，我们将使用 Google Fonts 来导入自定义字体。那么，让我们快速浏览一下导入字体的步骤。

截至 2021 年 4 月，Google Fonts 拥有 1052 个字体系列，其中包括 89 个可变字体系列。

步骤一：访问 Google Fonts 网站
首先，您需要访问 Google Fonts 网站，该网站的链接是https://fonts.google.com/。

步骤二：搜索所需的字体
然后，您需要在搜索框中输入所需的字体名称，然后按回车键进行搜索。

步骤 3：选择样式
之后，您需要选择字体样式。（例如：Thin 100、Extra-Light 200 等……）步骤 4：有两种方法可以导入字体：1）在 HTML 文件中： i) 您需要使用 <link> 标签在 HTML 中导入字体，或者您 可以复制框中的代码并将其粘贴到您的 HTML 代码中。ii ) 现在我们已经成功添加了自定义字体！太棒了！现在我们 只需要在 CSS 属性中使用它。

2) 在 CSS 文件中
，要仅使用 CSS 导入字体，则必须单击 @import 而不是 ，然后复制其中的代码并将其粘贴到 CSS 文件的顶部。

额外提示：

建议在 HTML 中使用 link 标签导入字体，而不是在 CSS 中使用 @import。因为 HTML 页面和 link 标签在浏览器中首先加载，所以字体会先加载。而 CSS 文件在 HTML 文件之后加载，因此会降低字体导入速度。欢迎访问我和我的朋友@shreyazz


创建的社区 ，那里有更多精彩实用的内容。如果您有任何建议或反馈，欢迎留言😇！

CodeBox 的网址：https://linktr.ee/CodeBox