Шрифты которые поддерживает html

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

При использовании шрифтов в CSS первым должен указываться шрифт, который вы хотите использовать для элемента. Далее через запятую следует перечислять названия резервных шрифтов, которые будут использованы браузером, если основной шрифт будет недоступен. Завершаться список должен одним из типовых шрифтов: serif (шрифты с засечками), sans-serif (шрифты без засечек), monospace (моноширинные шрифты), cursive (шрифты, имитирующие почерк) или fantasy (декоративные шрифты). Такой подход указания шрифтов связан с тем, что в настоящее время существует огромное количество как бесплатных, так и платных шрифтов, многие из которых не обязательно поддерживаются всеми компьютерами и браузерами. Более подробно об использовании шрифтов в CSS можно узнать в нашем учебнике здесь.

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

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

Шрифты семейства serif

serif

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Bookman

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Book Antiqua»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Georgia

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Palatino

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (ru)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Palatino Linotype»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Times

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Times New Roman»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Шрифты семейства sans-serif

sans-serif

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Arial

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Arial Narrow»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Arial Black»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Geneva

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Helvetica

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Impact

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Tahoma

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Trebuchet MS

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Verdana

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Шрифты семейства monospace

monospace

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Courier

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Courier New»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Lucida Console»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Monaco

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Шрифты семейства cursive

cursive

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

«Comic Sans MS»

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

Шрифты семейства fantasy

fantasy

Латинский алфавит	abc def ghi jkl mno pqr stu vwxyz ABC DEF GHI JKL MNO PQR STU VWXYZ
Русский алфавит	абв где ёжз ийк лмн опр сту фхц чшщ ъыь эюя АБВ ГДЕ ЁЖЗ ИЙК ЛМН ОПР СТУ ФХЦ ЧШЩ ЪЫЬ ЭЮЯ
Контрольная фраза (en)	the quick brown fox jumps over the lazy dog
Контрольная фраза (рус)	съешь ещё этих мягких французских булок, да выпей же чаю
Арабские цифры	0123456789 0123456789 0123456789

html.okpython.net Copyright © 2016-2023.

Каскадные таблицы стилей CSS советы & приёмы

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49

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

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

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

В статье рассказывается:

1. Что может делать HTML со шрифтами
2. Свойства шрифтов в HTML
3. Таблицы шрифтов в HTML
4. Русскоязычные шрифты и их поддержка
5. Как изменить шрифт в HTML
6. Как изменить размер шрифта в HTML
7. Изменение гарнитуры шрифта в HTML
8. Часто задаваемые вопросы о шрифтах в HTML

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

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

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

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

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

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

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

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

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

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

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

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

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

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

Павел Симонов
Исполнительный директор Geekbrains

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

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

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

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

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

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

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

На сегодняшний день шрифты можно изменить только в 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.

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

Font-size

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

Font-family

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

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

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

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

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

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

Название	Название	Название
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

Для вас подарок! В свободном доступе до 05.11 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

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

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

Название	Название	Название
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Times
Utopia

HTML-шрифтыв Mac OS

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

Название	Название	Название
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

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

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

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

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

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

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

Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифты которые поддерживает html

Визуализация стандартных шрифтов

Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере или мобильном устройстве у посетителей сайта. Каждый владелец устройства может иметь набор разных шрифтов, поэтому на сайтах можно использовать стандартные шрифты, либо загружать нестандартные вместе с сайтом. Браузеры используют ограниченное количество стандартных шрифтов, таких как Arial, Arial Black, Comic Sans MS, Courier New, Helvetica, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings. Загрузка шрифтов вместе с сайтом требует особых приёмов.

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

1. academy engraved let
2. algerian
3. amaze
4. arial
5. arial black
6. balthazar
7. bankgothic lt bt
8. bart
9. bimini
10. book antiqua
11. bookman old style
12. braggadocio
13. britannic bold
14. brush script mt
15. calibri
16. cambria
17. candara
18. century gothic
19. century schoolbook
20. chasm
21. chicago
22. colonna mt
23. comic sans ms
24. commercialscript bt
25. consolas
26. constantia
27. coolsville
28. corbel
29. courier
30. courier new
31. cursive
32. dayton
33. desdemona
34. estrangelo edessa
35. fantasy
36. flat brush
37. footlight mt light
38. franklin gothic medium
39. futurablack bt
40. futuralight bt
41. gabriola
42. garamond
43. gautami
44. gaze
45. geneva
46. georgia
47. georgia italic impact
48. geotype tt
49. helterskelter
50. helvetica
51. herman
52. highlight let
53. impact
54. jester
55. joan
56. john handy let
57. jokerman let
58. kelt
59. kids
60. kino mt
61. la bamba let
62. latha
63. lithograph
64. lucida console
65. lucida sans console
66. lucida sans unicode
67. map symbols
68. marlett
69. matteroffact
70. matisse itc
71. matura mt script capitals
72. mekanik let
73. modern
74. modern ms sans serif
75. monaco
76. monospace
77. monotype sorts
78. ms linedraw
79. ms sans serif
80. ms serif
81. mv boli
82. new york
83. nyala
84. olddreadfulno7 bt
85. orange let
86. palatino
87. palatino linotype
88. playbill
89. pump demi bold let
90. puppylike
91. roland
92. roman
93. sans-serif
94. script
95. scripts
96. scruff let
97. segoe print
98. segoe script
99. segoe ui
100. serif
101. short hand
102. signs normal
103. simplex
104. simpson
105. small fonts
106. stylus bt
107. superfrench
108. surfer
109. swis721 bt
110. swis721 blkoul bt
111. symap
112. symbol (symbol)
113. tahoma
114. technic
115. tempus sans itc
116. terk
117. times
118. times new roman
119. trebuchet ms
120. trendy
121. txt
122. tunga
123. verdana
124. victorian let
125. vineta bt
126. vivian
127. webdings (webdings)
128. western
129. westminster
130. westwood let
131. wide latin
132. wingdings (wingding)
133. zapfellipt bt

