自行托管下载的字体。

Question

我想自行托管下载的字体。我是否需要在多个url中列出每个字体文件？我正在使用以下代码片段：

@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%;
}

- Denver

Answer 1

是的。针对你拥有的每种字体，你都需要一个@font-face。更具体地说，对于你下载的每个字体文件，都需要一个@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');
}

为了浏览器兼容性，您可以添加多个文件作为字体的font-face，只需在URL后添加关键词format。但这并不是解决一个font-face适用于多个字体的方法。它仅告诉浏览器相同的字体可以在其他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

- Pelicer

---

非常感谢。我喜欢尽可能地将资源保留在本地。第二个片段非常有帮助。 - Denver

很高兴能够帮到您！如果这个答案解决了您的问题，请考虑接受它。 - Pelicer

Answer 2

你的代码没问题。你只需为所需使用的任何字体变体重复该序列。我是说，常规、斜体、粗体、粗斜体等等。此外，如果你有相同字体的不同文件类型，你也必须将它们包含进去，例如ttf、woff、woff2和其他类型。

- SIMBIOSIS surl

---

谢谢。我不会想到那个的。我倾向于注意只有ttf字体。 - Denver

你的最佳选择被拒绝了，因为woff是专门用于网页字体的。 - SIMBIOSIS surl