Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

HTML шрифты: работаем со шрифтами в HTML

HTML шрифты: работаем со шрифтами в HTML

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

Что может делать HTML со шрифтами?

Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в HTML, давайте дадим определение термину шрифт. Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста. Такое определение термину шрифт нам дает Википедия.

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

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

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

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

HTML тэги для работы со шрифтами

Сразу отметим, что HTML для работы со шрифтами предлагает нам использовать два тэга: тэг <basefont> и тэг <font>. Первый HTML тэг считается устаревшим и не рекомендован к использованию, так как в дальнейшем он будет удален из стандарта (уже удален и многие браузеры его не поддерживают). Также тэг <basefont> относится к одиночным HTML тэгам. Когда браузер встречает <basefont> он не создает HTML элемент, так как данный тэг служит для изменения характеристик шрифтов всей HTML  страницы.

Второй тэг <font> используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг <font> относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

HTML атрибуты для работы со шрифтами

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

  1. Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
  2. Атрибут color. Изменяет цвет шрифта в HTML документе.
  3. Атрибут size. Позволяет изменить размер шрифта в документе.

Вот такое вот ограничение в творчестве по работе со шрифтами в HTML. Как мы уже говорили ранее, HTML позволяет изменить три характеристики шрифта: гарнитуру, цвет и размер.

Изменяем размер шрифта в HTML

Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Шрифты в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Изменяем размер шрифта в HTML</h1>

<p><font size="1">font size="1"</font></p>

<p><font size="1">font size="2"</font></p>

<p><font size="1">font size="3"</font></p>

<p><font size="1">font size="4"</font></p>

<p><font size="1">font size="5"</font></p>

<p><font size="1">font size="6"</font></p>

<p><font size="1">font size="7"</font></p>

</body>

</html>

[/php]

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

Пример изменения размера шрифта в HTML

Пример изменения размера шрифта в HTML

Но атрибуту size мы можем задавать значения не только в абсолютных единицах, но и в относительных. Мы знаем, что HTML шрифт по умолчанию имеет значения атрибута size равным трем, следовательно, мы можем прибавлять и отнимать от тройки числа так, чтобы в результате получалось целое число не больше семи, создайте HTML докуент по примеру ниже, для этих целей можно воспользоваться бесплатным редактором Brackets:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Шрифты в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Относительные размеры шрифта в HTML</h1>

<p><font size="1">font size="1"</font></p>

<p><font size="-2">font size="-2"</font></p>

<p><font size="2">font size="2"</font></p>

<p><font size="-1">font size="-1"</font></p>

<p><font size="4">font size="4"</font></p>

<p><font size="+3">font size="+3"</font></p>

<p><font size="6">font size="6"</font></p>

<p><font size="7">font size="7"</font></p>

<p><font size="+4">font size="+4</font></p>

</body>

</html>

[/php]

Этот документ ничем не отличается от предыдущего, мы точно так же использовали HTML абзацы, чтобы осуществлять перенос строки (хотя могли бы и использовать тэг <br>, о котором мы говорили, когда разбирались с пробельными символами в HTML), изменился текст HTML заголовка, но это не главное, главное то, что мы изменили значение атрибута size и в браузере получили вот такую картину:

Пример изменения размера шрифта в HTML в относительных единицах

Пример изменения размера шрифта в HTML в относительных единицах

Мы видим, что шрифты в документе идут парами, это сделано специально, чтобы продемонстрировать, что значение size=”1” и size=”-2” дадут шрифт одинакового размера и так далее.

Изменяем цвет шрифта средствами HTML

Теперь поработаем с цветом шрифта средствами HTML. Сразу отметим, что HTML не позволяет использовать модель HSV для изменения цвета, поэтому у нас остается только модель RGB, либо использование имени цвета в HTML. Естественно, изменять цвет HTML шрифта мы будем при помощи атрибута color. Откройте удобный для себя редактор, например, JavaScript редактор Sublime Text 3:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Шрифты в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Изменяем цвет шрифта в HTML</h1>

<ul>

<li><font color="red" size="5">color="red"</font></li>

<li><font color="green" size="5">color="green"</font></li>

<li><font color="blue" size="5">color="blue"</font></li>

<li><font color="#AAA" size="5">color="blue"</font></li>

<li><font color="#FF00FF" size="5">color="blue"</font></li>

</ul>

</body>

</html>

[/php]

Во-первых, стоит отметить, что мы использовали HTML список для того, чтобы текст не был сплошным. Во-вторых, все HTML атрибуты вы можете использовать вместе.

Пример изменения цвета шрифта в HTML

Пример изменения цвета шрифта в HTML

Из примера видно, что цвет шрифта в HTML нам позволяет изменять атрибут color, для которого можно задавать значения либо при помощи модели RGB, либо при помощи имени цвета. Первый способ предпочтительней, так как за каждым именем скрывается определенный код модели RGB, в каждом браузере цвет, заданный по имени, может отображаться по-разному.

Изменяем гарнитуру шрифт в HTML

