Установка шрифта
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) или проценты (%).
p.fz1 p.fz2 p.fz3
Быстрый просмотр
Относительный способ
Данный способ помогает избежать проблем с несоответствием при отображении страницы в разных браузерах, так как все размеры устанавливаются относительно.
Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.
Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.
p.fz1 p.fz2 p.fz3
Быстрый просмотр
Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.
Стиль шрифта
Свойство font-style позволяет сделать шрифт HTML элемента курсивным.
Свойство font-weight позволяет изменять толщину шрифта.
p.italic p.fz1
Быстрый просмотр
Сделайте сами
Задание 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.
Как скачать и установить шрифты в html?
Мне нужно скачать эти шрифты, что-бы они нормально отображались при оффлайн работе. Как это можно сделать?
UPD: В гугле адекватной инфы кроме подключения по ссылке не нашёл.
- Вопрос задан 03 дек. 2022
- 310 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
и в том духе скажу, что адекватной инфы кроме подключения по ссылке на нашёл
Ну значит, точно имеет смысл всё таки научиться.
Первые две точно нормальные.
В следующий уже про ttf — это лишнее, но сути не меняет.
Актуальные форматы woff2 и woff.
Решения вопроса 3
Когда у меня встала такая задача, я загнал шрифт в CSS файл.
@font-face < font-family: 'My Super Font'; src: url('data:application/octet-stream;base64,тут-идёт-woff-файл-шрифта-в-base64') format('woff'); font-weight: normal; font-style: normal; >Ну и конечно, можно загнать сам CSS внутрь HTML через тег style. Хотя это изврат будет.
Ответ написан 03 дек. 2022
Комментировать
Нравится 1 Комментировать
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
Как скачать?
Там же, в гугл шрифтах
В архиве будут все начертания и подтипы шрифта в ttf или otf формате (для компьютера).
Далее идёте на уже упомянутый transfonter и конвертируете нужные начертания в woff/woff2 форматы, скачиваете полученный пак и подключаете (внутри будет подготовленный css файл для подключения).
Ответ написан 03 дек. 2022
Нравится 1 3 комментария
Nik Faraday @NikFaraday Автор вопроса
Сергей delphinpro, допустим, у меня есть уже готовая ссылка, которая шла с темплейтом, типа такой, что я кинул в вопросе. Что мне с ней делать?
Сергей delphinpro @delphinpro Куратор тега CSS
Nik Faraday, вы видите в этой ссылке название шрифта. Ищите этот шрифт для скачивания. Многое доступно на гугл-фонтс. Первым делом идите туда. Я показал на скрине страницу шрифта OpenSans и кнопку для его скачивания.
Скачаете архив. В архиве будут шрифты в ttf формате в разных начертаниях.
Выбираете начертания Regular (400) и SemiBold (600) и их курсивные варианты. Четыре файла.
Загружаете эти ttf файлы в сервис конвертации в веб формат (transfonter).
Сервис выдаст вам архив с конвертированными шрифтами для web в форматах woff и woff2. Их уже можно подключать на сайт. Также сервис предоставит вам образец css файла с примером подключения шрифта.
Далее загружаете эти файлы на ваш сайт, в примере подключения исправляете пути к загружаемым шрифтам в соответствии с тем, как вы их расположили на своем сайте и пользуетесь.
Блин, писать пришлось дольше, чем всё это сделать.