Значение “oblique” для font-style

Почти каждый раз, когда Вы видите свойство font-style, оно имеет значение “normal” или “italic”. Но, стилю шрифта можно также присвоить значение “oblique”:



p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}


Текст Oblique

Текст Italic

 

—  почему текст стилем “oblique” выглядит так же, как и курсивом?

Потому-что значение italic в основном то же самое что и “oblique”, и представляет собой наклонный текст (косой), а не курсив. Возможно это значение больше подходит для шрифтов OpenType® , где будет больше заметна разница.

Стиль шрифта имеет JavaScript синтаксис object.style.fontStyle="oblique" и поддерживается всеми браузерами даже старыми IE.

Свойство font-style принимает значение “oblique”

Нажмите кнопку Заменить :

В этом блоке див после нажатия на кнопку Заменить, стиль шрифта изменится с normal на oblique

Напоминаю: что стиль со значением oblique для шрифта, зависит от самого шрифта, а не от браузера!

Тег HTML em в таблице стилей обычно курсивом:



em, i {
    font-style: italic;
}


по желанию можно italic заменить на oblique



em {
    font-style: oblique;
}


а для тега i оставить italic



i {
    font-style: italic;
}


Таким образом Вы будите знать какое значение будет иметь тот или иной тег в документе HTML.

Менять наклонность стиля для шрифта oblique можно с помощью значений « CSS3 преобразование », вот так:



.oblique {
    display: inline-block;
    -webkit-transform: skewX(-12deg);
       -moz-transform: skewX(-12deg);
        -ms-transform: skewX(-12deg);
         -o-transform: skewX(-12deg);
            transform: skewX(-12deg);
}


Не забудьте посмотреть какие бывают « Единицы измерения размеров шрифта в CSS3 » и какие « Размеры шрифта в CSS3 » — это важно знать. Удачи в работе!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>