Сглаживание текста Wonky при повороте с помощью webkit-transform в Chrome
Я вращаю элемент с помощью -webkit-transform: rotate()
, а в Chrome 14.0.835.2 dev-m он делает некоторые действительно странные вещи для текста внутри элемента. Это напоминает мне аналогичный эффект, который вы получаете в Photoshop, когда вы поворачиваете текст, используя "гладкое" сглаживание вместо "четкого".
Кто-нибудь знает, что здесь происходит? Является ли это конкретным для этого веб-сайта или версии Chrome или есть что-то, что я могу сделать, чтобы исправить это? (Он также не сглаживает границы между элементами списка)
![Wonky text]()
Здесь CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Ответы
Ответ 1
Попробуйте запустить режим 3D 3D Transform с помощью webkit. это изменяет способ хром делает
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
изменить
Также существует декларация стиля только для Webkit -webkit-font-smoothing
, которая принимает значения
-
none
-
subpixel-antialiased
-
antialiased
где subpixel-antialiased
- значение по умолчанию.
Увы, подпиксельные антиалиасы не являются хорошим решением для повернутого текста. Невозможно обработать машину рендеринга. 3D-преобразование переключается на antialiased
. Но мы можем попытаться установить его напрямую.
См. здесь http://maxvoltar.com/archive/-webkit-font-smoothing
Ответ 2
Размытые шрифты вызваны странной проблемой веб-кит-invling -webkit-backface-visibility. Это заставило меня навсегда понять, и я еще нигде не видел его в Интернете.
Теперь я добавляю -webkit-backface-visibility: hidden; к телу моего сайта как стиль CSS reset. Наблюдайте за тем, чтобы обострить шрифты на вашем сайте, это потрясающе. Вы трансформации не 3d, так что это вообще не повлияет на что-либо, но если вы решите сделать 3D-преобразования где-то еще на своем сайте, просто добавьте back -webkit-backface-visibility: visible; к определенному элементу. Также следует установить мерцание.