Как установить стиль шрифта. CSS-свойство font
Свойство font используется для оформления текста на сайте. Оно позволяет задавать различные атрибуты шрифта: размер, начертание, жирность, стиль и цвет.
Свойство в общем виде записывается так:
selector
font-family — устанавливает семейство шрифтов.
font-style — задаёт стиль шрифта.
font-variant — определяет вариант шрифта.
font-weight — задаёт жирность шрифта.
font-size — указывает размер шрифта.
line-height — задаёт высоту строки.
Значения и примеры использования
Font-family
В значении свойства font-family указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем альтернативный, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт.
Font-style
Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .
Font-variant
У свойства font-variant несколько значений:
normal — обычный текст;
small-caps — все строчные символы отображаются как заглавные уменьшенного размера.
.small-caps
Font-weight
Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .
Возможные значения font-weight :
- 100: Thin;
- 200: Extra Light (Ultra Light);
- 300: Light;
- 400: Normal;
- 500: Medium;
- 600: Semi Bold (Demi Bold);
- 700: Bold;
- 800: Extra Bold (Ultra Bold);
- 900: Black (Heavy).
Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).
.bold
Font-size
Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).
Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.
.one < font-style: normal; font-size: xx-large; >.two
Line-height
Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.
Наследование
Свойство font наследуется от родительского элемента на его дочерние элементы.
Нюансы
✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.
p < font-family: 'Arial'; font-size: 16px; line-height: 26px; >.two
✅ Если указанное семейство шрифтов не доступно на устройстве пользователя, браузер будет искать и использовать следующий указанный шрифт из списка или использовать шрифт по умолчанию.
⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.
Чем заменить свойство font
Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .
Материалы по теме
- Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration
- Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
- Текст с новой строки в HTML. Все способы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
Что такое CSS?
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Как подключить CSS к HTML
Есть несколько способов использования CSS внутри HTML:
Внутренний CSS: внутри раздела HTML-документа, в теге :
Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :
Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.
Этот текст будет красного цвета.
Основы синтаксиса CSS
CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.
/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >Работа с цветом и фоном
Одни из самых основных свойств в CSS — это цвет и фон элементов.
color меняет цвет текста:
background-color меняет фоновый цвет элемента:
Типографика и шрифты
CSS позволяет нам контролировать шрифты на странице:
- font-family задаёт шрифт текста, даже если он нестандартный.
- font-size определяет размер текста.
- font-weight устанавливает жирность шрифта.
Блочная модель
Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .
Внутренние и внешние отступы одной картинкой:
Позиционирование и Flexbox
Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.
.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >Адаптивный дизайн
С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.
@media (max-width: 600px) < .container < flex-direction: column; >> Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ������
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023
Шрифты HTML — свойства и способы изменения
Что это такое? Шрифты в HTML-документе – то, что меняют во время верстки. Изменению подвергают размер, цвет и гарнитуру. Также можно выбрать готовый шрифт, в каждой ОС свой список доступных вариантов.
Как работать? Для изменения шрифта используют теги и , хотя первый уже устарел и применяется редко. Они назначают свойства: курсив, наклонный текст, с жирным начертанием и т. д.
В статье рассказывается:
- Что может делать HTML со шрифтами
- Свойства шрифтов в HTML
- Таблицы шрифтов в HTML
- Русскоязычные шрифты и их поддержка
- Как изменить шрифт в HTML
- Как изменить размер шрифта в HTML
- Изменение гарнитуры шрифта в HTML
- Часто задаваемые вопросы о шрифтах в 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 ₽
Получить подборку бесплатно
Уже скачали 24088
На сегодняшний день шрифты можно изменить только в 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 |
Для вас подарок! В свободном доступе до 26.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: для размера.
Только до 23.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 в нашем примере оказался пятого размера.
Но вначале же он был третьего размера, удивитесь вы. Да, это так, но мы изменили его. Последний шаг — установка абсолютного размера шрифта в целью убедиться, что всё работает как задумано.
font — size
Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.
Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, а этот текст в 1.5 раза больше, чем в родительском контейнере.div class="parent"> Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, span class="child"> а этот текст в 1.5 раза больше, чем в родительском контейнере. span> div>
.parent font-size: 1.5em;> .child font-size: 1.5em;>.parent font-size: 1.5em; > .child font-size: 1.5em; >
А вот как сочетается значение em , когда родительский элемент задан в процентах.
Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62 . 5 % . Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.
Здесь основной текст такой же, как в стандартных настройках браузера, а эта фраза в 1.6 раз больше, чем основной текст.div> span> Здесь основной текст такой же, как в стандартных настройках браузера, span>а эта фраза в 1.6 раз больше, чем основной текстspan>. span> div>
Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта будет 10 * 1.6 = 16px:
html font-size: 62.5%;> span font-size: 1.6em;>html font-size: 62.5%; > span font-size: 1.6em; >
Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem .
Теперь один контейнер находится внутри другого, но относительный размер текста больше не зависит от родительского элемента.span> Теперь один контейнер находится span>внутри другогоspan>, но относительный размер текста больше не зависит от родительского элемента. span>
Размер 1em равен 16px, как в стандартных настройках браузера:
html font-size: 100%;> span font-size: 2rem;>html font-size: 100%; > span font-size: 2rem; >
И ещё три примера, как можно задать размер шрифта.
Текст параграфа будет очень большим:
p font-size: xx-large;>p font-size: xx-large; >
Заголовок будет в 2.5 раза больше, чем текст вокруг него:
h1 font-size: 250%;>h1 font-size: 250%; >
Размер текста внутри тега будет равен 16px, независимо ни от чего:
span font-size: 16px;>span font-size: 16px; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если не задать никакое значение font — size , то браузер использует размер по умолчанию. Обычно это 16px .
�� У font — size не бывает отрицательных значений.
�� Размер шрифта наследуется.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Для использования относительных единиц измерения — em , rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.
�� Если в вёрстке используются строчно-блочные ( inline — block ) элементы, то не забывай задавать родителю свойство font — size со значением 0 .
Между строчно-блочными ( inline — block ) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.
�� Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.
Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.
Свойства font-size и line-height
Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
font-size и line-height
- font-size – размер шрифта, в частности, определяющий высоту букв.
- line-height – высота строки.
Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
body Ёрш р Ёрш ЁРазмер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.
Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».
В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.
В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.
Обычно размер строки делают чуть больше, чем шрифт.
По умолчанию в браузерах используется специальное значение line-height:normal .
Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).
Множитель для line-height
Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.
Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .
Однако, между множителем и точным значением есть одна существенная разница.
- Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
- Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Давайте посмотрим, как это выглядит, на примерах:
стандартная строка шрифт в 2 раза больше
шрифт в 2 раза больше