为什么我无法使用 Google 字体？

Question

所以我尝试在 html 页面的头部链接并在我的 css 文件中使用 @import，但我尝试使用的字体仍然无法加载。我还检查以确保我没有运行任何可能导致问题的插件，所以我真的不确定该怎么做。如果有人能帮我解决这个问题那就太好了。

<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylsheet" href="anagram.css">
</head>
<body>
  <p>Look here!</p>
</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Tangerine);

p {
font-family:'Tangerine';
font-size:48px;
}

Answer 1

这行得通。您的 HTML 格式不正确。

<!Doctype html>
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Tangerine);

p {
font-family:'Tangerine';
font-size:48px;
}
</style>
</head>
<body>
  <p>Look here!</p>
</body>
</html>

Answer 2

你不能像这样在你的 HTML 文件中随机放置 CSS。它需要位于 <style> 标记或外部样式表中。将您的样式移动到 <style> 标签中，该标签也需要位于 <head> 内。

<html>
<head>
    <title>My website... whatever</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Tangerine);

        p { font-family: 'Tangerine'; }
    </style>
</head>
<body>
    <p>My font is called Tangerine</p>
</body>
</html>

...或者，我发现使用 Google 字体时更容易的是 link 字体的样式表，然后在我的样式表中引用它。使用 Google 字体时，这是默认选项。

<html>
<head>
    <title>My website... whatever</title>
    <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
    <style>
        p {
            font-family: 'Tangerine';
            font-size: 100%;
            font-weight: 400;
        }
        h1 {
            font-family: 'Tangerine';
            font-weight: 700;
            font-size: 150%;
        }
    </style>
</head>
<body>
    <h1>I'm thick and large.</h1>
    <p>I'm small and thin.</p>
</body>
</html>

如果您使用此方法，请确保将其包含在之前您的CSS，如上。两者仍然需要在 <head> 部分内。

上面还向您展示了 Google 如何导入一种字体的多种粗细，以及如何在您的样式表中使用它们。在此示例中，paragraphad 使用较细的字体版本，而 <h1> 标题使用较粗的字体版本，字号也较大。

不过你不能随便选择你想要的重量。例如 Tangerine 只有 400 和 700，所以我将它们都导入了。仅导入您将要使用的那些，因为导入太多会不必要地减慢网站速度。

希望对您有所帮助。

为什么我无法使用 Google 字体？

Why can't I get Google Fonts to work?

html

css

fonts

google-font-api