Средства работы со шрифтами в html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html.

Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег <font>. С помощью значений его атрибутов можно задать несколько характеристик шрифта:

• color – устанавливает цвет текста;
• size – размер шрифта в условных единицах.

• face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега <font>. Поддерживается сразу несколько значений перечисленных через запятую.

Пример:

<p>
<font size="7" color="red" face="Arial">Форматируется только тот текст, который расположен между частями парного тега font.</font>
Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
</p>

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

• <strong> - задает в html жирный шрифт. Тег <b> по действию аналогичный предыдущему;
• <big> - размер больше установленного по умолчанию;
• <small> - меньший размер шрифта;
• <em> - наклонный текст (курсив). Аналогичный ему тег <i>;
• <ins> - текст с подчеркиванием;
• <del> - зачеркнутый;
• <sub> - отображение текста только в нижнем регистре;
• <sup> - в верхнем регистре.

Пример:

<p>Обычный текст</p>
<p><strong>Жирный текст</strong></p>
<p><b>Жирный текст</b></p>
<p><big>Больше обычного</big></p>
<p><small>Меньше обычного</small></p>
<p><em>Курсив</em></p>
<p><i>Курсив</i></p>
<p><ins>С подчеркиванием</ins></p>
<p><del>Зачеркнутый</del></p>

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html. Одним из них является применение универсального атрибута style. С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя.

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

• В пикселях;
• В абсолютном значении (xx-small, x-small, small, medium, large);
• В процентах;
• В пунктах (pt).

Пример:

<p style="font-size:7"> font-size:7</p>
<p style="font-size:24px"> font-size:24px</p>
<p style="font-size:x-large"> font-size: x-large</p>
<p style="font-size:200%"> font-size: 200%</p>
<p style="font-size:24pt"> font-size:24pt</p>

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

• normal –нормальное написание;
• italic – курсив;
• oblique – шрифт с наклоном вправо;
• inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

<p style="font-style:inherit">font-style:inherit</p>
<p style="font-style:italic">font-style:italic</p>
<p style="font-style:normal">font-style:normal</p>
<p style="font-style:oblique">font-style:oblique</p>

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

<p style="font-variant:inherit">font-variant:inherit</p>
<p style="font-variant:normal">font-variant:normal</p>
<p style="font-variant:small-caps">font-variant:small-caps</p>

5) font-weight – позволяет установить толщину написание текста (насыщенность). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

• bold – устанавливает полужирный шрифт html;
• bolder – жирнее относительно normal;
• lighter –менее насыщенное относительно normal;
• normal – нормальное написание;
• 100-900 – задается толщина шрифта в числовом эквиваленте.

Пример:

<p style="font-weight:bold">font-weight:bold</p>
<p style="font-weight:bolder">font-weight:bolder</p>
<p style="font-weight:lighter">font-weight:lighter</p>
<p style="font-weight:normal">font-weight:normal</p>
<p style="font-weight:900">font-weight:900</p>
<p style="font-weight:100">font-weight:100</p>

Свойство font и цвет шрифта

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font:

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:

• caption – для кнопок;
• icon – для иконок;
• menu – меню;
• message-box –для диалоговых окон;
• small-caption – для небольших элементов управления;
• status-bar – шрифт строки состояния.

Пример:

<p style="font:icon">font:icon</p>
<p style="font:caption">font:caption</p>
<p style="font:menu">font:menu</p>
<p style="font:message-box">font:message-box</p>
<p style="font:small-caption">small-caption</p>
<p style="font:status-bar">font:status-bar</p>
<p style="font:italic 50px bold "Times New Roman", Times, serif">font:italic 50px bold "Times New Roman", Times, serif</p>

Для того чтобы задать цвет шрифта в html можно использовать свойство color. Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb. А также в виде шестнадцатеричного кода.

Пример:

<p style="color:#00FF99">color:#00FF99</p>
<p style="color:blue">color:blue</p>
<p style="color:rgb(100,50,180)">color:rgb(0, 255, 153)</p>

Русскоязычные шрифты и их поддержка

Не все из установленных в операционных системах шрифтов поддерживают русскую раскладку. Поэтому в веб-разработке лучше всего применять семейства шрифтов, проверенные на практике. Вот шрифты для html русские:

• Arial Black;
• Arial;
• Comic Sans MS;
• Courier New;
• Georgia;
• Lucida Console;
• Lucida Sans Unicode;
• Palatino Linotype;
• Tahoma;
• Times New Roman;
• Trebuchet MS;
• Verdana.

• Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.