@fontface 没有正确安装答案

【问题标题】：@fontface not installing correctly@fontface 没有正确安装
【发布时间】：2012-08-16 23:39:48
【问题描述】：

我刚刚带来了第一次使用的网络字体。我已经将它上传到我们的测试服务器，它可以在办公室的所有机器上运行，除了一台笔记本电脑。

在发现笔记本电脑无法正常工作后，我在 crossbrowsertesting.com 上跨所有平台进行了测试，发现它没有出现在任何平台上。

然后我上传了 mywebsfontkit 文件夹，其中包含如何将 webfont 安装到我的服务器的说明，并进行了另一次跨浏览器检查，发现字体开始在某些浏览器上工作，但是当我尝试将它放入我自己的页面时它失败了.

我已经尝试了几种方法来使它工作。 1 - 我将字体的完整 url 路径放入 - 没有发生任何事情 2 - 我已将 webfonts 放在我的服务器的根文件夹和根文件夹中 3 - 我尝试以不同的方式调用字体博物馆，即 font-family: 'Museo' 或 font-family: 'Museo-700'。

在我发布的示例中，您会看到对于导航，我将 museo 称为 museo-700，而现在在我的机器上调用 arial 而在标题中的文本上，我将 museo 称为 font-family: 'Museo '。我知道它不会在所有浏览器上工作的字体，但我不知道为什么它会在一个文件而不是另一个文件中工作。

我还添加到我的 .htaccess 文件中 AddType 字体/ttf .ttf AddType 字体/eot .eot AddType 字体/otf .otf AddType 字体/woff .woff

保存字体的样式表如下调用

  <link rel="stylesheet" type="text/css" href="css/type.css" />

具有字体的样式表

 @font-face {font-family: 'Museo-900';src: url('webfonts/23C024_0_0.eot');src: url('webfonts/23C024_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_0_0.woff') format('woff'),url('webfonts/23C024_0_0.ttf') format('truetype');}


 @font-face {font-family: 'Museo-700';src: url('webfonts/23C024_1_0.eot');src: url('webfonts/23C024_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_1_0.woff') format('woff'),url('webfonts/23C024_1_0.ttf') format('truetype');}


 @font-face {font-family: 'Museo-500';src: url('webfonts/23C024_2_0.eot');src: url('webfonts/23C024_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_2_0.woff') format('woff'),url('webfonts/23C024_2_0.ttf') format('truetype');}

以及我如何调用导航和标题的字体

    #nav ul li {
float: left;
position: relative;
color:#000;
font-family: 'Museo-700', Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}

    .title-900 {
font-family: 'Museo-900', Arial, sans-serif !important;
font-weight: normal;
font-size:18px;
line-height:20px;
color:#9BC255;
padding-bottom:10px;
}

【问题讨论】：

标签： css font-face

【解决方案1】：

在@font-face 部分中，您已将加载的字体称为Museo-900、Museo-700、Museo-500，并且您必须在常规指令中使用相同的字体系列，例如：

font-family: "Museo-900", Arial, sans-serif !important;

除此之外，我在您的沙盒中看不到任何其他可能导致此类问题的内容。

【讨论】：

谢谢，我也刚刚意识到我拼错了 Museo，所以这对我也没有帮助！
我已经更正了我调用 Museo 的方式，但我仍然遇到相同的问题，即当我跨多个浏览器进行测试时，没有一个与 Museo 一起出现。
@kas，我没有看到任何变化。您的type.css 文件中还有Museo-?00，bhc_retail.css 文件中还有font-family: 'Museo', ...。正如我所说，您必须使用相同的字体系列字符串才能使网络字体正常工作。
对此感到抱歉 - 我以为我已经覆盖了样式表，但它没有正确复制。我刚刚做了一个干净的上传并再次使用跨浏览器测试仪对其进行了测试，现在一切正常。非常感谢您的帮助。

【解决方案2】：

仅供日后阅读参考。以下是有助于解决此类问题的通用方法：

一个。首先检查您的 css 框架文件是否在您的自定义 css 文件之前加载。您的自定义 css 文件必须在框架/小部件 css 文件之后加载才能具有更高的优先级。

b.字体属性是一个可继承的 CSS 属性。这意味着如果您已将它应用于 body 标签，那么所有 html 元素都将从 body 标签继承它，前提是没有中间元素指定了不同的 font-family 属性值。确保您的 DOM 中不存在此类元素。此外，您的字体文件应该以 200 状态显示在网络选项卡中。

c。计算元素的字体族属性的特异性。有时，即使在下载新字体后，我们也没有得到预期的结果，因为我们的字体系列具有较低的特异性（优先级）。

【讨论】：