logo标签列表

@font-face用于自定义字体，在Chrome中字体不流畅

google-chromecssfontsfont-face
19

我的Web应用程序使用CSS3的@font-face来嵌入自定义字体。到目前为止，在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虚拟机中打开网站时也会发生这种情况。

我写了一篇详细的博客文章，包括修复方法：如何解决Google Chrome中丑陋的字体渲染问题，这个问题也在这里被问到过：https://dev59.com/EWgu5IYBdhLWcg3wOUkk。 - Sliq
7个回答
35

这是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;
}
3
很遗憾，所有浏览器渲染字体的方式都不同。在一个浏览器中看起来还不错的字体，在另一个浏览器中可能会出现问题。如果你想要像素级别的完美效果，你将不得不使用图像。但并非一无所获，以下是20种免费字体（即使用于商业用途也免费！）它们渲染效果相当不错（我总是喜欢查看这个列表）：http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/。请记住，你不能托管付费字体，否则你将进行分发，可能会陷入麻烦。
很不幸，我无法控制所使用的字体。客户有自己的字体，我必须使用它们。 - Danny
如果可读性技巧不起作用，你将不得不向客户解释并告知，并非所有字体都适用于网络。 - Yisela
请参考下面 @Evan 的答案 - 在 Windows 上的 Chrome 25 中对我有效。 - GrahamMc
1
1
对我而言，最好的方式是：
@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

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

解释：

Chrome存在另一个问题 - 当应用3D变换时，文本会变得模糊，因此添加建议的属性将使裁剪的文本变得模糊，并部分解决该问题。它仍然有点模糊，但在许多情况下比裁剪的文本更好。

示例1（问题）：裁剪的文本。我已经添加了旋转来确保文本被裁剪。
示例2（已解决）：半平滑文本。应用3D变换使文本变得模糊，因此裁剪的文本看起来更加平滑。

小问题是似乎我们无法在CSS中仅针对Windows版本的Chrome进行定位，因此我们必须使用JavaScript来应用适当的类。

0
0
我建议使用这个：
-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接