@ font-face и -webkit-transform: вращать, не работает

Question

Я делаю сайт с функциями HTML5 и CSS3. У меня есть два пользовательских шрифта, которые добавляются через @ font-face. Они используются в логотипе. Они в тегах 'h1', и я повернул их с помощью CSS3:

transform: rotate(350deg);

Конечно, для каждого браузера я использовал правильный префикс (для IE: "-ms-", для FF: "-moz-", для Chrome / Safari: "-webkit-" и для Opera: "-o-" ). Проблема в том, что он не вращается в Chrome и Safari. Поэтому мой вопрос: позволяет ли движок Webkit вращать пользовательские шрифты со свойствами CSS3?

Answer 1

Большинство встроенного контента не поддерживает преобразования в браузерах webkit - это известное ограничение. Хотя H1 является тегом уровня блока, я предполагаю, что вы используете тег span (встроенный) внутри тега H1 вокруг фактического текста, чтобы добавить шрифт, и это вызывает у вас проблемы.

Добавьте «display: inline-block» и посмотрите, поможет ли это.