自托管下载的字体

Question

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

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

Answer 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。然而，这不是为多种字体使用一种字体的解决方法。它仅向浏览器声明可以在其他 urls:

的其他格式中找到相同的字体

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

更多见官方文档：MDN

Answer 2

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

自托管下载的字体

Self-hosting downloaded font

css

font-face