时间戳

首页 > 解决方案 > 将本地字体转换为 Google 字体 CDN

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

问题描述

我的网站上有一堆机器人字体。我想使用谷歌字体 CDN 而不是仅仅为了性能问题。当我将 google CDN url 放入 url("@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap'") 时，我遇到了一个问题不行。例如，下面的 CSS 使用本地机器人字体，我应该用谷歌字体 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. 机器人平板常规 400

标签： cssfont-facewebfontsgoogle-webfontsroboto

解决方案

您可以像这样在 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

推荐阅读