如何在 HTML-CSS 上使用 google 字体 api 上的 2 种不同字体？

Question

所以我使用@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）。而且我不知道如何更改他们的字体。

非常感谢您的帮助。

Answer 1

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

这会起作用：

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

另外，经检查，你的Robotolink也坏了。它不包含 regular 字体和粗细 600 的字体。这使得整个 Roboto link 无效，这也阻止了第二个 font-family 加载。

简单的说：字体link后面的查询详情很重要。当你玩弄它们时，你必须确保它们指向现有的 features/resources。这就是 Google 为您提供准确 link 的原因。你应该 copy/paste 那 link.

这是 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。

如何在 HTML-CSS 上使用 google 字体 api 上的 2 种不同字体？

How do I use 2 different fonts on HTML-CSS with google font apis?

html

css

sass

fonts