Question

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

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

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

如果你在Mac上（我不了解PC的浏览器），你可以用jsFiddle看到：

白色背景上的黑色字体完全没问题。
黑色背景上相同字体的白色版本无论出于何种原因现在都变得更加大胆。
只有在我应用css＆＃34; font-smoothing＆＃34;属于它。

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

因此，显然，它不是与字体或技术阻塞问题相关的问题。它只取决于背景和字体颜色。我原本以为这是因为我的花哨字体，但即使是标准的webfonts也会产生问题。所以，在一天结束时，它似乎只是一个对比的问题。黑色白色是好的，而黑色白色则没有。

是否有任何（css）解决方法可以获得相同的结果，无论背景光度/对比度或字体颜色如何，使用＆＃34; font-smoothing＆＃34;那么作为非标准化的修补程序呢？

对比问题可能是一个已知问题，我无法相信它没有标准修复，或者至少没有特定于浏览器的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/

感谢。

浏览器和字体平滑

0 个答案: