为什么我的谷歌字体 CDN 链接不允许我更改字体粗细？答案

【问题标题】：Why won't my google font CDN link allow me to change font weights?为什么我的谷歌字体 CDN 链接不允许我更改字体粗细？
【发布时间】：2022-01-02 22:00:37
【问题描述】：

我通过 CDN 导入了一个 google font-weight (Raleway)，并在其中包含了多个权重。 CSS 拾取字体并正确更改我的文本，但所有字体都更改为 CDN 中的第一个权重。

这是我的 CDN：

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap" rel="stylesheet">

这是我的（非常简单的）CSS：

body {
    font-family: 'Raleway';
    font-weight: 900;
}

CSS 似乎完全忽略了我的 font-weight 属性，因为所有字体的权重都是 500（或者我首先在 CDN 中设置的任何权重。）

我完全迷失了，不知道出了什么问题。我检查了几个类似的问题，但都有一些小错误，比如导入错误的字体等等。

关于我做错了什么有什么想法吗？谢谢！

【问题讨论】：

标签： css fonts

【解决方案1】：

您是否尝试在您的 CSS 中添加 !important ？


body {
    font-family: 'Raleway';
    font-weight: 900 !important;
}

【讨论】：

是的，我有。字体粗细没有任何变化。

【解决方案2】：

我认为你必须对字体系列有第二个选择：

body {
  font-family: Raleway, sans-serif;
}

【讨论】：

【解决方案3】：

您所展示的效果非常好。
问题在于您的 HTML 页面中的 ELSEWHERE。

body {
  font-family: 'Raleway';
  font-weight: 900;
  font-size  : 64px;
  }
p.w500 {
  font-weight: 500;
  }

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap" rel="stylesheet">

<p class="w500"> hello world! 500 </p>

<p >  hello world! 900 </p>

【讨论】：

原来确实是别的东西；引导程序（？）。字体权重被覆盖，这可能是因为我的主 css 链接在引导 css 链接下方吗？
@SessionPHP 从这里不可能知道你的问题出在哪里。您必须使用浏览器的代码检查器（页面打开时键盘上的 F12 键）