1. ACADEMY ENGRAVED LET
2. ALGERIAN
3. AMAZE
4. ARIAL
5. ARIAL BLACK
6. BALTHAZAR
7. BANKGOTHIC LT BT
8. BART
9. BIMINI
10. BOOK ANTIQUA
11. BOOKMAN OLD STYLE
12. BRAGGADOCIO
13. BRITANNIC BOLD
14. BRUSH SCRIPT MT
15. CALIBRI
16. CAMBRIA
17. CANDARA
18. CENTURY GOTHIC
19. CENTURY SCHOOLBOOK
20. CHASM
21. CHICAGO
22. COLONNA MT
23. COMIC SANS MS
24. COMMERCIALSCRIPT BT
25. CONSOLAS
26. CONSTANTIA
27. COOLSVILLE
28. CORBEL
29. COURIER
30. COURIER NEW
31. CURSIVE
32. DAYTON
33. DESDEMONA
34. ESTRANGELO EDESSA
35. FANTASY
36. FLAT BRUSH
37. FOOTLIGHT MT LIGHT
38. FRANKLIN GOTHIC MEDIUM
39. FUTURABLACK BT
40. FUTURALIGHT BT
41. GABRIOLA
42. GARAMOND
43. GAUTAMI
44. GAZE
45. GENEVA
46. GEORGIA
47. GEORGIA ITALIC IMPACT
48. GEOTYPE TT
49. HELTERSKELTER
50. HELVETICA
51. HERMAN
52. HIGHLIGHT LET
53. IMPACT
54. JESTER
55. JOAN
56. JOHN HANDY LET
57. JOKERMAN LET
58. KELT
59. KIDS
60. KINO MT
61. LA BAMBA LET
62. LATHA
63. LITHOGRAPH
64. LUCIDA CONSOLE
65. LUCIDA SANS CONSOLE
66. LUCIDA SANS UNICODE
67. MAP SYMBOLS
68. MARLETT
69. MATTEROFFACT
70. MATISSE ITC
71. MATURA MT
72. MEKANIK LET
73. MODERN
74. MODERN MS SANS SERIF
75. MONACO
76. MONOSPACE
77. MONOTYPE SORTS
78. MS LINEDRAW
79. MS SANS SERIF
80. MS SERIF
81. MV BOLI
82. NEW YORK
83. NYALA
84. OLDDREADFULNO7 BT
85. ORANGE LET
86. PALATINO
87. PALATINO LINOTYPE
88. PLAYBILL
89. PUMP DEMI BOLD LET
90. PUPPYLIKE
91. ROLAND
92. ROMAN
93. SANS-SERIF
94. SCRIPT
95. SCRIPTS
96. SCRUFF LET
97. SEGOE PRINT
98. SEGOE SCRIPT
99. SEGOE UI
100. SERIF
101. SHORT HAND
102. SIGNS NORMAL
103. SIMPLEX
104. SIMPSON
105. SMALL FONTS
106. STYLUS BT
107. SUPERFRENCH
108. SURFER
109. SWIS721 BT
110. SWIS721 BLKOUL BT
111. SYMAP
112. SYMBOL (SYMBOL)
113. TAHOMA
114. TECHNIC
115. TEMPUS SANS ITC
116. TERK
117. TIMES
118. TIMES NEW ROMAN
119. TREBUCHET MS
120. TRENDY
121. TXT
122. TUNGA
123. VERDANA
124. VICTORIAN LET
125. VINETA BT
126. VIVIAN
127. WEBDINGS (WEBDINGS)
128. WESTERN
129. WESTMINSTER
130. WESTWOOD LET
131. WIDE LATIN
132. WINGDINGS (WINGDINGS)
133. ZAPFELLIPT BT

Основные разновидности шрифтов

Шрифты бывают с засечками (с постоянной толщиной линий — брусковый, и переменной — антиква; их применяют для оформления основного текста документа) и рубленые (гротески, используются для набора заголовков).

По стилю различают шрифт: Прямой (Roman), Курсивный (Italic), Полужирный (Bold), Нормальный (Regular, отличается от прямого меньшей толщиной штриха), Узкий (Narrow), Широкий (Wide).

