Гарнітура (font-family)

Гарнітура   шрифту - це набір накреслень одного шрифту. Шрифт може мати "пряме" накреслення (normal), курсив (italic), "скошене" (oblique), посилене по насиченості ("жирне", bold), "дрібне" (капітель, small-caps) і т.п.

Найбільш розповсюджені гарнітури в російській і українській частинах Web - це Times, Arial, Courier. Причому усі вони належать до різних груп шрифтів. Times - це пропорційний шрифт "із засічками" (serif), Arial - це пропорційний шрифт "без засічок" (sans-serif), а Courier - це моноширний шрифт (monospace). У Unix замість Arial частіше застосовується Helvetica.

У чому різниця між цими групами шрифтів, можна показати на прикладі:

Якщо у вашій операційній системі підтримується шрифт symbol, то ви побачите нормально записану формулу суми, якщо ж немає - абракадабру. Однак у даному випадку застосування звичайного шрифту взагалі безглузде - у ньому формула не буде відображена правильно.

Тепер розглянемо менш екзотичний приклад. Мова йтиме про текст у поле введення форми.

У першому випадку ми застосовуємо просто шрифт по замовчуванні. Далі змінимо його на інший моноширний шрифт:

<b>шрифт за замовчуванням:<\b><br>

<INPUT VALUE="Російська мова">

<b>моноширний шрифт:<\b><br>

Courier<br>

<INPUT STYLE="font-family:Courier;" VALUE="Російська мова"><br>

Courier New<br>

<INPUT STYLE="font-family:Courier New" VALUE="Російський мова"><br> 

        

В операційній системі, у якій тестувались приклади для цієї роботи, немає киррилиці в гарнітурі Courier, але зате вона є в гарнітурі Courier New. Отже, той приклад, у якому застосовується гарнітура   Courier, буде в нас відображатися абракадаброю.

 

 

 

 

 

 

 

 

 

Якщо користувач працює з іншим набором шрифтів, результат буде іншим.

<P ALIGN=left STYLE="font-size:24px;font-family:serif;color:darkred;">

Цей рядок набраний пропорційним шрифтом з засічками.</P>

<P ALIGN=left STYLE="font-size:24px;font-family:sans-serif;color:darkred;">

Цей рядок набраний пропорційним шрифтом без засічок</P>

<P ALIGN=left STYLE="font-size:24px;font-family:monospace;color:darkred;">

Цей рядок набраний моноширним шрифтом</Р>

При вказівці імені групи шрифтів, як показано вище, браузер підбирає підходящий для відображення шрифт даної групи з наявного набору шрифтів.

Якщо оптимізація браузера автора сторінки не влаштовує, можна вказати безпосереднє ім'я гарнітури шрифту:

<SPAN STYLE="font-family:symbol;padding-left:65px;">N</SPAN><BR>

<SPAN STYLE="font-family:symbol;font-size:24px;">

A<SUB>x,y</SUB>=е(y<SUB>a</SUB>+x<SUB>a</SUB>)

</SPAN><BR>

<SPAN STYLE="font-family:symbol; padding-left:60px; font-size:20px;">a=1</SPAN>

 

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

Кегль (font-size)

Кегль - це, якщо говорити спрощено, розмір шрифту. Більш докладне пояснення варто шукати в спеціальній літературі. Нам досить знати, що CSS через параметр font-size дозволяє керувати розміром літер.

Розмір шрифту можна задавати в типографських пунктах (pt, 0,35 мм) або пікселях (px). При установці кегля варто пам'ятати, що font-size задає не висоту літери, а розмір "прямокутника" під букву, що більше самої букви.

От кілька прикладів використання font-size:

<P STYLE="font-size:12pt;">Кегль параграфа встановлений у 12 пунктів</P>

<P STYLE="font-size:12px;">Кегль параграфа встановлений у 12 пікселів</P>

<P STYLE="font-size:120%;">Кегль параграфа встановлений у 120% від

розміру букв параграф елемента, що охоплює,</P>

Як видно з останнього прикладу, кегль можна задавати не тільки в абсолютних одиницях, але й у відносних. Крім відсотків, існує ще кілька умовних одиниць виміру кегля, які можна застосовувати в CSS:

<P STYLE="font-size:large;">Розмір кегля large</P>

<P STYLE="font-size:small;">Розмір кегля small</P>

<P STYLE="font-size:x-small;">Розмір кегля x-small</P>

<P STYLE="font-size:xx-small;">Розмір кегля xx-small</P>

Аналогічно x-small і xx-small, існують розміри x-large і xx-large. Крім того, є larger, smaller і medium.