自托管下载字体答案

【问题标题】：Self-hosting downloaded font自托管下载字体
【发布时间】：2021-08-23 10:22:52
【问题描述】：

我想自行托管下载的字体。我是否必须在多个 url 中列出每个字体文件？我正在使用这个 sn-p 代码：

@font-face {
    font-family: <Your-font>;
    src: url(<your-font-path>);
}
html, body {
    font-family: <Your-font>, sans-serif; /*Specify your font name here*/
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

【问题讨论】：

标签： css font-face

【解决方案1】：

是的。对于您拥有的每种字体，您都需要一个@font-face。更具体地说，您下载的每个字体文件都有一个。假设您有一种字体，其中包含三种不同的文件，一种用于常规，一种用于浅色，另一种用于粗体：

@font-face {
    font-family: font-regular;
    src: url('/font-regular.woff');
}

@font-face {
    font-family: font-light;
    src: url('/font-light.woff');
}

@font-face {
    font-family: font-bold;
    src: url('/font-bold.woff');
}

为了浏览器的兼容性，您可以为您的字体添加多个文件，方法是在 url 后添加关键字 format。然而，这不是为多种字体使用一个字体的解决方法。它只是向浏览器声明，可以在其他 url 中以其他格式找到相同的字体：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

查看更多官方文档：MDN

【讨论】：

非常感谢。我喜欢将尽可能多的资源保留在本地。第二个 sn-p 有很大帮助。
很高兴它有帮助！如果它解决了您的问题，请考虑接受答案。

【解决方案2】：

您的代码没问题。您只需要为您要使用的任何字体变体重复序列。我的意思是，常规，斜体，粗体，粗体斜体等等。此外，如果您有相同字体的不同文件类型，则必须包含它们，例如 ttf、woff、woff2 等。

【讨论】：

谢谢。我不会凭直觉知道的。我倾向于只注意 ttf 字体。
当时你最好的选择被拒绝了，因为 woff 是专门的网络字体。