Question

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

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

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

我尝试了几种方法让它发挥作用。 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 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;
}

Answer 1

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

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

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

Answer 2

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

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

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

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

@fontface无法正确安装

2 个答案: