@font-face远程字体模糊/加粗/扭曲的字形

Question

我正在尝试使用@font-face来替代依赖于用户安装字体（确切地说是Terminus字体，而不是它的TTF版本）。

不幸的是，当处理远程托管文件时，我遇到了一些奇怪的字体“加粗”或“扭曲”，如下图所示：

正如您所看到的那样，由于某种原因，在字体大小为12、14、16、18、20和24时，远程获取的字体会出现扭曲，而本地字体在这些部分上应用了某种“归一化”处理，使它们看起来漂亮而且合适。另外要提到的是，我尝试使用FontSquirrel的WebFont Generator，它在这些CSS代码上展示了演示HTML的截图。

@font-face {
   font-family: 'terminus_ttfmedium';
   src: url('terminusmedium-4.38-webfont.ttf') format('truetype');
}

并且

@font-face {
   font-family: 'terminus_ttfmedium';
   src: local('Terminus (TTF)');
}

Terminus (TTF) 是相同的文件包，只是安装到了 /usr/share/fonts/。

任何见解都将不胜感激！

编辑：更改 FontSquirrel 的高级选项似乎无法解决这个问题。

编辑2：我尝试过的所有方法在 Firefox 上都无效。此外，我已将字体复制到工作目录（本地使用的相同目录），通过“url”字段链接，但仍然存在失真。这是徒劳的！

- User2121315

---

尝试复制但未成功。我也在本地Apache服务器上尝试过。您是否在Fiddle中看到了相同的效果，或者您知道为什么无法重现您所看到的内容？这是Fiddle如何显示给我的。 - jamesplease

@jmeas：不，是Arch Linux。 - User2121315

众所周知，操作系统会以不同的方式显示字体，因此虽然这是一个奇怪的情况（因为它是从不同的来源获取相同的字体），但可能是你的Arch Linux在这里出了问题。但我不能确定！ - jamesplease

这不是像这里所述的提示问题吗：http://stackoverflow.com/questions/9369723/font-face-on-chrome-16-in-windows-7-looks-like-something-ate-parts-of-it - user18428

你的 CSS 中是否明确设置了 font-weight: normal？我曾遇到过浏览器尝试猜测字体重量而导致字体失真和模糊的问题。虽然我认为这里不是这种情况，但还是想提一下。 - gmartellino

Answer 1

Font Squirrel曾经有一个多输出的部分。TTF在某些浏览器版本中无法正常工作。

     src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
     url('Bevan-webfont.woff') format('woff'),
     url('Bevan-webfont.ttf') format('truetype'),
     url('Bevan-webfont.svg#BevanRegular') format('svg');

他们曾经有包含所有这些扩展的字体包，但似乎在网站上找不到了。

- Dnaso

Answer 2

我发现在元素渲染模糊时包含以下内容是有帮助的。

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

- bryanc75

Answer 3

我把这个作为回答添加了进来，因为我没有足够的积分来进行评论。 但这是一个问题： 你本地安装了Terminus吗？如果是的话，请尝试卸载它并查看结果。

抱歉以回答的形式进行评论...

- mike

Answer 4

实际上，TTF 只接受 Mozilla，有许多字体类型，如 TTF、SVG、WOFF、EOT。您必须使用所有字体文件。这里有一个很棒的工具可以生成字体。

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

这里有一个例子：

@font-face {
    font-family: 'YourFontName';
    src: url('gershwinscript.eot');
    src: url('gershwinscript.eot?#iefix') format('embedded-opentype'),
         url('gershwinscript.woff') format('woff'),
         url('gershwinscript.ttf') format('truetype'),
         url('gershwinscript.svg#gershwin_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我认为这会对你有所帮助。

- Sandeep Pattanaik

---

TTF 只接受 Mozilla 吗？你确定吗？因为我的 TTF 能够被 IE 正常读取，而 Mozilla 更喜欢 WOFF（以及 Opera SVG）。 - user18428

我同意这个答案，你需要将所有文件类型都放在本地才能跨浏览器工作，所以请记住这一点。虽然这并没有回答你的问题，但确实是非常有用的信息。 - Xarcell

感谢 @Xarcell 同意我的答案。 - Sandeep Pattanaik

@user1654209 请使用所有的字体文件，朋友。 - Sandeep Pattanaik

@SandeepPattanaik，我对你的说法“实际上TTF只接受mozila”进行了评论。这是错误的。至于其余部分，使用多文件类型声明是一个众所周知的良好实践。 - user18428

Answer 5

不要再添加所有那些CSS代码和所有需要让它在多个浏览器上工作的文件了，只需尝试使用Google WebFonts。http://www.google.com/webfonts

- Xarcell