2013-09-27 2 views
1

Этот вопрос задавался много раз здесь, но я не нашел хорошего решения проблемы. Некоторые предложили добавить обратную видимость: скрытый со всеми склонениями префиксов, но не решил проблему для меня или предложение использовать сглаживание шрифтов: сглаженный сделал он трюк. Я прошу, если кто-то недавно выяснил, как сделать CSS-поворотным текстом красиво, без текста, кажется, искалечен.Проблемы с преобразованием текста CSS

css rotated text problem in FF24

http://jsfiddle.net/pBtEW/10/

<div> 
    <p class="rotated">this text is rotated</p> 
    <p class="notrotated">this text is not rotated</p> 
</div> 
<input type="submit" id="submit1" class="rotated"/><br/> 
<input type="submit" id="submit2" class="notrotated"/> 

.rotated { 
    transform:rotate(-4deg); 
    -moz-transform:rotate(-4deg); 
    -webkit-transform:rotate(-4deg); 
    -o-transform:rotate(-4deg); 
    -ms-transform:rotate(-4deg); 
} 


Большое спасибо за вашу помощь.

+0

Я считаю, что это зависит от милосердия браузера (и, возможно, аппаратного обеспечения) ... для меня Opera Presto, похоже, работает лучше, чем Chrome/Firefox (на этой машине нижнего уровня я использую). Кроме того, я думаю, что было бы лучше поставить не префиксную версию в конце, а не в начале. – Passerby

+0

Благодарим вас за ответ. Я попытался поместить версию без префикса в конце, но результат будет таким же: -/ Машина FYI работает на x64Win7, i7, 4 Гб ОЗУ, ATIm HD5800 – Emanuele

+1

Точка старта последней версии префикса - это то, что правила CSS анализируются сверху донизу, поэтому для браузера, который поддерживает не префиксные и префиксные версии, ставя не префиксную версию в конце, будет гарантировать, что [последний метод рендеринга (т. е. не «метод обратной совместимости», если таковой существует)] (http://css-tricks.com/ordering-css3-properties/). И для вашего вопроса, я хочу сказать, что Chrome и Firefox делают WAY хуже, чем ваш скриншот на моем старом компьютере XP ... – Passerby

ответ

0

С текстом на моем веб-сайте с 315 градусом поворота я использовал семейство шрифтов: курьер с высотой линии: 100% и шрифтом: обычный как приемлемое решение для браузера в моих целях. Второе лучшее решение (текст, отлично отрисованный на IE и Mozilla, но не идеальный в Chrome) заключался в том, чтобы не устанавливать семейство шрифтов.

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