Улучшение качества вращения текста CSS3 - PullRequest
Новая
       6

Улучшение качества вращения текста CSS3

12 голосов
/ 22 декабря 2011

Я создал серию закругленных вкладок, используя CSS3. Затем я повернул эти вкладки, но качество текста (Windows - Chrome) оставляет желать лучшего, а при переходе «тускнеет». Какие есть альтернативы? Правильно ли я применил свой CSS? Мне лучше повернуть вкладки и оставить текст горизонтальным?

http://jsfiddle.net/jeepstone/9eGt3/

Ответы [ 2 ]

23 голосов
/ 22 декабря 2011

Chrome

Chrome не включает сглаживание по умолчанию.Но вы можете добавить это свойство CSS к своим элементам, чтобы включить его: 

transform: translate3d(0,0,0);

Это заставит браузер использовать свое аппаратное ускорение для расчета преобразований, что добавит некоторое сглаживание в качестве бонуса.

Тот же эффект можно применить, задав для -webkit-backface-visibity значение hidden: 

-webkit-backface-visibility: hidden;

Вот ваш обновленный jsfiddle (протестирован в Chrome)

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox по умолчанию включает сглаживание, поэтому взлома transform3d не требуется, но качество алгоритма сглаживания варьируется в зависимости от версии браузера.Вот несколько сравнительных изображений:

Firefox 5 Firefox 9 Chrome

Это Firefox 5, Firefox 9 и Chrome соответственно.

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

3 голосов
/ 22 декабря 2011

Как я уже говорил, использование javascript может сделать переход более плавным, не нарушая текст или границы.Замена CSS-переходов этим, казалось, очень помогла.Это использует jQuery - используйте инструмент по вашему выбору, конечно: 

// <li> needs position:relative; in the CSS
$('li').hover(
    function(){
        $(this).stop().animate({'top':'-10px'});
    },function(){
        $(this).stop().animate({'top':'0'});
    }
);

http://jsfiddle.net/9eGt3/5/

Мне не повезло, что я могу очень часто использовать CSS3, так что этодля меня это не область знаний, но мне, к сожалению, пришлось убрать существующие CSS-переходы, чтобы заставить его работать.Вы можете использовать технику обнаружения javascript, чтобы вернуться к переходам CSS, например, добавив class="js-enabled" к тегу body (конечно, с js) и используя это в своем селекторе CSS.

За исключением этого, я думаюу вас нет сил, если вы не хотите использовать изображения (ба) или подождать еще несколько лет, пока браузеры не смогут справиться с этим чуть лучше (grr).Не воспринимайте это как Евангелие, у кого-то может быть решение для вас - но я думал, что по крайней мере предложу обходной путь.

...