Question

我在我的网站上使用网络字体Bitter。最初我是从谷歌网络字体嵌入它，但谷歌Chrome / Win没有正确渲染.woff（它有较小尺寸的怪异锯齿状工件）。谷歌搜索后，我发现Chrome / win通常在使用该格式时遇到问题，使用SVG可以解决问题。这意味着我必须自己托管/嵌入文件，而不是使用Google Web Fonts。我使用Font Squirrel来获得正确的@ font-face代码，直到我在Windows上的IE9 / Firefox中测试之前，一切似乎都很好。两种浏览器都使大写字母T小于大写字母的其余部分（如http://d.pr/i/LIty）

这是我的字体代码

@font-face {
    font-family: 'bitter';
    src: url('fonts/bitter-regular-webfont.eot');
    src: url('fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-regular-webfont.svg#bitterregular') format('svg'),
         url('fonts/bitter-regular-webfont.ttf') format('truetype'),
         url('fonts/bitter-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bitter';
    src: url('fonts/bitter-bold-webfont.eot');
    src: url('fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-bold-webfont.svg#bitterbold') format('svg'),
         url('fonts/bitter-bold-webfont.ttf') format('truetype'),
         url('fonts/bitter-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bitter';
    src: url('fonts/bitter-italic-webfont.eot');
    src: url('fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-italic-webfont.svg#bitteritalic') format('svg'),
         url('fonts/bitter-italic-webfont.ttf') format('truetype'),
         url('fonts/bitter-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

我如何理解这种嵌入，浏览器使用他们可以接受的第一种文件格式，然后忽略其余的？如果我正确记住浏览器兼容性，那意味着IE正在使用EOT，Chrome正在使用SVG，而Firefox正在使用TTF。所以起初看起来实际文件出现问题，但Firefox在Mac上渲染字体就好了。

您可以在http://dev.thesmackpack.com看到它。我可以做些什么来修复字体文件，或者让它们使用正确的格式，还是什么？

编辑：我从原始创建者下载了该字体的副本，并通过Font Squirrel生成器运行，取消选中修改该文件的所有选项。 T是固定的，但现在坏的渲染工件出现在FF和IE中。 http://d.pr/i/5sVT

Answer 1

可悲的是，我无法找到解决这个问题的充分办法。我切换回Google Web Fonts版本（带有锯齿状工件但没有破碎的字母大小）并更改了字体大小以最小化工件（它们在特定尺寸上更糟）。它仍然不是很好，但它是我能做的最好的。

这里要学到的经验教训：在开始开发之前，在所有操作系统上的所有浏览器上测试所有大小的Web字体。

Firefox和IE9在Windows上渲染字体不正确

1 个答案: