19

我有一个使用 CSS3 的 @font-face 嵌入自定义字体的 Web 应用程序。到目前为止,这在 IE 和 Firefox 中完美运行。

然而,在 Chrome 中,自定义字体显得像素化且不流畅。下面是我在 Firefox & IE(顶部)和 Chrome(底部)中的字体示例的屏幕片段链接: 屏幕截图比较

在这么小的示例屏幕截图中可能很难看出差异,但是当这种情况发生在整个页面上时,它会非常明显。

下面是我如何在样式表中使用 @font-face 的示例:

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

可能值得一提的另一件事是,当我在虚拟机上运行的任何浏览器中打开该站点时,字体都非常不稳定,比 Chrome 示例差得多。当我使用所有运行 Win7 VMWare 桌面的学校计算机时,就会发生这种情况。当我从在朋友的 Mac 上运行的 Windows 7 VM 中提取站点时,也会发生这种情况。

4

7 回答 7

34

这是 Chrome 开发人员正在修复的一个已知问题:

http://code.google.com/p/chromium/issues/detail?id=137692

要解决此问题,请先尝试:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

如果这对您不起作用,则此解决方法对我有用(以上未修复 windows Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

它似乎重新排列了@font-face CSS 规则以允许 svg 出现“首先”解决了这个问题。

例子:

-before--------------

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


-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
于 2012-12-16T02:25:48.710 回答
3

不幸的是,所有浏览器都以不同的方式呈现字体。一个看起来不错的人可能在另一个人身上有麻烦。为 font-face 找到一个好的字体并不容易......如果你想要像素完美,你将不得不使用图像。

但并非全部丢失,这里有 20 种免费字体(甚至免费用于商业用途!)渲染得非常好(我总是最终检查这个列表):http ://speckyboy.com/2010/07/04/25-completely -free-fonts-perfect-for-fontface/

请记住,您不能托管付费字体,否则您将分发它们,您最终可能会遇到麻烦。

于 2012-05-16T21:55:26.463 回答
1

您可能想玩 optimizeLegibility:http ://aestheticallyloyal.com/public/optimize-legibility/

还有-webkit-font-smoothing: http: //maxvoltar.com/archive/-webkit-font-smoothing

使用 font-squirrel 字体生成器来生成 webfonts 和 css 以加载字体可能也值得: http ://www.fontsquirrel.com/fontface/generator (尽管我不确定这是否会解决您的问题或不是)

于 2012-05-16T21:58:01.790 回答
0

对我来说,效果最好:

@font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}
于 2013-11-05T21:35:40.240 回答
0

我建议使用这个:

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
于 2014-02-07T08:01:22.893 回答
0

尝试添加-webkit-transform: translateZ(1px); 或另一个 3d 变换。

解释:

Chrome 有另一个错误 - 应用 3d 转换时文本模糊,因此添加建议的属性将模糊切碎的文本并部分解决问题。它仍然有点模糊,但在许多情况下,它比切碎更好。

示例 1(问题):切碎的文本。我在这里添加了旋转以确保文本被切碎。
示例2(已解决):半平滑文本。应用 3d 变换会使文本变得模糊,因此切碎的文本看起来更平滑。

小问题是看起来我们不能在 CSS 中只针对 Windows 版本的 Chrome,所以我们必须使用 javascript 来应用适当的类。

于 2014-03-27T18:58:14.743 回答
0

这个问题将在 Chrome 37 中得到解决。

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html

于 2014-08-05T16:02:07.103 回答