Question

我在Google字体中使用过如何设置字体的建议。所以我做了以下行动：

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

它不起作用。

Answer 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"

Answer 2

从网站的角度来看，

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

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

a {
  font-weight: 100;
}

它将使用Roboto font-face，因为它已经在body上设置在任何元素上，但现在将使用100 font-weight，这是真的，真的很瘦。

Answer 3

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

打开Google Fonts网站，点击＆＃34;查看可用字体＆＃34;然后选择Roboto字体。
点击＆＃34;选择此字体＆＃34; （上面的红色链接）。
点击＆＃34; 1 Family Selected＆＃34;在下面的snackbar然后点击＆＃34; Customize＆＃34;标签。
选择灯光样式。注意，显示重量300.
选择＆＃34;嵌入＆＃34;选项卡，您将获得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>

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

3 个答案: