css - 将本地字体转换为 Google Fonts CDN

Question

我的网站上有一堆机器人字体。我想使用 Google 字体 CDN 而不是仅仅为了性能问题。当我将 google CDN url 放入 url("@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap'") 时遇到一个问题不工作。 例如，下面的 CSS 使用本地 Robot 字体，我应该将其替换为 Google 字体 CDN。我应该做什么来解决这个问题？

 @font-face {
    font-family: roboto regular;
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), url(../webfonts/Roboto-Regular.woff) format('woff');
}
@font-face {
    font-family: roboto medium;
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), url(../webfonts/Roboto-Medium.woff) format('woff');
}
@font-face {
    font-family: roboto bold;
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    src: local('Roboto Bold'), url(../webfonts/Roboto-Bold.woff) format('woff');
}
@font-face {
    font-family: roboto slab regular;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Slab Regular'), url(../webfonts/RobotoSlab-Regular.woff) format('woff');
}

1. 机器人常规 400
2. 机器人中号 500
3. 机器人粗体 600
4. roboto 板常规 400

Answer 1

您可以像这样在 HTML 中链接它:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

或者将其导入到您的 CSS 中:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap');

然后将其应用到您的 css 中，如下所示:

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;

然后您可以删除您的 @font-face 实现。

来源:https://fonts.google.com/share?selection.family=Roboto%20Slab%7CRoboto:wght@400;500;700