Шрифты в HTML

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

Тег <font>

Тег <font> имеет три атрибута: размер, цвет и шрифт. Все эти атрибуты мы рассмотрим ниже.

Тег <basefont>

Так же Вы можете использовать тег <basefont>, чтобы установить весь текст с тем же размером, шрифтом и цветом. Чтобы было более доходчиво, объясню: данный тег исполняет такую же функцию как сохранение формата в текстовом редакторе Microsoft Word.

Примечание: теги <font> и <basefont> являются устаревшими и предполагается что они будут удалены в будущих версиях HTML. Таким образом я советую Вам отказаться от их использования, а вместо них пользоваться стилями CSS для управления шрифтами. Но все-таки, для учебных целей, в этой статье я объясню как пользоваться этими тегами.

Размер шрифта: атрибут size

Вы можете установить размер шрифта текста с помощью атрибута "size". Диапазон принимаемых значений атрибута от 1 (самый маленький) до 7 (самый большой). По умолчанию размер шрифта имеет значение 3. Пример:

<font size="1">Размер шрифта="1"</font><br />
<font size="2">Размер шрифта="2"</font><br />
<font size="3">Размер шрифта="3"</font><br />
<font size="4">Размер шрифта="4"</font><br />
<font size="5">Размер шрифта="5"</font><br />
<font size="6">Размер шрифта="6"</font><br />
<font size="7">Размер шрифта="7"</font>

Это даст следующий результат:

Шрифт: атрибут face

Вы можете установить нужный шрифт с помощью атрибута "face", но знайте, что если шрифт не установлен, то пользователь Вашего сайта увидит стандартный шрифт в зависимости от браузера или компьютера. Пример:

<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />

Будет такой результат:

Альтернативные шрифты

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

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

Примечание: ознакомьтесь с полным списком HTML шрифтов.

Цвет шрифта: атрибут color

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

Примечание: Вы можете ознакомится с полным списком HTML цветов и кодов к ним.

Вот пример использования цветов:

<font color="#FF00FF">Это розовый цвет</font><br />
<font color="red">Это красный цвет</font>

Результат:

Экспериментируйте с разными шрифтами, цветами и размерами текстов и сделайте контент не только информативным, но и красивым на вид.

• Список HTML шрифтов
• Введение в HTML
• Презентационные теги HTML
• Цвета HTML
• Изображения HTML