8

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

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

在此处输入图像描述

正如你所看到的，由于某种原因，远程获取的字体在 12、14、16、18、20、24 的大小上被扭曲了，而本地字体对它们应用了某种“规范化”，使它们看起来很漂亮和 in-地方。

另一件要提的事情是，我尝试使用FontSquirrel 的 WebFont Generator，其中 demo-htmls 屏幕截图分别沿着这些 CSS 代码显示：

@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 高级选项似乎根本无法解决这个问题。

EDIT2：我尝试过的所有方法都没有在 Firefox 上工作。此外，我已将一种字体复制到工作目录（与本地使用的相同），通过“url”字段链接它，它仍然保持扭曲。这是徒劳的！

4

5 回答 5

1

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

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
于 2013-11-08T17:28:31.253 回答
1

font-squirrel used to have a section with multiple outputs. TTF doesn't work in all versions of browers

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

they use to have font packs with all these extensions, cant seem to find it on the site anymore.

于 2013-03-13T20:33:57.063 回答
0

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

道歉作为答案发表评论......

于 2013-03-15T15:29:13.543 回答
0

其实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;
}

我想，这会对你有所帮助。

于 2013-03-15T14:15:33.750 回答
-1

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

于 2013-03-15T17:02:47.023 回答