logo标签列表

如何在Windows上使用CSS 3更平滑地呈现细字体？

htmlcssfontsrendering
47

我在Adobe Flash Pro CS6中设计网站时，字体看起来是这样的：

在Adobe Flash Pro CS6中呈现的字体

字体看起来很平滑、略微粗一些，但当我创建HTML和CSS以在浏览器中呈现字体时，分别在IE、Firefox和Chrome中出现了如下效果。

在IE、Firefox和Chrome浏览器中呈现的字体

它在某些区域中显得更薄，并且像素化。我曾经在OS X上看到过更加平滑的字体呈现。如何使字体在这些浏览器中显得更加平滑？我认为这是一个ClearType的问题，对于像这样的细字体，它看起来很难看。

这是我用来测试的代码，所以答案在发布之前可以进行测试：

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>
1
ClearType是微软的子像素渲染技术名称，它使您的字体在Firefox和Chrome上看起来“彩色”，除非您通过CSS进行修复（顺便说一句，我一直很讨厌子像素渲染，因为它是那些理论上好但实际上行不通的想法之一）。 - Walter Tross
在我看来，CS6中的渲染与浏览器中的渲染之间的差异似乎源于不同的伽马(ɣ)值或者是浏览器中额外应用了透明度到平滑处理上（即灰色像素也部分透明）。 - Walter Tross
最新信息：我的Ubuntu 12.04上的Firefox和Chrome在字体渲染方面介于您所说的极端之间，可能更接近于CS6（它具有特别平滑的渲染效果），而不是您的浏览器 - 而且没有着色（但这可能是因为我在全局某个地方禁用了它）。 - Walter Tross
你尝试过在其他机器上查看测试页面吗？我不确定，但字体的呈现可能取决于图形硬件和固件，以及设置。 - Walter Tross
我会尝试一下。毕竟，除非我禁用硬件渲染，否则我的笔记本电脑在IE中无法正确呈现东西...直到现在我甚至都没有想到这个。 - Phoenix Logan
我必须更正上面的评论：“灰色像素也是部分透明的”应该是“部分透明的像素也是灰色的（部分白色的）”。但这只是视觉效果。原因很可能在渲染算法中，它试图以准确性为代价传达清晰度印象。CS6似乎有完全不同的方法：它看起来像是用正确的卷积函数（理论上是sinc函数）模糊了清晰的矢量图像，并且采样时考虑了正确的伽马值。结果是模糊的但是完美的。 - Walter Tross
10个回答
81

在不同的浏览器或操作系统中，网站看起来永远不会完全相同，因为它们使用不同的技术等等。

这是你真的不需要关心的事情。使用IE的人不会改用Firefox或Chrome，反之亦然。他们已经习惯了字体的外观，并不会注意到这一点。

浏览器的不一致性是前端开发人员必须面对的问题（遗憾的是）。如果它们全部看起来都很好，那就太棒了，但这是不可能的。

你可以尝试一些方法，但可能需要针对不同的浏览器使用不同的修复措施：

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

编辑1: DirectWrite现已在Windows版Chrome上启用，这将有助于改善渲染效果。

编辑2（2017年）：系统UI字体

另一个可以尝试的方法是使用系统字体来提高用户体验。

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

阅读 - smashingmagazine
阅读 - booking.com
阅读 - medium

9
人们可能不注意细节，但这并不意味着细节不会影响他们的视力疲劳感或者给页面带来一种模糊的、不够精细或专业的感觉，尽管无法准确说明原因。如果这些细节不会对性能、可维护性或最佳实践产生重大影响，我认为在这些不是所有人都会有意识注意到的细节上花费一点时间仍然值得投资。 - Erik Reppen
是的，@ErikReppen，我也不太喜欢最初的语气。试着有一个注意到差异的客户；这变得很重要。特别是因为这不仅仅是“两者看起来不一样”的简单问题，而是“一个字体看起来像垃圾”。关于解决方案，但是，text-rendering和-webkit-font-smoothing在任何版本的IE上都不可用吗？https://caniuse.com/#search=-webkit-font-smoothing - UnsettlingTrend
在提到的“系统字体”中，只有大约一半是通常安装的系统字体，其余的是网络字体，除非你特意安装了它们，否则它们可能并没有被安装。 - scott8035
@scott8035 它们实际上被使用了。Firefox 使用 Fira Sans。 - brandito
8
我发现在Google Chrome中，您可以添加-webkit-text-stroke来改善字体的外观。
例如：
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
-- 请注意，此答案是2014年的，今天可能不是一个好的解决方案。
对不起，我需要一个通用的答案……至少适用于IE、Firefox、Chrome和Safari。 - Phoenix Logan
基本上这是一种伪加粗效果。 - user3108698
1
为了在Chrome中获得最佳效果，请使用实心描边，并使用与字体相同的颜色。例如，如果您的文本是黑色，请使用：-webkit-text-stroke: .025em rgba(0,0,0,1); - user3108698
如果你正在寻找Chromium的解决方案，那么这确实是最好的解决方案。这真的可以改善Atom中字体的外观，-webkit-text-stroke: 0.025em;非常不错。 - xdevs23
6

text-rendering: optimizeLegibility会对字体进行字距调整，这 可能会 提高可读性，但前提是显示器和字体大小的分辨率足够高。如果字体本身太细，则不会使其加粗。

问题可能在于字体系列中存在一个或多个比正常字体（font-weight: 400）更轻的字形，比如Google的Lato字体。

如果您像这样加载所有Lato字体的轻到普通字形：

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

我发现大部分Windows浏览器和Chrome OSX在你指定小于400的字体重量时使用font-weight:100。将font-weight更改为200或300并没有呈现出不同的效果，尽管检查工具坚持认为计算机正在显示字体重量，例如font-weight:200。但实际上并没有。
移除较轻的字体重量（我的情况下是100）会解决问题，并且至少可以让我使用font-weight:200等。虽然跨浏览器的渲染并不完全相同，但至少相似。
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

当然，这并没有解决无法按照规定访问轻字重量的实际问题。
5

据我所知，针对这个问题并没有单一的解决方法。需要为每个浏览器分别实施多个修复措施，但 IE 浏览器除外。可以尝试以下方法：

对于使用 Webkit 引擎的 Chrome 和其他浏览器：

-webkit-font-smoothing:antialiased !important;

把它放在你的html CSS中，或者适用于你发现的任何元素。你也可以与上述内容一起添加：
text-shadow:1px 1px 1px rgba(0,0,0,0.005);

尝试不同的alpha值，但应保持阴影大小不变。

我不知道还有什么其他方法可以做，但这至少可以解决Chrome（以及其他Webkit浏览器）的最大问题。

这两个似乎在Chrome中都没有任何不同的作用。即使它起作用了，我的网站也不能只限于Chrome。 - Phoenix Logan
明白了。重点是要解决最严重的问题，这样整体问题就不会那么糟糕了。至于它是否没有任何区别，请确保按下ctrl+F5以清除缓存？这也适用于Ryan的答案。有时候你在CSS中看不到变化，直到你这样做为止。 - Hiigaran
不，它看起来仍然和以前一样。 - Phoenix Logan
嗯，恐怕我没有其他的建议了。在这个网站上进行一些搜索可以确认你可以尝试的东西不多：https://dev59.com/fWMm5IYBdhLWcg3wG8HA - Hiigaran
像许多与字体相关的设置一样，它继承自body标签。如果您想要所有字体都进行反锯齿处理，只需将其放在那里即可。我不知道在昨天的移动Web视图类型情况下执行此操作可能会产生什么渲染性能影响，但对于旨在用于信息亭类型场景的node-webkit应用程序而言，它非常有效。 - Erik Reppen
4

我在所有的网站上都使用这个方法，它可以解决大部分字体呈现问题。

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
4
我最近遇到了一个类似的问题，相同的字体族和大小在Chrome、Safari和Firefox上看起来不同。Chrome和Firefox看起来特别粗。这可能不是最好的方法，但对我有用。
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

另外，检查不同的渲染引擎也是值得的。 CSS中-moz-和-webkit-是什么？
2

我认为这更是一个Windows问题，而不是浏览器问题。同样的浏览器在其他操作系统（如Linux或Mac）上呈现相同字体时更加平滑。

在Chrome中，以及任何基于Webkit的浏览器中，您可以使用以下代码来平滑字体：

-webkit-font-smoothing: antialiased;

或者

-webkit-font-smoothing: antialiased !important;

通常情况下，我发现这样做不会有太大的作用。我认为我们只能等待微软采取行动。

“可以使用以下代码为您的字体添加抗锯齿效果”是不正确的：antialiased只会从默认设置中去除子像素部分，而默认设置是在未启用antialiased时使用subpixel-antialiased。子像素部分是导致边缘出现颜色的部分。 - Walter Tross
1
您可以使用CSS属性"text-rendering"来解决此问题。
例如：
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

您可能希望使用text-rendering: optimizeLegibility。

更多信息请参见：MDN文本呈现

1
我尝试了 text-rendering:optimizeLegibility，但在IE、Firefox和Chrome中仍然得到了与之前相同的结果。 - Phoenix Logan
不幸的是，浏览器似乎没有正确实现这个属性，尽管它会非常有用，而MDN上的文档表示它应该可以工作。 - Matmarbon
0

虽然已经很晚了，但你是否曾尝试过提示字体文件呢？前往Transfonter网站并上传你的字体文件。然后在选项区域勾选自动提示选项。

0

我要先说明一下，这是一个hack，我不喜欢它，但它能用

transform: rotate(-0.0002deg)

它使字体明显更加平滑，尽管略微变薄

这是一个粗暴的解决方案。transform会干扰堆叠上下文。如果你需要关注重叠元素和z-index，将其应用于网站上的所有文本将给你带来巨大的头痛。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接