【问题标题】:Google Chrome Font Rendering (Bold & Jittery)Google Chrome 字体渲染(粗体和抖动)
【发布时间】:2015-03-03 15:05:37
【问题描述】:

我知道现在各种网站上都有大量与字体渲染相关的问题。其中一个应该给我一个答案,所以你会想。不管我搜索多少,我似乎都找不到解决我的问题的方法。

google chrome 中几乎所有字体都显示为粗体。好吧,那不会真的是世界末日。更让我烦恼的是,它们变得非常紧张。因为它们看起来有点扭曲。

我做了一张图来展示我的firefoxchrome字体渲染的区别:

http://i.stack.imgur.com/hYRh4.png

我只是想摆脱这个。它已经困扰我一段时间了,我在网上找不到任何解决方案。

为了记录,我已经卸载并重新安装了chrome。我还在chrome://flags 中禁用了Direct Write

有什么帮助吗?

【问题讨论】:

    标签: google-chrome fonts rendering


    【解决方案1】:

    这其实不是渲染问题,而是字体加载问题。 Firefox 显示 Arial(一种针对小尺寸渲染进行了优化的字体),而 Chrome 显示 Helvetica(至少不是您安装的版本)。

    屏幕截图中的编辑器可能会询问字体 Helvetica,如果 Helvetica 不可用,则需要 Arial 和其他无衬线字体。我假设您的计算机上只安装了粗体版 Helvetica。它实际上应该显示常规版本,但它不可用。 因此,Firefox 使用 Arial,而 Chrome 显示最接近您的权重:Bold 版本。

    要解决您的问题,您应该尝试卸载 Helvetica Bold(通过控制面板 > 字体)。请注意,它也可以使用其他名称,例如 Helvetica Neue、Helvetica LT Std、Neue Helvetica 等。不要忘记重新启动以确保安全。然后 Chrome 也应该显示优化的 Arial。

    【讨论】:

    • 自从我完全重新安装了windows后,我再也没有这个问题了。所以这一定是对的。
    • 谢谢!更新 Chrome (v. 48.0.2564.116 m) 后,我首先遇到了这个问题 - 将所有文本变为粗体。这解决了我的问题,是 Neue 必须离开。
    【解决方案2】:

    尽管这个问题有点老了,但“问题”可能仍然存在,我发现了另一种导致这种文本出现的场景(老实说,它把我带到了这里)。

    在我的例子中,我没有注意到我的 jQuery 回调循环并将文本多次渲染到一个固定位置,大约 20 次。我检查了整个CSS。字体系列、文本渲染(在这种情况下为几何精度)、字体粗细等等。

    我花了相当长的时间才发现我有 20 个 div 彼此之间的文本相同,因为那里有一个非常复杂且深度封装的 DOM。

    因此,如果您遇到类似问题,您可能还想检查一下。

    最简单的检查方法是,使用浏览器集成的检查器/开发人员工具删除包含文本的元素(Windows:F12,Mac:ALT+CMD+I) - 导航到“元素”,将左侧图标(带有光标符号的那个)切换为蓝色(活动),单击浏览器中的元素。它现在应该在“元素”下突出显示,这是在 DOM 中找到它的最简单方法。右键单击并删除它。如果您仍然看到文本,则很可能有多个叠加层,而您只想要一个。

    【讨论】:

      【解决方案3】:

      我只想说我通过从系统中删除整个 Roboto 字体系列解决了这个问题。 (MacOS Big Sur 11.2 (20D64)。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-04-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-02-09
        • 2021-10-18
        • 2015-01-27
        • 2013-06-28
        相关资源
        最近更新 更多