为什么chrome渲染字体这么亮？答案

【问题标题】：Why does chrome render fonts so brightly?为什么chrome渲染字体这么亮？
【发布时间】：2014-12-29 06:02:29
【问题描述】：

下图是同一页面/段落的三个屏幕截图的组合：第一个来自 Chrome，第二个来自 IE，第三个来自 Firefox。

颜色为黑色 (#000)，font-family 为 Helvetica，font-size 为 12px。

正如我们所见，Chrome 中的字体看起来不是很黑。它甚至看起来很苍白。在 IE 中，字体呈现为更深的黑色，并且更易于阅读。在 Firefox 中它比 Chrome 好得多，但仍然没有 IE 那样黑。

有谁知道造成这种差异的原因是什么，以及是否有解决此问题的方法（不涉及疯狂的 CSS hack）？

谢谢。

【问题讨论】：

打开 chrome://flags 并发布“禁用 DirectWrite”是启用还是禁用。
已禁用。我尝试了这两个选项，但看起来都一样。
@Yair 切换directWrite后你重启浏览器了吗？

标签： html css google-chrome fonts

【解决方案1】：

这是因为浏览器如何呈现网站，这应该可以解决它：

-webkit-font-smoothing:antialiased;

编辑：我认为它还修复了文本在 OSX 上的外观

【讨论】：

谢谢，但我的眼睛看不出有什么不同

【解决方案2】：

在我自己的网站上测试网络字体时，我看到了完全相同的问题。所有网络字体在 Chrome 中看起来都比在其他浏览器中更薄；这甚至会渲染一些字体，否则它们看起来很平衡，实际上毫无用处。

我发现一个有用的 CSS 属性是：

-webkit-text-stroke

但这不是一个完美的修复，它是无效的 CSS。

现在是 2016 年，问题仍然存在。我真的不能说我理解他们为什么不修复它。（不，修复不应该意味着必须自己更改浏览器设置。）

由于某种原因，这似乎也是一个相对被低估的问题。

【讨论】：

【解决方案3】：

我制作了这个 javascript 来修复我网站上的 Chrome 字体渲染问题（太细了！）。

脚本细节：脚本为包含文本的元素添加彩色和半透明的文本阴影。

阴影的颜色与应用它的文本颜色相同。

阴影的不透明度与文本颜色的亮度成反比：例如，#FFFFFF 设置为 0%，而#000000 设置为 70%（十进制为 174，最大值为 255）。

function FixChromeFonts() { // v1.00
    var Max_Darkness=174 // 0-255
    var AllElem=document.querySelectorAll(':not(script):not(style):not(area):not(base):not(br):not(col):not(embed):not(hr):not(img):not(input):not(keygen):not(link):not(meta):not(param):not(source):not(track):not(wbr):not(table):not(tbody):not(tr):not(ul)')
    for (var i=0;i<AllElem.length;i++) {
        for (var j=0;j<AllElem[i].childNodes.length;j++) { // cycle through element nodes
            if (AllElem[i].childNodes[j].nodeType===3 && AllElem[i].childNodes[j].textContent.trim().length>0) { // is it a text node?
                var Col=window.getComputedStyle(AllElem[i]).getPropertyValue('color').replace(/[^\d,]/g,'').split(',') // text color array (R/G/B)
                var Lum=Math.round(0.2126*Col[0]+0.7152*Col[1]+0.0722*Col[2]) // luminosity
                var Opa=parseFloat(Max_Darkness*(255-Lum)/65025).toFixed(1) // opacity between 0 and 1
                AllElem[i].style.setProperty('text-shadow','0 0 0 rgba('+Col[0]+','+Col[1]+','+Col[2]+','+Opa+')','important') // set text shadow with alpha
                break
            }
        }   
    }
}

if (navigator.appVersion.indexOf("Chrome/") != -1) window.onload=FixChromeFonts() // runs only after page has loaded in Chrome browser

BODY {
  font-family:arial
}

.bigger {
  font-size:130%
}

<!doctype html>
<html>
<body>
This is a text
<div> <!-- text-shadow won't be applied to this div because it does not contain text nodes -->
  <div class=bigger>
    and this is another text
  </div>
</div>
</body>
</html>

【讨论】：