И наконец, HTML позволяет нам изменять гарнитуру шрифта при помощи специального атрибута face. Перечислять все доступные гарнитуры нет смысла, а, самое главное, нет возможности. Ниже мы приведем самые распространенные гарнитуры для самых популярных ОС. Отметим, что многие люди, говоря шрифт, имеют ввиду гарнитуру шрифта, в принципе они не далеки от истины, поскольку гарнитура – это самая сложная характеристика шрифта. Создайте документ в любом редакторе, рекомендую вам попробовать IDE NetBeans версии PHP:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Шрифты в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Изменяем гарнитуру шрифта в HTML</h1>

<ul>

<li><font face="Arial" color="red" size="5">face="Arial"</font></li>

<li><font face="Times New Roman" color="green" size="5">color="green"</font></li>

<li><font face="Verdana" color="blue" size="5">color="blue"</font></li>

<li><font face="Comic Sans MS" color="#AAA" size="5">face="MS Comic Sans"</font></li>

<li><font face="Tahoma" color="#FF00FF" size="5">face="Tahoma"</font></li>

<li><font face="Comic Sans MS, Tahoma, Arial" color="#FF00FF" size="5">

face="Comic Sans MS, Tahoma, Arial"</font></li>

</ul>

</body>

</html>

[/php]

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

Пример изменения гарнитуры шрифта в HTML

Пример изменения гарнитуры шрифта в HTML

Обратите внимание на последний элемент списка. В HTML мы можем задать сразу несколько гарнитур для шрифта. Шрифт в документе будет принимать ту гарнитуру, которая указана первой в атрибуте face, если ОС или браузер не могут отобразить шрифт с указанной гарнитурой, то будет попытка отображения шрифта со второй гарнитурой и так далее. Если ни одной из гарнитур нет, то браузер отобразит текст с гарнитурой шрифта, заданной в настройках по умолчанию. И это всё работает до тех пор, пока пользователь не настроит свой браузер так, чтобы он отображал шрифт со своей собственной гарнитурой, не используя те значения, которые указаны в HTML или CSS.

Приоритет тэгов <basefont> и <font>

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

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Шрифты в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<basefont face="Times New Roman" size="7" color="Black">

<h1>Приоритет basefont и font</h1>

<p><ul>

<li>face="Times New Roman" size="1" color="Black"</li>

<li><font face="Arial" color="red" size="5">

face="Arial" color="red" size="5"</font></li>

<li><font face="Times New Roman" color="green" size="5">

face="Times New Roman" color="green" size="5"</font></li>

<li><font face="Verdana" color="blue" size="5">

face="Verdana" color="blue" size="5"</font></li>

<li><font face="Comic Sans MS" color="#AAA" size="5">

face="Comic Sans MS" color="#AAA" size="5"</font></li>

<li><font face="Tahoma" color="#FF00FF" size="5">

face="Tahoma" color="#FF00FF" size="5"</font></li>

<li><font face="Comic Sans MS, Tahoma, Arial" color="#FF00FF" size="5">

face="Comic Sans MS, Tahoma, Arial" color="#FF00FF" size="5"</font></li>

</ul></p>

</body>

</html>

[/php]

Если вы найдете старую версию какого-нибудь браузера, который еще поддерживает <basefont>, то увидите, что шрифт первого элемента списка будет иметь характеристики, указанные для тэга <basefont>, а все остальные элементы списка будут иметь характеристики шрифта, которые указаны в атрибутах их тэгов <font>.

Далее мы приведем список шрифтов (приведем в виде HTML таблицы), которые доступны в самых популярных операционных системах.

HTML шрифты для Microsoft Windows

Эти шрифты поддерживают все компьютеры с операционной системой Windows

Имя гарнитуры Имя гарнитуры Имя гарнитуры
Andale Mono Arial Arial Bold
Arial Italic Arial Bold Italic Arial Black
Comic Sans MS Comic Sans MS Bold Courier New
Courier New Bold Courier New Italic Courier New Bold Italic
Georgia Georgia Bold Georgia Italic
Georgia Bold Italic Impact Lucida Console
Lucida Sans Unicode Marlett Minion Web
Symbol Times New Roman Times New Roman Bold
Times New Roman Italic Times New Roman Bold Italic Tahoma
Trebuchet MS Trebuchet MS Bold Trebuchet MS Italic
Trebuchet MS Bold Italic Verdana Verdana Bold
Verdana Italic Verdana Bold Italic Webdings

HTML шрифты для UNIX систем

Эти шрифты поддерживают все машины под управлением UNIX подобных ОС:

Имя гарнитуры Имя гарнитуры Имя гарнитуры
Charter Clean Courier
Fixed Helvetica Lucida
Lucida bright Lucida Typewriter New Century Schoolbook
Symbol Terminal Times
Utopia

HTML шрифты для Mac OS

Шрифты ниже поддерживаются всеми машинами, на которых установлена ОС Mac седьмой версии и выше.

Имя гарнитуры Имя гарнитуры Имя гарнитуры
American Typewriter Andale Mono Apple Chancery
Arial Arial Black Brush Script
Baskerville Big Caslon Comic Sans MS
Copperplate Courier New Gill Sans
Futura Herculanum Impact
Lucida Grande Marker Felt Optima
Trebuchet MS Verdana Webdings
Palatino Symbol Times
Osaka Papyrus Times New Roman
Textile Zapf Dingbats Zapfino
Techno Hoefler Text Skia
Hoefler Text Ornaments Capitals Charcoal
Gadget Sand

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...