Повернутый текст плохо рендерится

Question

Повернутый текст плохо рендерится

0

Я пытаюсь отобразить текст в html, используя rotate, чтобы отобразить его на 45deg (или почти достаточно)

К сожалению, это просто плохо выглядит. Кто-нибудь знает способ исправить это или, может быть, шрифт, который лучше, когда его на 45дег, чем другие шрифты?

Пример ниже: http://jsfiddle.net/stevewill61/3WpfP/

CSS для баннера в jsfiddle:

.test:before {
    position: absolute;
    background: #008000;
    display: inline-block;
    content:'Live';
    -webkit-transform: rotate(-45deg);
    font-size: 10pt;
    top: 5px;
    left: -20px;
    font-weight: bold;
    color: #fff;
    padding: 2px 25px;
    box-shadow: 1px 1px 1px #000;
    font-family: Arial;
}

Вот изображение в соответствии с запросом

http://oi39.tinypic.com/2607ifa.jpg

Steve 04 окт. 2013, в 15:49

Источник

0

Пожалуйста, опишите проблему или поделитесь снимком экрана. Для меня текст отображается в Chrome, но не вращается в Firefox (вероятно, из-за префикса webkit). Редактировать: если вы добавляете -moz-transform: rotate(-45deg); , это также хорошо отображается в Firefox
Arnaud Denoyelle 04 окт. 2013, в 13:47
0

Выглядит хорошо для меня. Вот что я вижу: i.stack.imgur.com/MJYRs.png
Joshua Dwire 04 окт. 2013, в 14:08

Теги:

html

css

css3

webkit-transform

2 ответа

0

Добавить -webkit-backface-visibility: hidden для правила

Демо на http://jsfiddle.net/3WpfP/5/

Gabriele Petrioli 04 окт. 2013, в 11:37

Ещё вопросы

Пожалуйста, опишите проблему или поделитесь снимком экрана. Для меня текст отображается в Chrome, но не вращается в Firefox (вероятно, из-за префикса webkit). Редактировать: если вы добавляете -moz-transform: rotate(-45deg); , это также хорошо отображается в Firefox
Выглядит хорошо для меня. Вот что я вижу: i.stack.imgur.com/MJYRs.png

Villike · Accepted Answer · 2013-10-04T12-29-00.000Z

Вы можете попробовать добавить сглаживание шрифтов. Я думаю, что самая большая проблема заключается в размере шрифта, если вы увеличиваете размер еще 1 pt, он выглядит намного понятнее.

-webkit-font-smoothing: subpixel-antialiased;

или

-webkit-font-smoothing: antialiased;

Здесь скрипка: http://jsfiddle.net/stevewill61/3WpfP/

И некоторые примеры сглаживания шрифтов: http://maxvoltar.com/sandbox/fontsmoothing/

Даже обновленный с крупным шрифтом это все еще не выглядит правильным ... jsfiddle.net/stevewill61/3WpfP/2
Я изменил шрифт на arial, добавил тень и удалил жирный шрифт. На моем экране это выглядит довольно гладко, хотя на моем компьютере это не выглядело слишком плохо, хотя у Mac лучше сглаживание. jsfiddle.net/BJpj2 i.imgur.com/rkaw9cl.png