在前端开发中，我们常常会使用自定义字体来美化页面以及增加品牌特色。而在使用自定义字体时，我们通常需要将字体文件嵌入到我们的代码中，以保证可靠性以及节约 HTTP 请求。在本篇文章中，我们将介绍如何使用 SASS 中的 font-face 属性来嵌入字体文件。
SASS 中的 font-face 属性
font-face 是一个 CSS 属性，允许我们可以定义自己的字体。通过使用 @font-face 属性，我们可以在我们的项目中使用任何我们想要的字体文件，包括自定义字体。
在 SASS 中，我们可以通过以下代码来定义一个包含自定义字体的 font-face 属性：
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf");
font-weight: normal;
font-style: normal;
}其中，font-family 指定了字体名称，src 指定了字体文件的路径，font-weight 指定字体的字重，font-style 指定字体的风格。在上面的代码中，我们将字体文件 custom-font.ttf 嵌入到了我们的样式中，并给它起了一个名为 custom-font 的名称。
链接字体文件
在上面的代码中，我们使用了 url("../fonts/custom-font.ttf") 来链接字体文件 custom-font.ttf。假设我们的字体文件存放在 ./fonts 目录下，并且我们的样式文件存放在 ./styles 目录下，我们可以使用如下路径来链接字体文件：
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf");
font-weight: normal;
font-style: normal;
}其中，../ 表示回到上一级目录，fonts/custom-font.ttf 表示进入 fonts 目录并找到字体文件 custom-font.ttf。
定义字体
使用 @font-face 定义字体时，我们可以为字体指定多个属性，以使字体更加兼容和可靠。下面我们介绍一些常用的用法。
定义字体名称
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf");
font-weight: normal;
font-style: normal;
}在上面的代码中，font-family 指定了自定义的字体名称。
定义字重
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf");
font-weight: bold;
font-style: normal;
}在上面的代码中，font-weight 指定了字体的字重，可以取值为 normal、bold 等。
定义字体风格
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf");
font-weight: normal;
font-style: italic;
}在上面的代码中，font-style 指定了字体的风格，可以取值为 normal、italic 等。
定义字体格式
@font-face {
font-family: "custom-font";
src: url("../fonts/custom-font.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}在上面的代码中，我们使用了 format() 函数来定义字体格式，因为不同的浏览器支持不同的字体格式，我们应该为字体定义多种格式。truetype 格式是 SASS 中的一种字体格式，目前在主流浏览器中都得到了兼容。
使用自定义字体
定义好自定义字体以后，我们就可以在样式中使用它了。假设我们在样式中使用 font-family: "custom-font"; 时，我们实际上就是引用了字体名称为 custom-font 的字体。
下面是一个完整的示例，帮助你更好地理解如何使用 @font-face 定义及使用自定义字体。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ - --------- -------------------
----- ---------------- ------------------
-------
------
-------------
--------------------------
-------
--------- -------------------- ---- ------- ---------- - ------------ -------------- ---- ------------------------------- ------------------- ------------ ------- ----------- ------- - -- - ------------ -------------- - - - ------------ -------------- -
在上面的示例中，我们使用了自定义字体 custom-font.ttf，并将其定义在了样式文件 styles.scss 中。h1 和 p 分别使用了 font-family: "custom-font";，这意味着它们将应用自定义字体。
结论
在本篇文章中，我们介绍了如何使用 SASS 中的 @font-face 属性来嵌入字体文件，以及如何定义和使用自定义字体。自定义字体可以使我们的页面更具有特色，而使用 SASS 可以更加方便地管理字体样式，同时提高了可维护性。在项目中使用自定义字体时，我们需要注意字体格式的兼容性以及字体文件的大小等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704cb55d91dce0dc8503f91