logo标签列表

字体族未加载？

css
13

我有以下的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都正常工作...

能否在网站无法正常工作的地方添加一个链接？ - Bazzz
我现在正在本地开发环境中。它在JSFiddle上运行良好。http://jsfiddle.net/vFXZz/ - Mike Earley
那么你需要发布更多的代码，因为错误不在你的CSS中... 尝试使用@JohnPeter的解决方案，并确保没有其他“!important”-CSS-line覆盖了你在这里描述的CSS。 - algorhythm
或者创建一个 JSFiddle，在那里你遇到了同样的问题... - algorhythm
8个回答
9

所以，!important 起作用了，但我不确定原因。需要注意的是，我去掉了多余的样式集，现在看起来是这样的：

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

但是，改变这个并没有解决问题。使用!important 才能解决它。即使在CSS的其他地方没有任何内容更改字体族，（请参阅工作中的JS Fiddle）。我附上了开发者工具的截图以展示继承关系。
8
你尝试过选择以下选项吗？
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实现的功能： 使用font-face实现网页字体。
我尝试了但不是body，虽然这应该是不必要的... 但是 - 我现在刚刚尝试了一下，它没有起作用。再次提醒，上面的jsFiddle链接显示了代码，并且实际上在那里可以工作。 - Mike Earley
5

有些字体必须使用`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，除非我错过了什么？ - Mike Earley
是的，我认为Verdana是使用font-face的字体。 - Zlatko Soleniq
2
这是一篇旧帖子，但如果有人遇到类似的问题并来到这里，我建议您确保CSS文件中没有错误（检查最简单的方法是注释掉除字体系列之外的所有设置或用仅具有字体系列设置的CSS文件替换CSS文件）。 我刚刚遇到了同样的问题，并找到了原因，在经过数小时的挫败和从谷歌上找不到解决方案后（这就是我来到这个帖子的原因; 对我来说添加“important！”没有起作用），我的CSS文件中有一个错误，因此浏览器跳过了一些设置，包括字体系列。尽管原始帖子中显示的CSS文本没有错误，但实际的CSS文件中可能存在错误。
0
在我的经验中，我遇到了问题，因为我测试的页面上的按钮只有文本。

将按钮字体设置为继承解决了这个问题。我猜这可能也适用于其他元素。

body {
    font-family: <your family>;
}

button {
    font-family:inherit;
}
0

请尝试以下示例：

@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; }

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

我不需要额外的字体，也没有那些字体...我很好奇为什么这样做会起作用？ - Mike Earley
请参考以下位置以获得更多解释：http://caniuse.com/fontface 和 http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp。我之前已经提到了一个如何在CSS中使用字体的示例，但那不是针对你当前的CSS的。你需要利用它。 - John Peter
我在想是否存在误解，因为这个问题与字体格式无关，而且我知道如何实现字体格式。我正在尝试使用Verdana字体，我不需要使用font-face实现它。 - Mike Earley
0

可能是由于您使用的字体未安装在浏览器中（即使是一些“Web安全”字体）。尝试使用通用字体（如sans-serif，cursive，monospace）来查看您的样式声明是否有效。

0

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

在这种情况下，使用CTRL+F5进行“硬刷新”可能会有所帮助，建议参考此处和此处，以及Firefox文档中的说明。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接