Chrome和Firefox中的模糊文本

当我想旋转div时，我想旋转文本，但我仍然遇到了抗锯齿问题。文字模糊，我无法修复它。效果发生在Firefox和Chrome中。Chrome和Firefox中的模糊文本

我找到了这个解决方案，但它不适合我。

-webkit-backface-visibility: hidden;

HTML

<div id="rotate"> 
    <span>Hi, iam rotated blurry text </span> 

</div>

CSS

#rotate{ 
margin-top:30px; 
    -moz-transform: rotate(-9deg); 
    -ms-transform: rotate(-9deg); 
    -o-transform: rotate(-9deg); 
    -webkit-transform: rotate(-9deg); 
    transform: rotate(-9deg); 
background:#292929; 
font-size:30px; 
color:green; 
display:inline-block; 
}

链接：

plz帮助:)

来源

2013-11-01 Alex Hasl

[在Chrome浏览器中使用webkit-transform旋转时有趣的文本消除锯齿]（http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit- chrome中的变换） –

也许已经有一个关于这个的问题，在这里查看[css变换，在chrome中锯齿状边缘] http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – sissy

另外，这个：http://stackoverflow.com/questions/8605194/improve-css3-text-rotation-quality –

当涉及到转换时，Chrome在编号方面有很多小数位的困难。尝试对这些数字进行parseInt以减小小数位数。通过这个简单的修复，你会发现模糊性经常消失。

来源

2015-09-14 19:32:50 user3353523

检查这个问题，但基本上你可以圆浮点像素值根据需要：http://stackoverflow.com/a/42256897/1834212 – Miguel

Chrome和Firefox中的模糊文本

回答

相关问题