google-chrome - 在 Chrome 中,@font 面向自定义字体,字体不平滑

  显示原文与译文双语对照的内容
0 0

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

然而,使用 Chrome,自定义字体显示为像素像素且不平滑。 下面是指向 Firefox & IE ( 顶端) 和 Chrome ( 底部) 中的字体示例的屏幕Fragment的链接: 屏幕截图比较

它可能很难看到这样一个小样本的差异截图,但当这发生在页面是非常明显的。

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

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

值得一提的另一个可能是,当我打开这个网站在任何浏览器上运行虚拟机,字体是超级波涛汹涌的,比 Chrome 例子。 这是发生在我的学校使用任何电脑,这个主题是所有正在运行的虚拟桌面。 当我从一个Mac机上运行的一个 Windows 7 VM上调出站点时,它。

时间:原作者:8个回答

0 0

不幸的是,所有浏览器都以不同的方式呈现字体。 一个看起来很好的人在另一个可能有问题。 查找font-face的字体不是那么容易。 如果你想要像素完美,你必须使用图像。

但并不是全部丢失,这里是 20个免费的字体( 免费用于商业用途),它们可以很好地显示( 我总是检查这个列表): ! http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

记住,你不能托管付费字体,或者你会分发它们,你可能会遇到麻烦。

原作者:
0 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;
}
原作者:
0 0

我建议使用这个:

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
原作者:
0 0

尝试添加 -webkit-transform: translateZ(1px); 或者其他 3d 转换。

说明:

Chrome 还有另一个 Bug ——模糊文本当 3d 转换应用,所以添加建议属性将模糊切碎的文本和部分解决这个问题。 它仍然有点模糊,但在许多情况下,最好先切碎一个。

example1(issue): 切碎文本 。 我在这里添加了旋转以确保文本被截断。
example2(solved): semi-smooth文本 。 应用 3d 转换使文本变得模糊,所以剪切文本看起来更加平滑。

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

原作者:
0 0
原作者:
...