1

我在我拥有的所有浏览器（FF/Chrome/Safari/0pera）上使用 html2canvas 渲染“字体平滑”CSS 属性时遇到问题

但是拼命地解决这个问题，我最终想知道为什么我必须首先平滑文本，我注意到只有在深色背景上显示的字体会导致问题。

所以，我做了一个 JSFiddle 来做一些测试（见下面的链接）

如果您使用的是 Mac（我不了解 PC 的浏览器），您可以使用 jsFiddle 看到：

  • 白色背景上的黑色字体完全可以。
  • 无论出于何种原因，黑色背景上相同字体的白色版本现在更加大胆和混乱。
  • 只有当我对其应用 css“字体平滑”属性时，这才会得到解决。

css 没有任何变化，字体是绝对标准的。唯一改变的是对比度：深色背景和明亮的字体或相反。

因此，很明显，这不是与字体或技术阻塞问题有关的问题。它仅取决于背景和字体颜色。我原本以为是因为我喜欢的字体，但即使是标准的 webfonts 也会产生问题。因此，归根结底，这似乎只是一个对比问题。白底黑是可以的，黑底白就不行。

是否有任何（css）解决方法可以获得相同的结果，无论背景亮度/对比度或字体颜色如何，然后使用“字体平滑”作为非标准化修复？

对比的东西可能是一个已知问题，我不敢相信它没有标准的修复，或者至少，没有浏览器特定的 css 属性的解决方法。根据背景颜色应用css属性似乎很尴尬。

这是html：

<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing"   >Test of text 0123</div>

这是CSS：

.white_no_smoothing{
    background:#fff;
    color:#000;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

.black_no_smoothing{
    background:#000;
    color:#fff;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

.black_smoothing{
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    background:#000;
    color:#fff;
    width:250px;
    height:50px;    
    display:block;
    font-size:36px;
}

JSFiddle： https ://jsfiddle.net/Lzy4s4tw/3/

谢谢。

4

0 回答 0