Question

我使用FontSquirrel生成了@ font-face，并产生了这些（稍后调整）规则：

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot');
}

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

样式在css文件中应用如下：

h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }

Everithing在Chrome中运行良好，即使在InternetExplorer中也是如此，但在Firefox的较新版本中，字体无法加载。它加载到FF 3.6 ... o_O

我有另一种字体，Ubuntu，通过JavaScript选项从Google加载，并且即使在标题上，也可以加载

font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;

使FF忽略我的本地字体的声明有什么问题？

编辑：这不仅在本地主机上，它也发生在实际网站上。我已经查看了其他答案并尝试了它们，但没有运气。 WOFF甚至是base64编码，结果相同。

已解决：似乎.eot在单独的声明中（同样，FontSquirrel生成）正在造成伤害。与其他人一起移动解决了它。谢谢Boris Zbarsky！

@font-face {
    font-family: 'CabinSketchRoBold';
    src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
         url('cabinsketchro-boldwebfont.woff') format('woff'),
         local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
         url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

您的问题是您实际上是在定义“CabinSketchRoBold”字体的两个单独的面。

第一张脸是正常体重，并使用.eot文件作为字体数据。

第二张脸是大胆的重量，使用woff，truetype，svg中的任何一个，无论哪个可用。

然后你是造型正常重量的文字。因此挑选第一张脸。有关此规范，请参阅http://dev.w3.org/csswg/css3-fonts/#font-style-matching。

特别是，遵循该规范中的步骤，在步骤4中，我们最终得到一个面：.eot one。但由于浏览器无法对该字体格式执行任何操作，因此该面没有字形，因此在步骤5中，浏览器将移至下一个系列名称。根据规格，不考虑“CabinSketchRoBold”系列中的另一个（粗体）面。

所以结果是你应该在你的规则中列出font-weight: bold，或者两者都没有。然后.eot和其他选项都将被视为单个字体的源，而不是同一系列中的不同面。

看起来Chrome实际上并没有遵循这里的规范，不幸的是......

Answer 2

最新版本的Firefox能够在tools-＆gt; web developer-＆gt;错误控制台中显示与字体相关的错误。例如，这是我用自定义字体提供的错误：

Error: downloadable font: table 'GSUB': OpenType layout data discarded

Answer 3

您必须在IE，Firefox，Chrome

中使用此字体类型

    @font-face
{
    font-family: 'BHoma';
    src: url('/public/font/BHoma.eot?#')format('eot'), 
    url('/public/font/BHoma.ttf')format('truetype'),
    url('/public/font/BHoma.woff')format('woff'), 
    url('/public/font/BHoma.svg#BHoma')format('svg');
}

但首先必须从此链接生成字体

http://www.codeandmore.com/2011/06/font-face-kit-generator/

Firefox忽略FontSquirrel生成的@ font-face

3 个答案: