Як прописати шрифт

Як прописати шрифт

Є кілька способів задати індивідуальні особливості шрифту будь-якого текстового блоку в сторінці. Одні з них використовують виключно засоби HTML, інші — тільки CSS, треті — комбінують можливості обох мов.

Інструкція

  1. Можна вказати параметри шрифту, який браузеру слід використовувати для відображення того чи іншого блоку тексту на сторінці, безпосередньо перед початком цього блоку. Для цього достатньо засобів мови розмітки, без залучення стильових описів елементів документа. Відповідна HTML-конструкція складається з відкриваючого і закриває тегів font (<font> і </ font>), між якими і розміщується текст. Цей тег дозволяє вказати ім’я шрифту в атрибуті face, його колір (в атрибуті color) і розмір (атрибут size). Колір можна задавати в його текстовому позначенні (наприклад, Blue), але краще використовувати шістнадцяткові коди (наприклад, # 0000FF замість Blue), так як з їх допомогою можна більш точно підібрати потрібний відтінок. Розмір шрифту тут задається у відносних одиницях — вам потрібно вказати число в діапазоні від 1 до 7. Зразок тексту із заданими таким способом параметрами шрифта:

    <font color=»Navy» face=»Verdana» size=»5″> Зразок тексту </ font>
  2. Інший спосіб — скористатися атрибутом style. Його можна вказувати в багатьох тегах, у тому числі формують рядкові або блокові області з текстом в тілі документа. Ось приклад з міткою, що формує один параграф тексту:

    <p style=»font: 700 20px/12 Verdana;»> Зразок тексту </ p>

    Тут число 700 — це властивість font-weight, а 20px — font-size. За ефектом вони практично дублюють один одного — задають розмір букв. Різниця лише в тому, що font-size вказує розміри в абсолютних одиницях (px або em), а font-weight у відносних, тобто збільшує або зменшує розмір цього текстового блоку щодо заданого для всього документа в цілому. Як ви розумієте, використовувати обидва одночасно в одному стильовому атрибуті немає сенсу, тут вони об’єднані лише як приклад. Число 12, вказане через дріб після абсолютного розміру, задає висоту рядків у цьому параграфі. А Verdana — це, звичайно, ім’я використовуваного шрифту.
  3. Проте зазначення параметрів шрифту безпосередньо в тегах елементів сторінки зараз використовується рідко. Як правило, описи шрифтів виносяться в CSS-блоки, а в тегах вказуються тільки посилання на них — в атрибутах class або id. Зразок цього типу вказівки параметрів шрифта:

    <style type=»text/css»>

     . ParaFont {font: 20px/40 Verdana;}

    </ Style>

    <p class=»paraFont»> Зразок тексту </ p>
  4. Якщо особливого розмаїття шрифтів у сторінці немає, то можна задати параметри, наприклад, для всіх тегів <p> і не вказувати посилань на стильове опис ні в атрибуті class, ні в id. У цьому випадку попередній зразок можна спростити до такого виду:

    <style type=»text/css»>

     p {font: 20px/40 Verdana;}

    </ Style>

    <p> Зразок тексту </ p>