CSS властивості шрифтів

maque.org.ua - Українською про CSS

Привіт. Зараз розглянемо CSS властивості шрифтів, як-от: насиченість шрифту (Font-Weight), стиль шрифту (Font-Style), варіант шрифту (Font-Variant) та шрифтова властивість “Shorthand”.

Рівень: початківець
Тривалість: 04 хв 49 с

Відео на YouTube можна дивитись у HD якості. Як саме.

Також можна завантажити це відео з YouTube.com на власний комп’ютер. Як завантажити відео з YouTube.com на власний ПК

Нотатки до відеоуроку “CSS властивості шрифтів”

Властивість «Насиченість шрифту»( Font-Weight)

Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolder.

Приклад: p {font-weight:bolder}

Переглянути приклад

Властивість «Стиль шрифту» (Font-Style)

Приклад H2 {font-style:italic}

Переглянути приклад

Інші значення: normal, oblique

Отже, ця властивість визначає чи має шрифт бути курсивним. Тобто у попередньому коді ми наказали будь-якому підзаголовку (H2) бути курсивним.

Також можна застосовувати властивість oblique (косий) замість italic (курсив), але фактично результат той самий.

Значення normal повертає вигляд певного шрифту до нормального. Скажімо у випадках, коли треба, щоб у межа тексту з курсивним шрифтом, був текст зі звичайним шрифтом.

Властивість «Варіант шрифту» (Font-Variant)

Приклад blockquote {font-variant:small-caps;}

Переглянути приклад

Значення small-caps дозволяє усім літерам у словах мати вигляд великих, хоча за розміром вони залишаються меншими за справжні великі літери.

До речі, коли я писав текст українською, ця властивість не підтримувалась. Можливо, хтось знає у чому причина?

Шрифтова властивість “Shorthand”

Приклад p {font: bold italic small-caps 12pt verdana, arial, sans-serif;}

Переглянути приклад

Властивість “Shorthand” дозволяє оголосити усі потрібні значення для шрифту у одній декларації. Це дозволяє за допомогою якнайменшої кількості коду досягти бажаного результату.

Аби оглядачі правильно зрозуміли Ваш код, потрібно значення подавати у такій послідовності:

  1. насиченість шрифту
  2. стиль шрифту
  3. варіант шрифту
  4. розмір шрифту
  5. шрифти

Завантажити використані у відеоуроці HTML файли з прикладами

Корисні посилання:
1.Стильові властивості шрифту в CSS
2.Нестандартні шрифти
3.Групи шрифтів

You may also like