windows-10 - CSS：如何将样式表链接从 fonts.google.com 转换为我的 file.css （从外部到内部？

Question

我有来自 fonts.google.com 的这 2 个选项副本

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap');
</style>

我想保留这个字体，还要复制到我的file.css中以便制作一个类，比如这个？

.doneazab {font-family: sans-serif;color: #343434;}

那么，我怎样才能将那个谷歌字体样式链接转换成一个类呢？

标签： windows-10fontshtmlcss

Answer 1

您需要设置font-family，如下所示：

.doneazab {
  font-family: "Source Sans Pro", sans-serif;
  color: #343434;
}

如果您访问从 Google Fonts 加载的 URL，您会看到它是一个带有@font-face声明的 CSS 文件。所有这些声明都将font-family名称定义为Source Sans Pro，这使您可以在 CSS 的其他地方引用该名称。

这也显示在Google Fontslink的其他代码片段下方或上，例如：@import