Chrome的文字阴影错误

2017-01-26 72 views 1 likes

Codepen链接：https://codepen.io/calebzahnd/pen/OWxxLw Chrome的文字阴影错误

h1 { 
    max-width: 800px; 
    font-family: sans-serif; 
    font-size: 90px; 
    font-weight: 900; 
    text-shadow: 0 0 50px #000; 
}

截图：

我发现我只能想象显示时，在Chrome浏览器，一个bug在视网膜屏幕上。文字阴影上有一个奇怪的剪辑，文字阴影本身被推到实际文本下面。调整字体大小时，剪辑将随机更改为仅剪辑某些字符。如果您调整文本阴影的蓝色值，则某些值会将阴影回调到应该放置的位置，但没有任何韵律或原因。我已经检查过，并且在Safari和Firefox上显示效果很好。有人可以解释这里发生了什么吗？

来源

2017-01-26 Caleb Zahnd

回答

我可以在Chrome和Safari浏览器中使用我的视网膜显示屏完美地看到文本阴影。尝试更新浏览器和/或清理缓存。

来源

2017-01-26 16:31:29 Mazal

在其他视网膜显示器上观看时，它看起来不一致。一些监视器正确显示，其他人剪切阴影，以及它在哪里以及如何剪切阴影似乎也不一致。 –

h1 { 
 
\t max-width: 800px; 
 
\t font-family: sans-serif; 
 
\t font-size: 90px; 
 
\t font-weight: 900; 
 
\t text-shadow: 0 0 50px #000; 
 
     margin-left:25px; 
 
}

<h1>This is what you want everyone to see</h1>

的问题是，有这么大的阴影，而文字是正确的对像素边缘。某些设备/浏览器不会渲染超过窗口或div的像素边缘。我的建议是在文字左侧留出25px的余量。甚至25周围。

来源

2017-01-26 16:47:48 scoopzilla

Chrome的文字阴影错误

回答

相关问题