Новини високих технологій
» » Курсив на CSS: зміна накреслення шрифту

Курсив на CSS: зміна накреслення шрифту

18-06-2018, 21:58
1 759
Курсив - один з найпопулярніших способів виділити фрагмент тексту і надати йому певну значимість. Він ідеально підходить для цитат, посилань, назв і власних імен. У HTML існує два спеціальних тегів для відображення курсиву. В CSS курсивом управляє властивість font-style.

Курсив або похилий шрифт?

Відображення одного і того ж шрифту в курсивном накресленні може відрізнятися. На картинці - три блоки тексту, набраних одним і тим же шрифтом Playfair Display. Перший має звичайне пряме накреслення, а другий і третій - курсивне. Вони відкриті в одному і тому ж браузері Google Chrome, але виглядають абсолютно по-різному.
Справа в тому, що деякі шрифти мають власні курсивні набори символів. Якщо браузер не має доступу до цього набору, але зустрічає текст, який повинен бути відображений як курсивний, він спробує нахилити його своїми силами.


У другому блоці - якраз такий, оброблений браузером, варіант, а в третьому - оригінальний курсивний варіант шрифту Playfair Display, що володіє унікальним накресленням, більше схожий на рукописний. Браузер ж просто нахиляє кожен символ тексту на певний кут, імітуючи курсив. Розбираючись, як зробити курсив в CSS та HTML, важливо пам'ятати, що в разі специфічних шрифтів необхідно забезпечити браузеру доступ до їх курсивним наборів. У ряді випадків результат роботи браузерних алгоритмів нахилу може бути незадовільним.

HTML-курсив

Для курсивного відображення тексту в HTML існує два спеціальних тега: i (від слова italic) і em. Зображення текстового фрагмента, укладеного в будь-який з цих дескрипторів, буде однаковим.
<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_2 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});

Різниця полягає в логічному виділення. Тег em вказує на особливу значимість фрагмента. Це важливо для пошукових роботів і скринридеров, які будуть виділяти вказаний текст за допомогою інтонації.

Властивість font-style

В CSS курсивом управляє інструкція font-style. Вона може приймати одне з трьох базових значень:

  • normal - шрифт звичайного шрифту;
  • italic - курсивне накреслення;
  • oblique - похиле накреслення.

На даний момент більшість сучасних браузерів обробляють значення oblique і italic однаково, проте спочатку передбачалося, що перше - це результат роботи спеціальних браузерів алгоритмів, наклоняющих кожен символ вправо.

Якщо потрібний шрифт браузером не виявлено, то italic буде виглядати точно так само, як і oblique.

На відміну від тега em, css властивість font-style не надає виділеного фрагменту особливої важливості, воно скоріше відповідає дескриптору i.

Приклади

Курсивним накресленням часто виділяються цитати. Спробуємо надати вислову Оскара Уайльда гарний вигляд.

.quote {
font-style: italic;
border-left: 5px solid red;
padding-left: 20px;
}


Крім декоративної рамки праворуч і відступів, для блоку quote визначено правило font-style зі значенням italic.
З його допомогою встановлюється курсив в CSS.
Цікаво по темі
CSS: підключення до веб-документа
CSS: підключення до веб-документа
Вивчення CSS - це наступний після HTML і обов'язковий етап освоєння веб-програмування. Дана технологія значно розширює можливості розмітки сторінок
Як писати жирним шрифтом в "Ютубі"? Закреслений, курсивний шрифт
Як писати жирним шрифтом в "Ютубі"? Закреслений, курсивний шрифт
Хочете, щоб вас текст виділився серед інших? Чи бажаєте привернути увагу до вашого облікового запису? Використовуйте особливий, жирне або курсивне
Box-sizing в CSS: обчислення розмірів блоку
Box-sizing в CSS: обчислення розмірів блоку
Блокова модель CSS, визначення реального розміру елемента. Область рамки, внутрішніх відступів і контенту. Зміна алгоритму обчислення розмірів за
Розміри та стилі шрифтів: огляд, особливості застосування та рекомендації
Розміри та стилі шрифтів: огляд, особливості застосування та рекомендації
Стиль шрифтів - поняття невизначене, оскільки більше відноситься до CSS. А ось на практиці все ж прийнято вживати термін «гарнітура». Вона визначає
Атрибути HTML: види і застосування. HTML-довідник
Атрибути HTML: види і застосування. HTML-довідник
Мова розмітки гіпертексту HTML володіє широким вибором тегів для додання сайту приємного зовнішнього вигляду. З часом початківець веб-дизайнер
Властивість CSS font-weight: як поставити насиченість шрифту
Властивість CSS font-weight: як поставити насиченість шрифту
Технологія каскадних таблиць стилів допомагає налаштувати візуальне представлення тексту на сайті. Наприклад, можна регулювати щільність його