1

我用 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; }

在 Chrome 中一切正常，即使在 InternetExplorer 中，但在较新版本的 Firefox 中，字体不会加载。它在 FF 3.6 中加载... o_O

我有另一种字体，Ubuntu，通过 JavaScript 选项从谷歌加载，并且在更改后加载正常，即使在标题上

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

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

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

已解决：似乎 .eot 在单独的声明中（同样，FontSquirrel 生成）正在造成损害。与其他人一起移动它解决了它。谢谢鲍里斯·兹巴尔斯基！

@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;
}
4

3 回答 3

2

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

第一个面是正常粗细，并使用 .eot 文件作为字体数据。

第二张脸是粗体，使用 woff、truetype、svg 中的一种，以可用者为准。

然后，您正在为正常重量的文本设置样式。所以第一个面被选中。有关此规范，请参阅http://dev.w3.org/csswg/css3-fonts/#font-style-matching 。

特别是，按照该规范中的步骤，在第 4 步中，我们最终得到了一个面：.eot 面。但由于浏览器无法使用该字体格式执行任何操作，因此该面孔没有字形，因此在第 5 步中，浏览器会转到下一个姓氏。根据规范，不考虑“CabinSketchRoBold”系列中的另一个（粗体）面。

所以结果是你应该要么font-weight: bold在你的规则中列出，要么在任何一个都不列出。然后 .eot 和其他选项都将被视为单一字体的来源，而不是同一家族中的不同面孔。

不幸的是，看起来 Chrome 并没有真正遵循这里的规范……

于 2012-10-11T08:00:32.287 回答
2

最新版本的 Firefox 能够在 tools->web developer->errors 控制台中显示与字体相关的错误。例如，这是我使用自定义字体给出​​的错误：

Error: downloadable font: table 'GSUB': OpenType layout data discarded
于 2012-10-11T09:39:44.133 回答
1

您必须具有此字体类型才能在 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/

于 2012-10-10T13:58:21.420 回答