如何在带有谷歌字体 API 的 HTML-CSS 上使用 2 种不同的字体？答案

【问题标题】：How do I use 2 different fonts on HTML-CSS with google font apis?如何在带有谷歌字体 API 的 HTML-CSS 上使用 2 种不同的字体？
【发布时间】：2022-01-29 23:30:28
【问题描述】：

所以我使用 @import 在我的 CSS 文件中导入了 2 种字体（Roboto 和 Shrikhand）我希望页面中的文本（段落<p>）使用 Roboto，我的标题（标题<h1>, <h2>...<h6>）使用 Shrikhand

这是我的 CSS 代码

/*Roboto font importation for text*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,600;1,700");

/*Shrikhand font importation for titles*/
@import url("https://fonts.googleapis.com/css2?family=Shrikhand:ital,wght@0,600;1,700");

body{
    box-sizing: border-box;
    margin: 0;
    font-family: 'Roboto', 'Shrikhand';
}

.main__heading{
 font-family: 'Shrikhand';
}

.main__text{
 font-family: 'Roboto';
}

但只有文本是 Roboto，标题是默认字体（Times new roman）。而且我不知道该怎么做才能改变他们的字体。

我们将不胜感激。

【问题讨论】：

我们可以看到 HTML.. 那里的类名正确吗？
您的两个导入链接都已损坏（有关详细信息，请参阅我的答案），这意味着到目前为止，您还没有从谷歌导入任何字体。另请注意，损坏的谷歌字体导入也会影响后续字体。

标签： html css sass fonts

【解决方案1】：

你Shrikhand@import URL 已损坏。看来您只是更改了姓氏并希望它起作用。但是，只有具有完全相同的字体粗细和字体面的字体才能满足这种期望，而 Roboto 和 Shrikhand 则不然。

这将起作用：

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');

此外，经过检查，您的 Roboto 链接也已损坏。它不包含regular 字体和600 粗细的字体。这使得整个Roboto 链接无效，这也阻止了第二个字体系列的加载。

简单地说：字体链接后的查询细节相当重要。当您使用它们时，您必须确保它们指向现有的功能/资源。这就是 Google 为您提供确切链接的原因。您应该复制/粘贴该链接。

这是 Roboto 700、italic + regular 的正确导入：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700&display=swap');

如果你想要600 regular：运气不好，它不存在。你可能想试试500 regular。

您也可以将您的字体导入合并为一个：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700&family=Shrikhand&display=swap');

看到它工作here。

【讨论】：