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

您不能将CSS随机放入HTML文件中。它需要位于<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字体时我觉得更容易的是链接字体的样式表，然后在我的样式表中引用它。使用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如何导入多种字体权重，以及如何在样式表中使用它们。在此示例中，paragraphd使用较薄的字体版本，而<h1>标题使用较粗的字体版本，也使用较大的字体。

你不能选择你想要的任何重量。例如，橘子只有400和700，所以我进口了它们。只导入你要使用的那些，因为导入太多会不必要地减慢网站速度。

希望这有帮助。

Answer 2

这很有效。你的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>

为什么我不能让谷歌字体工作？

2 个答案: