HTML 和 CSS 基础知识.. 谷歌字体不起作用？

Question

我似乎无法弄清楚我做错了什么。

我有...

<link href="https://fonts.googleapis.com/css?family=Spectral+SC" 
rel="stylesheet"type="text/css">


h1{ font-family: 'Spectral SC', serif;
}

.green-text{
color:rgb(0,255,0);
}

<h1 class=" text-center green-text">"Don't let anyone define you. You define 
yourself."</h1>

我正在使用 codePen，它告诉我不必包含“样式”，因为它们已经导入了它。我的字体不起作用，我做错了什么？？谢谢!

 Heres a link to a screenshot of my window...


[1]: /image/oQj42.png

Answer 1

问题是你在写 HTML在CSS CodePen 的一部分，这让它感到困惑。

只需转移您的 <link>引用谷歌字体到HTML部分，如 CodePen link 中所示 我已经分享过了。

这也可以在以下 StackSnippet 中看到:

h1 {
  font-family: 'Spectral SC', serif;
}

.green-text {
  color: rgb(0, 255, 0);
}

<link href="https://fonts.googleapis.com/css?family=Spectral+SC" rel="stylesheet" type="text/css">

<h1 class=" text-center green-text">"Don't let anyone define you. You define yourself."</h1>

请注意，当您转为使用自己的网站时，您要么需要添加另一个 <link>标签指向你自己的 CSS 文件，或者在 <style> 中写你的 CSS标签。

希望这对您有所帮助!