Дополнительные параметры форматирования символов: подчеркивание различными типами линий (Подчеркнутый, Underline), изменение вида значков (зачёркнутый, надстрочный, подстрочный, с тенью, контур, все прописные), изменение расстояний между символами (межсимвольный интервал — обычный, разреженный или уплотнённый).

По ширине символов шрифты делят на моноширинные (как на старой печатной машинке) и пропорциональные. Например, буква «I» будет намного уже, чем «W». В CSS — моноширинный шрифт выбирается или с помощью конструкции font-family: monospace, и/или указанием названия конкретного моно-шрифта. Например:

Значения ширины шрифтов (font-weight) задаются по цифровой шкале, где значение «400» соответствует «Normal» данного семейства шрифтов. Названия веса, ассоциированные с такой шириной, обычно: Book, Regular, Roman, Normal, Medium. «Bold» соответствует весовому значению «700», Heavy — «800», Black — «900».

Стандартные шрифты для разных версий Windows

Название шрифта	Win 2000	Win XP	Vista	Win 7	Win 8
Arial	+	+	+	+	+
Arial Black	+	+	+	+	+
Book Antiqua	+
Calibri	+	+	+
Cambria	+	+	+
Candara	+	+	+
Comic Sans MS	+	+	+	+	+
Consolas	+	+	+
Constantia	+	+	+
Corbel	+	+	+
Courier	+	+	+	+	+
Courier New	+	+	+	+	+
Estrangelo Edessa	+	+	+	+
Franklin Gothic Medium	+	+	+	+
Gautami	+	+	+	+
Gabriola	+	+
Georgia	+	+	+	+	+
Georgia Italic Impact	+
Impact	+	+	+	+	+
Latha	+	+	+	+
Lucida Console	+	+	+	+	+
Lucida Sans Console	+	+	+	+
Lucida Sans Unicode	+	+	+	+	+
Marlett	+	+	+	+	+
Modern	+	+
Modern MS Sans Serif	+
MS Sans Serif	+	+	+	+	+
MS Serif	+	+	+	+	+
MV Boli	+	+	+	+
Nyala	+	+	+
Palatino Linotype	+	+	+	+	+
Roman	+	+	+	+	+
Script	+	+	+	+	+
Segoe Print	+	+	+
Segoe Script	+	+	+
Segoe UI	+	+	+
Small Fonts	+	+
Symbol	+	+	+	+	+
Tahoma	+	+	+	+	+
Tempus Sans ITC	+
Times New Roman	+	+	+	+	+
Trebuchet MS	+	+	+	+	+
Tunga	+	+	+	+
Verdana	+	+	+	+	+
Webdings	+	+	+	+	+
Westminster	+
Wingdings	+	+	+	+	+

Группы и семейства шрифтов

Рекомендуется прописывать шрифт в CSS, сгруппировав сразу 3-4 похожих шрифта на случай отсутствия основного из них у конечного пользователя.
Пример: font-family: Webdings, Garamond, Times New Roman, Sans;

Ниже приведен список стандартных шрифтов для операционной системы Microsoft Windows и MacOS X Apple. В таблице использованы группы стандартных шрифтов Windows и Mac для безопасного использования во всех браузерах.

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
Arial Black, Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
Comic Sans MS, cursive	Comic Sans MS	Comic Sans MS 5	cursive
Courier New, Courier, monospace	Courier New	6	monospace
Georgia, serif	Georgia 1	Georgia	serif
Impact, Charcoal, sans-serif	Impact	Impact 5 , Charcoal 6	sans-serif
Lucida Console, Monaco, monospace	Lucida Console	Monaco 5	monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif	Palatino Linotype, Book Antiqua 3	Palatino 6	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
Times New Roman, Times, serif	Times New Roman	Times	serif
Trebuchet MS, Helvetica, sans-serif	Trebuchet MS 1	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol 2	Symbol 2	—
Webdings	Webdings 2	Webdings 2	—
Wingdings, Zapf Dingbats	Wingdings 2	Zapf Dingbats 2	—
MS Sans Serif, Geneva, sans-serif	MS Sans Serif 4	Geneva	sans-serif
MS Serif, New York, serif	MS Serif 4	New York 6	serif

1 Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС Windows 98.

2 Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

3 Шрифт Book Antiqua практически идентичен Palatino Linotype, который поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

4 Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут отображаться с пикселизацией в крупных размерах. Эти шрифты предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

5 Эти шрифты работают в Safari только в стандартном начертании и не работают при выделении жирным или курсивом. Comic Sans MS также используется жирным выделением, но не курсивом. Другие Mac-браузеры самостоятельно эмулируют отсутствующие у шрифтов свойства.

6 Эти шрифты устанавливаются в Mac только при Classic-инсталляции.

Как выглядят шрифты в различных браузерах

Windows Vista, Internet Explorer 7, ClearType включен:

Windows Vista, Firefox 2.0, ClearType включен:

Mac OS X 10.4.8, Firefox 2.0, ClearType включен: