如何在 Windows 上的 CSS 3 中更流畅地渲染细字体？

Posted 2023-02-22

技术标签:

【中文标题】如何在 Windows 上的 CSS 3 中更流畅地渲染细字体？【英文标题】：How to render thin fonts more smoothly in CSS 3 on Windows? 【发布时间】：2014-05-11 06:12:05 【问题描述】：

当我在 Adobe Flash Pro CS6 中设计我的网站时，字体如下所示：

字体看起来平滑且略粗，当我创建 html 和 CSS 以在浏览器中呈现字体时，它分别在 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>

【问题讨论】：

ClearType 只是微软的亚像素渲染名称，它使您的字体在 Firefox 和 Chrome 上显示为“彩色”，除非您通过 CSS 修复它（顺便说一句，我一直讨厌亚像素渲染，这是那些仅在理论上而非实践中好的想法之一）在我看来，CS6 和浏览器中的渲染之间的差异看起来像是源于不同的gamma (ɣ) 或除了平滑之外（在浏览器中）应用的透明度（即，灰色像素也是部分透明的）最新信息：我的 Ubuntu 12.04 上的 Firefox 和 Chrome 渲染字体介于你的极端之间，可能比你的浏览器更接近 CS6（渲染特别平滑） - 并且没有着色（但是也许那是因为我在某个地方全局禁用了它）。你试过在其他机器上查看你的测试页吗？我不确定，但字体的渲染可能取决于图形硬件和固件，以及设置。我会试试的。毕竟，除非我禁用硬件渲染，否则我的笔记本电脑无法在 IE 中正确渲染内容……直到现在我才想到。 【参考方案1】：

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

这是您不应该真正关心的事情。使用 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;

Readup - smashingmagazineReadup - booking.comReadup - medium

【讨论】：

人们不会注意到细节，但这并不意味着他们不会受到眼睛疲劳的影响，或者只是模糊的感觉页面看起来不那么精心制作或不专业能够准确地确定。如果在性能、可维护性或最佳实践方面没有付出沉重的代价，那么在不是每个人都会有意识地注意到的细节上投入一点时间仍然值得 IMO。是的，@ErikReppen，我也不太在意这个最初的语气。尝试让客户注意到差异；它变得很重要。尤其是因为这不是“两种字体看起来不一样”这样简单的问题，而是“一种字体看起来像垃圾”。不过，关于解决方案，文本渲染和 -webkit-font-smoothing 在任何版本的 IE 上都不可用吗？caniuse.com/#search=-webkit-font-smoothing 在提到的“系统字体”中，只有大约一半是通常安装的系统字体，其余的是可能不安装的网络字体，除非你特意去安装这样做。 @scott8035 实际使用过。 Firefox 使用 Fira Sans【参考方案2】：

我发现在谷歌浏览器中你可以添加 -webkit-text-stoke 来改善字体的外观。

例如：

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

【讨论】：

对不起。我需要一个通用的答案……至少对于 IE、Firefox、Chrome 和 Safari。基本上这是一个人造粗体效果。为了在 chrome 中获得最佳效果，请使用实心笔触并使用与字体相同的颜色。例如，如果您的文本是黑色的，请使用：-webkit-text-stroke: .025em rgba(0,0,0,1); 如果您正在寻找 Chromium 的解决方案，这确实是最好的解决方案。这确实改善了 Atom 中字体的外观，-webkit-text-stroke: 0.025em; 很好。【参考方案3】：

text-rendering：optimizeLegibility 将字距应用于字体，可以提高可读性，但前提是显示器的分辨率和字体大小足够高。如果之前太细，它不会使字体更粗。

这里的问题可能是字体系列有一个或多个面较轻比正常（font-weight:400）——比如Googles Lato。 p>

如果您像这样将所有光线加载到 Lato 的常规面

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

我观察到大多数 Windows 浏览器和 Chrome OSX 使用 font-weight:100 如果您指定任何小于 400 的值 - （或正常，常规）。将 font-weight: 更改为 200 或 300 不会呈现任何不同，尽管检查器工具坚持机器正在显示例如字体粗细：200。它不是。

删除较轻的重量（在我的情况下为 100）解决了问题，并让我至少分别使用 font-weight:200。不同浏览器的渲染并不完全相同，但至少相似。

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

这当然不能解决无法访问指定的轻字体粗细的实际问题。

【讨论】：

【参考方案4】：

据我所知，没有单一的解决方法。它实施了多个修复以适应每个浏览器，除了 IE。试一试：

对于 Chrome 和任何其他使用 webkit 的浏览器：

-webkit-font-smoothing:antialiased !important;

将其放置在您的 html CSS 中，或任何您认为合适的元素中。您也可以将其与上述内容一起添加：

text-shadow:1px 1px 1px rgba(0,0,0,0.005);

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

我不知道你还能做什么，但这至少应该解决 Chrome 的最大问题（加上其他 webkit 浏览器）。

【讨论】：

即使在 Chrome 中，这些似乎也没有什么不同。即使它确实有效，我的网站也不能是 Chrome 独有的。可以理解。关键是要解决最糟糕的问题，所以整体问题不会那么糟糕。至于它没有区别，你确定要按 ctrl+F5 清除缓存吗？这也适用于瑞安的回答。有时，除非您这样做，否则您不会看到 CSS 的变化。不，看起来还是和以前一样。嗯。恐怕我没有别的了。在此站点上进行一些搜索确认您没有其他可以尝试的方法：***.com/questions/17864742/… 和很多字体相关的设置一样，它继承自body标签。如果你想要所有字体抗锯齿，你可以把它放在那里。不知道在昨天的移动 Web 视图类型情况下这样做可能会对渲染性能产生什么影响，但对于用于信息亭类型场景的 node-webkit 应用程序来说，它工作得很好。【参考方案5】：

我在所有网站上都使用它，它涵盖了字体渲染的大部分问题。

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;

【讨论】：

【参考方案6】：

我最近遇到了类似的问题，相同的字体系列和大小在 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 What are -moz- and -webkit-?

【讨论】：

【参考方案7】：

我认为这更多是 Windows 问题而不是浏览器问题。相同的浏览器在 Linux 或 Mac 等其他操作系统上更流畅地呈现相同的字体。

在 Chrome 中，通过扩展任何 webkit 浏览器，您可以使用以下代码来平滑您的字体：

-webkit-font-smoothing: antialiased;

或

-webkit-font-smoothing: antialiased !important;

通常，我发现这并没有多大作用。我认为我们只需要等待微软对此采取行动。

【讨论】：

“可以使用以下代码为您的字体添加抗锯齿”不正确：antialiased 仅从默认值中删除子像素部分，即subpixel-antialiased 尚未@ 987654325@。亚像素部分负责彩色边缘。【参考方案8】：

您可以使用 css 属性 text-rendering 解决此问题。

例子：

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

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

更多信息在这里：MDN Text-Rendering

【讨论】：

我已经尝试过text-rendering:optimizeLegibilty，它在 IE、Firefox 和 Chrome 中得到了与以前相同的结果。不幸的是，浏览器似乎没有正确实现这一点，尽管它是一个非常方便的属性，而且 MDN 上的文档说它可以工作。【参考方案9】：

我打算用它作为前缀，我不喜欢它，但它可以工作

transform: rotate(-0.0002deg)

它使字体明显平滑，尽管稍微变薄了

【讨论】：

【参考方案10】：

已经很晚了，但你有没有尝试过提示字体文件？转到 transfonter 网站并上传您的字体文件。然后选项区勾选自动提示选项。

【讨论】：

以上是关于如何在 Windows 上的 CSS 3 中更流畅地渲染细字体？的主要内容，如果未能解决你的问题，请参考以下文章

如何让音频在 React 中更流畅地循环播放？

为啥我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？

css CSS：在较小的容器中居中更广泛的img

如何使用布尔逻辑使这个 if 语句在 python 3 中更简洁？

如何让mac虚拟机识别iphone

灵活/流畅的 HTML 表单的 CSS 秘诀是啥？