Шрифты HTML — свойства и способы изменения

Что это такое? Шрифты в HTML-документе – то, что меняют во время верстки. Изменению подвергают размер, цвет и гарнитуру. Также можно выбрать готовый шрифт, в каждой ОС свой список доступных вариантов.

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

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

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

Это графическое начертание символов (букв, знаков, цифр), выдержанное в единой композиционной и стилистической системе и представляющее собой готовый комплект элементов с тем или иным размером и рисунком. Есть и более узкое типографское определение: шрифтом называется набор литер, которыми набирают текст в типографии.

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31966

Шрифт в любом HTML-документе обладает тремя свойствами: размером (кеглем), гарнитурой, цветом. Роль шрифтов и типографики в вёрстке веб-страниц весьма велика: именно шрифт определяет, насколько читабельным будет контент страницы. Операционная система устройства, на котором просматривают HTML-страницу, и браузер очень сильно влияют на отображение шрифтов.

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

Свойства шрифтов в HTML

На заре веб-разработки шрифт в HTML, как и цвет текста, можно было поменять только через тег <font></font>, которым оборачивали нужный фрагмент текста и указывали параметры: цвет, размер, гарнитуру.

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

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

Font-style

От него зависит тип начертания шрифта на странице. У него есть три значения:

• normal (стандартное начертание);
• Italic (курсивное);
• oblique (наклонное).

При последнем буквы будут слегка наклонены вправо, но их рисунок не изменится (как у курсива).

Font-variant

Описывает интерпретацию строчных и прописных букв в тексте. Принимает одно из двух значений:

• normal – стандартное поведение;
• small-caps – преобразование всех букв в заглавные и некоторое уменьшение их размера (относительно обычного состояния).

Font-weight

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

• normal для обычного начертания;
• bold – чтобы сделатьшрифт на HTML-странице жирным;
• bolder – ещё жирнее;
• lighter – меньшая жирность по сравнению с обычным состоянием.

Как видите, ничего сложного. Можно задать те же значения числами в диапазоне от 100 (самого светлого) до 900 (максимально жирного). Normal соответствует 300-400 (смотря какая гарнитура), а привычный полужирный bold — 500-700.

Font-size

Позволяет изменить размер шрифта в HTML-документе. Величину букв можно указывать как в абсолютных единицах (пунктах, пикселях), так и в относительных (процентах, em, rem). Как правило, разработчики задают её в пикселях и em, иногда в процентах.

Font-family

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

• serif – шрифты с засечками;
• sans-serif – шрифты без засечек (ими удобнее всего набирать основной текст);
• monospace – моноширинные шрифты (где все буквы равны по ширине);
• cursive – курсивные шрифты;
• fantasy –оригинальные и необычные.

Читайте также!

Создание сайта html: кому это нужно сегодня

Подробнее

Каждsw из них выполняет свои функции. Фантазийные (декоративные) шрифты обычно используются для заголовков, моноширинные — чтобы процитировать машинный код, и т. п. В текстовом редакторе либо Photoshop можно посмотреть, какие вообще бывают шрифты.

Таблицы шрифтов в HTML

HTML-шрифты для ОС Windows

В Microsoft Windows — на компьютере с любой версией ОС — вы найдёте следующие шрифты для HTML (это стандартный список):

HTML-шрифты в UNIX-системах

Машины, работающие под UNIX и аналогичными операционными системами, поддерживают другие HTML-шрифты:

HTML-шрифтыв Mac OS

На гаджетах Apple c MacOS, начиная с седьмой версии, по умолчанию установлены такие HTML-шрифты, как:

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

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

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

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

Как изменить шрифт в HTML

Эта статья излагает основы управления шрифтами на веб-страницах, поэтому для наглядности воспользуемся старым тегом font (до сих пор поддерживаемым всеми браузерами). Его поддержка в ближайшее время никуда не денется, хотя его не рекомендуют применять.

Итак, рассмотрим, как поменять параметры шрифта в HTML: цвет, кегль, начертание. У этого тега есть несколько атрибутов:

• color: для цвета;
• face: для подключения шрифта к HTML-странице (именно он нас и интересует);
• size: для размера.

С цветами всё просто. Надеемся, вы ещё не забыли, как задавать цвета в HTML-коде.

А вот с выбором шрифта всё обстоит интереснее. Можно, например, фрагмент текста набрать определённым шрифтом:

<font face=»Arial»>

Тут мы установили гарнитуру Arial.

<font>

Всё, что обёрнуто этим тегом, будет набрано шрифтом Arial. Атрибут — название шрифта — мы задали ранее, и, если браузеру известен этот шрифт и он может отобразить его, то мы увидим на странице кусок текста, написанный этим шрифтом.

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

