Question

当我们从Google导入字体时，我们可以使用以下内容来引用它

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

在此示例中，您可以看到我使用的是具有4种字体粗细的字体

我现在想要嵌入字体，以便我可以在本地使用它们。在google-fonts中我可以下载它们，但这意味着我下载了多种字体。

以前我可以做的事情

.myCss {
    font-family:myGoogleFont;
    font-weight:700;
}

我可以在嵌入字体时实现相同目的，或者我必须这样做：

@font-face {
    font-family: myRegularFont;
    src: url(myGoogleFont-Regular.tff);
}

@font-face {
    font-family: my300Font;
    src: url(myGoogleFont-300.tff);
}

@font-face {
    font-family: my400Font;
    src: url(myGoogleFont-400.tff);
}

等

Answer 1

您可以执行以下操作：

// Normal
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 400; // 400 is considered normal
    src: url(myGoogleFont-Regular.tff);
}
// Thin
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 300;
    src: url(myGoogleFont-300.tff);
}
// Semi-bold
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 500;
    src: url(myGoogleFont-500.tff);
}
// Italic
@font-face {
    font-family: myRegularFont;
    font-style: italic;
    font-weight: 400;
    src: url(myGoogleFont-italic.tff);
}

我们可以在嵌入时使用Google字体，就像导入时一样

1 个答案: