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

Question

我尝试切换到@font-face而不是依赖用户安装字体（确切地说是Terminus字体，而不是TTF版本）

不幸的是，我遇到了一些奇怪的＆＃34;咆哮＆＃34;或＆＃34;失真＆＃34;处理远程托管文件时的字体，如下图所示：

正如您所看到的，由于某种原因，远程提取的字体在12,14,16,18,20,24种情况下会扭曲，因此本地字体具有某种＆＃34;标准化＆＃34;适用于那些使它们看起来漂亮和就地的部件。

另外需要提及的是，我试图使用FontSquirrel's WebFont Generator分别在这些CSS代码中显示屏幕截图的demo-htmls：

@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)');
}

终端（TTF）是同一个文件包，只安装到/usr/share/fonts/。

非常感谢任何见解！

编辑：更改FontSquirrel高级选项似乎根本无法解决此问题。

EDIT2 ：我尝试使用Firefox的所有方法都没有。此外，我已将字体复制到工作目录（与本地使用的相同），通过＆＃34; url＆＃34;领域，它仍然保持扭曲。这是徒劳的！

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');

他们使用包含所有这些扩展名的字体包，似乎无法在网站上找到它。

Answer 2

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

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

Answer 3

实际上TTF只接受mozila，有很多字体类型，如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;
}

我想，这会对你有帮助。

Answer 4

我正在添加这个作为答案，因为我没有足够的评论点。 但这是一个问题： 你在本地安装了Terminus吗？如果是这样，请尝试卸载它，看看你得到了什么。

道歉评论作为答案...

Answer 5

只需尝试使用Google WebFonts，而不是添加所有CSS代码以及使其在多个浏览器中运行所需的所有文件。 http://www.google.com/webfonts