размытый текст в 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; 
}

ссылка: http://jsfiddle.net/P52Yu/6/

плз помощь :)

источник

2013-11-01 Alex Hasl

Возможный дубликат [Wonky text anti-aliasing при повороте с webkit-transform в Chrome] (http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit- transform-in-chrome) –

Возможно, у вас уже есть вопрос, посмотрите здесь [css transform, зубчатые края в хроме] http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – sissy

Кроме того, это: http://stackoverflow.com/questions/8605194/improve-css3-text-rotation-quality –

Хром имеет трудности с числами с большим количеством десятичных знаков в моменты, когда участвует преобразование. Попробуйте сделать parseInt на этих числах, чтобы свести десятичные знаки вниз. Вы обнаружите, что размытость часто уходит с этим простым исправлением.

источник

2015-09-14 19:32:50 user3353523

Проверьте этот анвер, но в основном вы можете объединить значения поплавкового пикселя по мере необходимости: http://stackoverflow.com/a/42256897/1834212 – Miguel

размытый текст в Chrome и Firefox

ответ

Смежные вопросы