С появлением возможности подключать различные шрифты в CSS появилась дополнительная головная боль: не у всех шрифтов есть все стили, и из-за этого страдает типографика страницы (где-то нужно сделать выделение курсивом, а его просто нет в подключаемом шрифте, и CSS не может сделать oblique, потому, что не знает как с этим шрифтом работать).

Предлагаем вашему вниманию решение, которое мы применили недавно в одном из наших проектов.

Откуда растут ноги проблемы «как сделать курсив на CSS, если у шрифта нет italic»?

Дизайнер выбрал для отображения цены акцидентный шрифт Russo One, у которого нет курсива. В процессе дизайн-мышления добавил ему искусственный наклон, получился Italic. И самое страшное! Клиент утвердил такой макет. Верстальщик пытался найти какой-то способ, но не получилось. Вот и родилось такое решение.

Как получилось в вёрстке

Как получилось в вёрстке

Как нарисовал дизайнер

Как нарисовал дизайнер

Решение с курсивом для некурсивных шрифтов на CSS

Создадим свой шрифт, с искусственно наклоненными буквами (только теми, которые нам нужны), и будем его использовать в тех местах, где нужно.
Дизайнеры и шрифтовики будут кричать, что так делать ни в коем случае нельзя (это не хорошо искривлять шрифт), но нам повезло, Russo One наклонным выглядит достаточно органично.

Итак:
1) пишем все символы, которые нам потребуются обычным шрифтом в каком-нибудь графическом редакторе, мы выбрали Illustrator
2) переводим все символы в кривые, чтобы можно было их наклонить
3) сохраняем каждый символ в отдельный SVG файл
4) упаковываем их в шрифт с помощью сервиса fontello.com
5) используем в CSS

Возможности fontello.com

Fontello.com предназначен для создания иконочных шрифтов, поэтому у него есть возможность загрузить свой набор иконок в формате SVG, и указать для них коды символов, которые будут соответствовать определенной иконке в шрифте. То есть для нашего шрифта для каждой цифры нужно будет указать соответствующую цифру. В итоге, даже если шрифт не прогрузится, то текст, написаный этим шрифтом будет отображаться правильно, просто не так красиво.

Для наших целей всё получилось очень неплохо. Конечно межбуквенное расстояние в иконочном шрифте на fontello задать не получилось, поэтому если таким образом переделать все символы и напечатать обычный текст, а не цифру, будут проблемы с пробелами в тексте. Но цена выглядит как на макете.

Пошагово, как мы делали курсива на css если у шрифта нет italic, смотрите на видео.