<p>

<font face=»MyFont, Verdana, Arial»>

Этот текст будет набран шрифтом MyFont, если он есть на устройстве пользователя

<font>

</p>

MyFont идёт первым в списке, однако браузеру он незнаком. В подобных случаях браузер смотрит на следующий по списку шрифт и, если он есть, выводит его. Для нашего примера это Verdana (если браузер его знает) или, в крайнем случае, Arial.

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

Только до 25.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

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

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

Как изменить размер шрифта в HTML

В этом нам тоже поможет тег font, а точнее, его атрибут size. Размер текста задаётся целым числовым значением в диапазоне от единицы до семи. К примеру, можно сделать шрифт на HTML-странице третьего размера.

Размер может быть абсолютным и относительным.

<font size=»3″>

Установлен третий размер шрифта.

<font>

Размеры, превышающие семь или меньше единицы, автоматически будут приравнены к крайним значениям.

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

<p>

<font size=»3″>

Третий размер шрифта

<font>

</p>

<p>

<font size=»+2″>

Увеличиваем размер шрифта до пяти (3 + 2 = 5)

<font>

</p>

<p>

<font size=»5″>

Теперь размер шрифта — 5

<font>

</p>

Исходный размер текста был увеличен посредством добавления двойки до пяти. В итоге шрифт в HTML в нашем примере оказался пятого размера.

Но вначале же он был третьего размера, удивитесь вы. Да, это так, но мы изменили его. Последний шаг — установка абсолютного размера шрифта в целью убедиться, что всё работает как задумано.

Этот приём — задавать размер относительно текущего — требуется тогда, когда вы не знаете точно, каким был исходный размер (и был ли он вообще задан) либо хотите выделить часть текста более крупным шрифтом. Относительный размер обеспечивает пропорциональное увеличение или уменьшение текста (но в пределах от одного до семи, конечно).

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

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

Как уже говорилось, за гарнитуру шрифта отвечает атрибут face. Не надо перечислять все существующие шрифты, да это и невозможно. Достаточно нескольких наиболее распространённых гарнитур, поддерживаемых основными ОС. Гарнитура является наиболее сложным свойством шрифта, поэтому многие люди используют слова «шрифт» и «гарнитура» в качестве синонимов. Изменить гарнитуру шрифта в HTML можно даже в «Блокноте», создав простой документ:

Здесь мы задали разные гарнитуры шрифтов прямо в HTML — для каждого пункта списка свой. А теперь откройте получившуюся веб-страницу браузере и посмотрите на результат.

Последний пункт заслуживает особого внимания. С помощью тега font в HTML можно подключить на сайт несколько шрифтов: основной и запасные на случай, если первый не удастся отобразить. Браузер будет идти по списку последовательно и пытаться отобразить каждую гарнитуру, но, если не сможет, то выведет текст дефолтным шрифтом, установленным в браузере. Кстати, пользователь может локально у себя поменять эти дефолтные браузерные настройки и задать какой-нибудь шрифт, который ему нравится — без HTML и CSS.

Часто задаваемые вопросы о шрифтах в HTML

С помощью каких HTML-теговможно управлять шрифтами?

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

Читайте также!

Что такое html: где используется, для чего нужен

Подробнее

Кстати, в отличие от font, basefont — одиночный тег. Натыкаясь на него, браузер не создаёт никаких элементов, поскольку до появления CSS этот тег применялся для стилизации текста во всём документе. Font же является контейнером для некоторой части текста и стилизует только то, что находится внутри него. Поэтому данный тег парный. По поведению он является строчным.

Каково влияние шрифтов на загрузку страницы?

Вполне однозначное: они её тормозят, поскольку браузер последовательно, строчку за строчкой, читает CSS-файл. Дойдя до свойства @font-face, он начинает подгружать шрифты и, пока этот процесс не завершился, не пойдёт дальше — а значит, отображаться страница не будет.

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

Во всех ли ОС шрифты в текстах HTML-документов выглядят одинаково?

Один и тот же шрифт может смотреться немного по-разному в разных операционных системах. Причина этого — авторские права. Например, в бесплатной ОС Linux отсутствует популярнейшая гарнитура Times New Roman, и система подставляет максимально похожие шрифты (но не идентичные).

Дарим скидку от 60%
на курсы от GeekBrains до 24 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

Размер шрифта в HTML значит очень много: с помощью крупного текста можно привлечь внимание пользователя, заставив его прочесть самый важный фрагмент текста. Кроме размера, имеет значение начертание шрифта, семейство, степень жирности, цвет. Эти настройки легко меняются с помощью CSS, если всё делать по правилам.

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование