嵌入時我們可以使用與導入時相同的方式使用Google字體嗎？

Question

當我們從Google導入字體時，我們可以使用以下內容來引用它

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

在此示例中，您可以看到我正在使用具有4種字體粗細的字體

現在，我想嵌入字體，以便可以在本地使用它們。 我可以在Google字體內下載它們，但這意味着我可以下載多種字體。

我可以在哪里做

.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);
}