无法在 Google Fonts 上设置字体粗细

Question

这个问题已经被问过很多次了，但没有一个对我有用。例如：

• Google 字体字体粗细为 100 不起作用。 （我的系统中没有我想要使用的字体。）
• 为什么谷歌字体粗细不起作用？。 （我没有在标题中使用它，只是在常规段落中使用它。）

我将 Google Fonts 与

@import

一起使用，如下所示：

@import url('https://fonts.googleapis.com/css?family=Rubik');

body {
    font-family: 'Rubik', sans-serif;
}

字体出现了，但我无法对重量做任何事情。

<strong>

标签不会以粗体显示。 CSS 中的

font-weight

属性不起作用。甚至在浏览器的检查器中覆盖它也不会改变任何东西。

更新

这个东西似乎只适用于基于 Gecko 的浏览器，比如 Firefox。

Answer 1

答案是 Google 字体未经过校准以承载您想要的所有粗细。

某些浏览器可能会显示“较粗”或“较细”类型，但它们是在欺骗您。当没有该类型的实际粗细可用时，他们会将普通字体加倍以模拟您所要求的内容。那些这样做的人试图表现得友善，但如今这更多的是令人困惑而不是有帮助。根据您的代码片段，您有：

@import url('https://fonts.googleapis.com/css?family=Rubik');

对

@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');

（Google Fonts UI 2017 - 将来可能看起来有所不同，但任何字体服务的概念都是相同的）

许多字体只有 1 个粗细。

Answer 2

这是字体粗细所有可能名称的列表；

    Thin            100     
    Extra Light     200
    Light           300
    Regular         400
    Medium          500
    Semi-Bold       600
    Bold            700
    Black           900

Answer 3

即使我已经从谷歌正确复制了 HTML 代码并将其放入我的脑海中，我也遇到了使权重正常工作的问题。

解决方案：

我通过将

@import

函数添加到我的 CSS 中来使用它，现在一切正常。似乎 @import 更强大或者与 wp 主题冲突更少。

Answer 4

我也有同样的问题。 对我来说，问题是我的 bootstrap 链接放置在 html 中的 styles.css 链接之后，因此 bootstrap 覆盖了 h1 的样式。

解决方案只是将 styles.css 的链接放在我的 html 中 bootstrap 的链接后面。 :)

Answer 5

我遇到了同样的问题，直到我发现你无法更改正文的字体粗细。

您必须准确定位要更改权重的标签 例如。 检查这个代码

Answer 6

我遇到了同样的问题：我注意到当您在 css 文件中导入字体时会发生这种情况，例如：

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

所以为了解决这个问题，我只是从 html 文件中导入了所有字体粗细，然后像往常一样在 css 文件中使用字体粗细和字体系列：

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

这样做我就能解决我的问题。注意到你不能在 body 标签中指定字体粗细，但你必须在单个 html 标签中指定字体粗细，如 h1 h2 h3 p ecc

Answer 7

没有。您需要的字体粗细全部选择。这将如下所示：

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

现在您可以使用所有这些字体粗细。

Answer 8

简单的解决方案。

在谷歌字体网站上获取嵌入的 URL 之前，单击更改样式按钮并更改选项以包含所有字体粗细。

在此输入图片描述