3

我在我的网站上使用网络字体 Bitter。最初我从 Google Web Fonts 中嵌入了它，但 Google 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

4

1 回答 1

0

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

这里要学习的一课：在开始开发之前，在所有操作系统上的所有浏览器上测试所有大小的网络字体。

于 2012-09-12T14:14:55.137 回答