css - @fontface 没有正确安装

Question

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

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

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

我已经尝试了几种方法让它发挥作用。1 - 我将字体的完整 url 路径放入 - 什么也没发生2 - 我已将 webfonts 放在根文件夹以及我服务器的根文件夹中3 - 我尝试以不同的方式调用字体 museo，即字体系列:'Museo' 或字体系列:'Museo-700'。

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

我还添加到我的 .htaccess 文件中添加类型字体/ttf .ttfAddType 字体/eot .eot添加类型字体/otf .otfAddType 字体/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;
}

Answer 1

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

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

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