0

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

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

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

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

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

我还添加到我的 .htaccess 文件 AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/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;
}
4

2 回答 2

0

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

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

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

于 2012-08-16T23:51:27.557 回答
0

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

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

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

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

于 2016-01-13T18:54:56.467 回答