如何将谷歌字体连接到页面？答案

【问题标题】：How to connect google font to page?如何将谷歌字体连接到页面？
【发布时间】：2018-04-09 15:04:00
【问题描述】：

我使用了 Google Fonts 中关于如何设置字体的建议。于是我做了以下动作：

1) 在页面上添加了这个依赖：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700&amp;subset=cyrillic-ext" rel="stylesheet">

2) 设置CSS为body标签：

 html, body {
        font-family: 'Roboto', sans-serif;
        background: #f7f7f7;
    }

当我尝试为其他元素设置字体时：

a {
font-family: Roboto-Light;
}

它不起作用。

【问题讨论】：

标签： css html fonts google-webfonts

【解决方案1】：

a {
   font-family: 'Roboto'; /* You don't need this since you say html {font-family: 'Roboto'}*/
   font-weight: 100;
}
/*Font's family name need to be inside quotes "MyFontName"

【讨论】：

【解决方案2】：

Roboto 和Roboto-Light 从网站的角度来看是两种不同的字体。当您使用Roboto-Light 时，它不知道您想要来自Roboto 的细字体粗细。它只查找任何名为Roboto-Light 的字体，您没有加载、定义或声明它。

你可能想使用类似的东西：

a {
  font-weight: 100;
}

它将使用Roboto font-face，因为它已经设置在任何元素上，通过将其设置在body 上，但现在将使用100 font-weight，它非常非常薄。

【讨论】：

看附件，这不是 Roboto
这可能是因为您对这些元素应用了更强大的规则。 a 只是元素选择器，真的很弱。它被任何.class 选择器或#id 选择器覆盖。只需检查元素并查看适用的内容以及它的来源。你需要让你的选择器比这更强大。为什么不提供minimal reproducible example？我不能检查图片，可以吗？

【解决方案3】：

要将任何 Google 字体嵌入网页，请执行以下操作（Roboto Light 示例）：

打开Google Fonts网站，点击“查看可用字体”，然后选择Roboto字体。
点击“选择此字体”（上面的红色链接）。
点击下方的“1 Family Selected”快捷栏，然后点击“Customize”选项卡。
选择灯光样式。请注意，显示的是重量 300。
选择“嵌入”选项卡，您将获得Roboto Light 字体的链接标签。

请参见下面的 HTML 示例：

<html>
    <head>
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300">
        <style>
            body {
                font-family: 'Roboto', sans-serif;
                font-weight: 300;
                font-size: 48px;
            }
        </style>
    </head>
    <body>
        <div>Making the Web Beautiful!</div>
    </body>
</html>

【讨论】：