Шрифты в HTML (font, font-family, font-face)
На текущий момент шрифты — это одна из главных особенностей сайтов. Шрифты бывают как платными, так и бесплатными. При создании сайотов дизайнеры тратят большое количество времени, чтобы подобрать шрифты.
В этой статье мы разберём сначала системные бесплатные шрифты, а потом научимся подключать шрифты из файлов.
Веб безопасные шрифты
Шрифт можно указать с помощью CSS свойства «font-family». Если перевести дословно название этого свойства, то получится «семейство шрифтов». В значении этого свойства необходимо указать название шрифта. К примеру:
Но текст будет написан этим шрифтом только в том случае, если этот шрифт есть у пользователя, который просматривает сайт. Если этого шрифта нет в его системе, то будет выбран стандартный. Поэтому если вы не хотите подключать файлы шрифтов в CSS, то стоит указать в качестве шрифта один из так называемых «веб безопасных шрифтов». Эти безопасные шрифты точно будут отображаться на любой системе. Вот список их названий и примеры:
Arial: Тише, мыши, кот на крыше. Arial: Тише, мыши, кот на крыше. Verdana: Тише, мыши, кот на крыше. Georgia: Тише, мыши, кот на крыше. Impact: Тише, мыши, кот на крыше. Arial Black: Тише, мыши, кот на крыше. Comic Sans MS: Тише, мыши, кот на крыше. Trebuchet MS: Тише, мыши, кот на крыше. Courier New: Тише, мыши, кот на крыше. Times New Roman: Тише, мыши, кот на крыше.
В разных операционных системах шрифты могут выглядеть по-разному из-за авторских прав. К примеру, шрифта «Times New Roman» нет на операционной системе Linux (а на этой системе работает большинство мобильных устройств). В таких случаях система будет подставлять шрифт, который похож на требуемый, но не идентичен ему.
Можно указать несколько шрифтов через запятую. Тогда если в системе нет шрифта, то будет взят следующий из списка.
- serif — шрифт с засечками на концах букв. К примеру, Times New Roman
- sans-serif — шрифт без засечек. К примеру, Arial
- cursive — курсивный шрифт
- fantasy — декоративный шрифт
- monospace — моноширинный шрифт (все буквы одинаковой ширины)
Шрифты в подключаемых файлах (font-face)
Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу @font-face. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:
Тише, мыши, кот на крыше.- font-family — указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
- url(‘ . ‘) — указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.
Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз — потом он попадает в кеш.
Стандартные и безопасные шрифты CSS
Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).
Чтобы сайт в любой операционной системе открывался одинаково, принято в CSS-свойстве font-family задавать несколько названий шрифтов, перечисленных через запятую.
Последним указывается семейство шрифта, он используется, если в системе ни один из перечисленных не найден.
Список безопасных шрифтов:
| ‘Times New Roman’, Times, serif | Съешь же ещё этих мягких французских булок |
| Georgia, serif | Съешь же ещё этих мягких французских булок |
| Arial, Helvetica, sans-serif | Съешь же ещё этих мягких французских булок |
| ‘Arial Black’, Gadget, sans-serif | Съешь же ещё этих мягких французских булок |
| Verdana, Geneva, sans-serif | Съешь же ещё этих мягких французских булок |
| ‘Trebuchet MS’, Helvetica, sans-serif | Съешь же ещё этих мягких французских булок |
| Impact, Charcoal, sans-serif | Съешь же ещё этих мягких французских булок |
| ‘Comic Sans MS’, cursive, sans-serif | Съешь же ещё этих мягких французских булок |
| ‘Courier New’, Courier, monospace | Съешь же ещё этих мягких французских булок |
Далее о каждом шрифте подробнее:
Times New Roman
Установка шрифта
CSS свойство font-family позволяет устанавливать шрифт для текста HTML элементов.
Обратите внимание: если название шрифта состоит из нескольких слов, то оно обязательно должно заключаться в кавычки.
Безопасные шрифты
Безопасными шрифтами называют шрифты, вероятность поддержки которых на любом компьютере с любой установленной ОС близка к 100%.
Список безопасных шрифтов:
- Arial
- Arial Black
- Courier New
- Comic Sans MS
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Демонстрация шрифта Arial.
Демонстрация шрифта Arial Black.
Демонстрация шрифта Comic Sans MS.
Демонстрация шрифта Courier New.
Демонстрация шрифта Georgia.
Демонстрация шрифта Impact.
Демонстрация шрифта Times New Roman.
Демонстрация шрифта Trebuchet MS.
Демонстрация шрифта Verdana.
Обратите внимание: в CSS3 было добавлено новое свойство @font-face, позволяющее использовать на веб-страницах небезопасные шрифты. Узнать о данном свойстве больше можно здесь: CSS3 Учебник — Шрифт.
Обратите внимание: если Вы хотите использовать небезопасные шрифты, но не хотите использовать новые свойства используйте резервные шрифты, о которых рассказано далее.
Резервные шрифты
При задании шрифта для элемента Вы можете указать резервный шрифт, который будет использован в случае, если основной шрифт не установлен на компьютере пользователя.
Элементы могут также иметь несколько резервных шрифтов, которые будут поочередно перебираться пока не найдется установленный шрифт.
/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Times New Roman, если на компьютере нет Times New Roman, то будет использован Arial */ p
В качестве замыкающего резервного шрифта часто указывают семейство, к которому принадлежит основной шрифт, чтобы в крайнем случае браузер автоматически выбрал один из шрифтов данного семейства установленных на компьютере пользователя.
В CSS шрифты делятся на следующие «семейства»:
- Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
- Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
- Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
- Fantasy семейство «причудливых» шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact
- Cursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.
/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов семейства Sans-Serif имеющихся на компьютере */ p
Размер шрифта
CSS свойство font-size устанавливает размер шрифта HTML элементов. Размер шрифта можно задать двумя способами:
Абсолютный способ
Этот способ по сравнению со следующим удобнее, но его использование может привести к несоответствию при отображении одной и той же страницы в различных браузерах.
Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).
Относительный способ
Данный способ помогает избежать проблем с несоответствием при отображении страницы в разных браузерах, так как все размеры устанавливаются относительно.
Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.
Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.
Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.
Стиль шрифта
Свойство font-style позволяет сделать шрифт HTML элемента курсивным.
Свойство font-weight позволяет изменять толщину шрифта.
Сделайте сами
Задание 1 оформите элементы согласно их описанию:
1. Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей. 2. Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя. 3. Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей. 4. Данный абзац написан шрифтом Georgia и имеет размер 2.5em. 5. Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.
Wisdomweb.ru © 2023.
Все права защищены. Любое использование материалов данного сайта без разрешения администрации запрещено.
Онлайн учебники по HTML, HTML5, CSS, JavaScript, AJAX, HDOM, jQuery.
Основные шрифты
При создании сайтов, одним из основных элементов является используемый шрифт. Частенько вебмастера любят применять на сайте экзотические шрифты. Это конечно может смотреться круто, но нужно, чтобы данные шрифты были также установлены и у посетителя сайта, обычно на компьютерах у всех имеются лишь стандартные шрифты.
Поэтому, в данной статье мы рассмотрим основные шрифты, которые имеются практически на каждом компьютере. Также приведём примеры, как нужно размещать имена шрифтов, чтобы текст показался в любом случае, даже если данный шрифт отсутствует на компьютере пользователя.
Шрифты в языке CSS, назначаются элементам с помощью свойства font-family .
Список безопасных шрифтов (21 штука) и их примеры:
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif;
Обратите внимание, что сначала идёт распространённый шрифт (например Arial ), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica ), и в конце если оба эти шрифта отсутствуют, подключается serif , sans-serif , monospace или cursive (данные способы начертания шрифта есть всегда).