CSS 中 @font-face 的 Windows 字体渲染问题

Question

我在 Windows 计算机上使用 @font-face 时遇到了问题（不知道是什么浏览器）。它在 linux 和 osx 中运行良好。

这是我正在使用的 css 代码（使用 font-squirel 生成）

检查屏幕截图是否有问题.. 似乎有 2 个问题

• 在 Windows 上，字体是“跳舞”的。未在基线上对齐。
• 在 Windows 上，字体看起来没有消除锯齿。

有人有想法吗？提前致谢。

OSX 和 Linux 中的屏幕截图：

_{（来源：j3rn.org）}

Windows 中的屏幕截图：

_{（来源：j3rn.org）}

CSS 代码

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

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

Answer 1

几周前我遇到了同样的问题。我们将矢量图形存储在字体文件中，以避免实现单独的图像或 css sprite。一个简单的解决方法是使用例如 font squirrel

http://www.fontsquirrel.com/tools/webfont-generator

没有（！）优化选项，它会处理您的字体以针对网络优化它，如果它们不符合某些标准，有时会由于压缩尝试而破坏它。一个可能的缺点可能是，您的文件变得有点大。你也可以试试这个网络服务：

http://fontface.codeandmore.com/indexnew.php

希望这会有所帮助！

Answer 2

就抗锯齿而言，在渲染细文本时，窗口可能会非常难看。一个常见的技巧是尝试像这样应用文本笔划：

-webkit-text-stroke: 0.3px

就您的基线问题而言，这似乎是实际字体的问题。如果你不依附@font-face，我很偏爱Google Webfonts

您只需在标题中包含一个 css 链接，然后将相应的字体附加到 css 类。

Answer 3

在这里冒险，但我认为你上传了（非法？）一个预先构建的 Helvetica 替代品到 FontSquirrel.com 的“roll-your-own”@face-kit...tisk tisk。

您获得的结果对于 PC 在屏幕上呈现字体的方式非常典型。

FF Schulbuch Nord：创建于 1991 年（如果您想从 fontshop.com 购买，则需要 239 美元）。 http://www.fontshop.com/fonts/singles/fontfont/ff_schulbuch_nord_ot_regular/&s=c

fontsquirrel 上的 TexGyre 是 Helvetica 的一个相当公平（虽然不那么漂亮）的替代品，它在 PC、Mac 等设备上看起来不错。

Answer 4

我们的一些字体也有类似的问题，我很确定是什么解决了将“Truetype Hinting”设置为“Keep existing”的问题。