字体系列没有加载？答案

【问题标题】：font-family not loading?字体系列没有加载？
【发布时间】：2026-02-24 13:55:02
【问题描述】：

我有以下 CSS 声明：

body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

它没有加载到页面上。我必须补充：

    <style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>

到 HTML 让它工作......这在 chrome 和 safari 中是正确的......这很奇怪，你想吗？

请注意，所有其他 CSS 都可以正常工作...

【问题讨论】：

是否可以添加一个链接到它不工作的网站？
我现在在我的本地开发环境中。它在 JSFiddle 中工作。 jsfiddle.net/vFXZz
那么您必须发布更多代码，因为错误不在您的 CSS 中...尝试使用 @JohnPeter 的解决方案与 !important 并确保没有其他 !important-CSS-line 被覆盖您在此处描述的 CSS。
或者在遇到同样问题的地方创建一个 JSFiddle...

标签： css

【解决方案1】：

您是否尝试过选择以下？

body, body * {
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */

/* OR just */
* {
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */

您可以使用 CSS3 执行以下操作： http://www.css3.info/preview/web-fonts-with-font-face/

【讨论】：

我试过 * 但不是 body *，虽然它不应该是必要的......但是 - 我现在才尝试过，但它没有工作。同样，上面的 jsFiddle 链接显示了代码，它实际上在那里工作。

【解决方案2】：

所以，!important 起作用了，我不知道为什么。一张便条，我把多余的家庭拿出来了，现在是这样的：

body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}

但改变它与修复它无关。 !important 修复了它。即使在 CSS 中的任何其他位置没有任何其他更改字体系列（请参阅工作中的 JS Fiddle）。我附上了开发者工具的截图来展示继承。

【讨论】：

【解决方案3】：

一些字体家族必须使用`font-face来启用，通常你会做这样的事情

@font-face {
    font-family: 'alex_brushregular';
    src: url('alexbrush-regular-otf-webfont.eot');
    src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
         url('alexbrush-regular-otf-webfont.woff') format('woff'),
         url('alexbrush-regular-otf-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body {

font-family: 'alex_brushregular', Arial, "sans-serif";

}

【讨论】：

酷，有道理，但我不应该使用 @font-face 启用 Verdana，除非我错过了什么？
是的，我认为 verdana 与 font-face

【解决方案4】：

这是一篇旧帖子，但如果人们遇到同样的问题并最终出现在这里，我建议您确保您的 css 文件中没有错误（最简单的检查方法是注释掉除字体系列或将 css 文件替换为仅具有字体系列设置的文件）。我只是遇到了同样的问题并找到了原因，经过数小时的挫折和谷歌搜索没有解决方案（这就是我来这篇文章的原因；添加重要！对我不起作用），是我的 css 文件中的一个错误，所以浏览器跳过了一些设置，包括字体系列。虽然原帖中显示的 css 文本没有错误，但真正的 css 文件中可能存在错误。

【讨论】：

【解决方案5】：

试试下面的例子：

@font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
@font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}


body { font-family: Arvo; }

(or)

body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }

我认为这可以帮助您解决问题。

【讨论】：

我不需要额外的字体，目前我也没有那些字体……我很好奇为什么这样做会起作用？
请参阅以下位置以供您澄清：caniuse.com/fontface 和w3schools.com/cssref/css3_pr_font-face_rule.asp 我上面也说过一个示例如何在 css 中使用字体，而不是针对您当前的 css。你需要利用它。
我想知道是否有误解，因为这个问题与font-face无关，我知道如何实现font-face。我正在尝试使用 Verdana，我不需要为此使用 font-face。

【解决方案6】：

如果您的浏览器正在使用您的 CSS 文件的缓存版本，也会发生这种情况。

如建议的那样，使用 CTRL+F5 的“硬刷新”可能会有所帮助，例如here 和 here，例如在Firefox docs。

【讨论】：