如何将 google 字体连接到页面？

Question

我已经使用了Google字体中的建议如何设置字体。所以我做了以下操作：

1) 在页面添加了这个附录：

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

2) 将 CSS 设置为正文标签：

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

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

a {
font-family: Roboto-Light;
}

没用。

Answer 1

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

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

a {
  font-weight: 100;
}

它将使用 Roboto 字体，因为它已经在任何元素上设置，通过在 body 上设置它，但现在将使用 100 字体粗细，这真的非常非常薄。

Answer 2

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"

Answer 3

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

打开Google Fonts site, click on "See Available Fonts" and then select the Roboto字体。
单击 "Select This Font"（上面的红色 link）。
单击下面的“1 个家庭 Selected”快餐栏，然后单击 "Customize" 选项卡。
Select 浅色风格。注意显示的是重量300
Select "Embed" 选项卡，您将拥有 Roboto Light 字体的 link 标签。

请参阅下面的 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>

如何将 google 字体连接到页面？

How to connect google font to page?

html

css

fonts

google-webfonts