所以我尝试在 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;
}
你不能像这样在 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 Fonts 时更容易的是链接字体的样式表，然后在我的样式表中引用它。使用 Google Fonts 时，这是默认方法。
<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 thin and small.</p>
</body>
</html>
如果您使用此方法，请确保将其包含在之前您自己的CSS，如上所示。两者仍应位于
<head>上面还向您展示了如何导入字体的多种粗细/样式，以及如何在 CSS 中使用它们。在此示例中，段落使用较轻的字体粗细，而
<h1>但是，您不能随意选择权重。例如，Tangerine 只有两个权重：400 和 700，我已为此示例导入了这两个权重。仅导入您要使用的字体/样式，因为导入太多字体/样式会不必要地增加加载时间。
希望这有帮助。
这有效。你的 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>