Размер шрифта в CSS
После моей статьи на прошлой неделе, где я кратко рассказываю о задании размеров в CSS в пикселях, я решила рассмотреть различные способы задания размера шрифта в CSS.
Знакомство с единицами измерения
Есть несколько различных способов, которыми вы можете объявить размер шрифта в CSS. Вообще говоря, все единицы измерения попадают в одну из двух категорий — абсолютные и относительные.
Абсолютные единицы фиксированы и (в основном) относятся к какому-то физическому измерению. Когда они объявлены, их размер не может быть изменен путем изменения размера шрифта какого-либо другого элемента.
Относительные единицы не имеют объективного измерения. Вместо этого, их фактический размер определяется размером родительского элемента. Это означает, что их размер может быть изменен путем изменения размеров родительского элемента.
Вот краткое описание некоторых единиц измерения:
| Единица измерения | Тип | Описание |
|---|---|---|
| px | Абсолютная | 1 пиксель |
| pt | Абсолютная | 1 point равен 1/72 дюйма |
| pc | Абсолютная | 1 pica равна 12 points |
| % | Относительная | Определяется относительно размера шрифта родительского элемента |
| em | Относительная | Определяется относительно размера шрифта родительского элемента |
| rem | Относительная | (root em) Определяется относительно размера шрифта элемента html |
| keyword | Относительная | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Относительная | 1/100 ширины области просмотра |
| vh | Относительная | 1/100 высоты области просмотра |
| vmin | Относительная | 1/100 меньшего из измерений области просмотра (высоты или ширины) |
| vmax | Относительная | 1/100 большего из измерений области просмотра (высоты или ширины) |
Вы можете посмотреть полный список единиц измерения здесь , но я остановлюсь на наиболее актуальных — px, pt, %, em, rem и vw.
В чем разница?
Разница между этими единицами измерения может быть сложна для понимания, поэтому лучше всего продемонстрировать ее на примерах.
Пример 1 — настройки по умолчанию
В чистом HTML документе, без каких-либо настроек размера шрифта, используются настройки по умолчанию. В большинстве браузеров, размер шрифта по умолчанию у элементов html и body равен 100%. Это эквивалентно следующему:
100% = 1em = 1rem = 16px = 12pt
Это означает, что если вы зададите одному элементу <p> размер шрифта равный 100%, а другому — 16px, они будут выглядеть на экране одинаково. Это показано на рисунке ниже:
Пример 2 — абсолютные и относительные единицы измерения
Разница между абсолютными и относительными единицами измерения может быть продемонстрирована с помощью изменения размера шрифта элемента html. Если мы установим html { font-size: 200% }, это повлияет только на те элементы <p>, для которых размер шрифта задан в относительных единицах.
В этом состоит ключевое преимущество использования относительных единиц измерения. Имея такую простую возможност масштабирования, вы можете создать по-настоящему адаптивный сайт, просто изменяя размер шрифта элемента html. Макс Ластер приводит отличный пример .
Пример 3 — rem vs em (и %)
Размер шрифта в em (и в %) рассчитывается относительно размера шрифта родительского элемента. Например:
html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ }
Поскольку размер шрифта элемента p наследуется от body, а body от html, размер шрифта p оказывается в два раза больше, чем мы могли ожидать.
При использовании единицы измерения em, вы должны принимать во внимание размер шрифта всех родительских элементов. Как вы можете видеть, это может довольно быстро стать сложным.
Решением этой проблемы является rem. Единица измерения rem рассчитывается только на основе размера шрифта элемента html, а не родительского элемента. Например:
html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ }
Использование rem позволяет вам использовать такие же возможности масштабирования, как с em и %, но без проблем с вложенностью.
Пример 4 — единицы измерения на основе ширины области просмотра
Единица измерения vw, новая единица измерения CSS3 , рассчитывается на основе ширины области просмотра. Это позволяет задавать размер шрифта более отзывчиво.
И хотя кажется, что это отличная единица измерения для адаптивного дизайна, я лично не являюсь ее поклонником. Она не дает мне достаточно контроля для задания размера шрифта, который почти всегда получается либо слишком большим, либо слишком маленьким.
Мой способ
До того, как я провела это исследование, я задавала размер шрифта только в пикселях. В настоящее время большинство браузеров позволяют пользователям увеличить размер шрифта, поэтому проблемы с доступностью нет.
Тем не менее, я нахожу этот метод довольно ограниченным в плане способности к масштабированию. Хотя мои размеры шрифтов выглядят хорошо на средних и малых экранах, их можно оптимизировать для более крупных. Даже если пользователи имеют возможность увеличить размер шрифта, это не то, что они должны делать.
Мой способ заключается в использовании rem (и пикселей в качестве запасного решения).
html { font-size: 62.5%; /* sets the base font to 10px for easier math */ } body { font-size: 16px; font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */ } h2 { font-size: 32px; font-size: 3.2rem; }
Это позволяет мне масштабировать размер шрифта, просто написав:
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
Этот метод использует пиксели в качестве запасной единицы измерения, поскольку rem не поддерживается IE8 и ниже. Проблема такого решения заключается в том, что масштабирование с помощью изменения размера шрифта родительского элемента не затрагивает запасной размер. Тем не менее, я не считаю, что это огромная проблема, потому что возможность масштабирования для больших устройств является скорее дополнительной функцией.
Если у вас есть какие-либо идеи о том, как я могу улучшить этот способ, дайте мне знать. Я хочу также написать SCSS миксин для того, чтобы не приходилось каждый раз писать размер шрифта и в пикселях, и в rem.
getinstance.info
Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»
Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно:
Для визуализации веб-страниц, вы можете управлять размером шрифта по своему усмотрению, к примеру, увеличивая шрифт для той информации, на которой необходимо акцентировать внимание пользователя, либо уменьшая шрифт, если информация, по Вашему мнению, не является приоритетной.
В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:
Селектор {
font-size: значение с единицей измерения величины;
{
Обращаю Ваше внимание, что при использовании свойства font-size необходимо всегда указывать положительные единицы измерения величины, при этом, вы не должны указывать пробел между числом и единицей измерения:
p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{
В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.
Абсолютные величины
Физические единицы:
- Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
- Сантиметры (cm), 1cm = 96px/2.54.
- Миллиметры (mm), 1mm = 1/10 от 1cm.
- Четверть миллиметра, (q) 1q = 1/40 от 1cm.
- Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
- Пункты (pt), 1pt = 1/72 дюйма.
Как вы можете заметить, к абсолютным величинам относятся дюймы, сантиметры, миллиметры, пики и пункты. Как правило, абсолютные величины используются только в печати (предназначены для использования совместно с устройствами вывода), так как отображение информации будет отличаться в зависимости от монитора, поэтому они имеют очень скудное применение на веб-страницах.
В некоторых случаях, если Вам необходимо составить таблицу стилей, для тех страниц сайта, которые предназначены не только для просмотра, но и для печати, вы можете использовать такую величину как пункты,
Визуальные единицы:
Пиксели (px), 1px = 1/96 от 1in (дюйма).
body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}
Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя. Конечное отображение информации происходит именно в пикселях, которые подгоняет веб-браузер пользователя.
С развитием мобильных устройств, нам стали доступны экраны, которые содержат большое количество пикселей, но при этом сами по себе намного меньше настольных мониторов, в этом случае для обеспечения комфортного чтения с экрана, браузер может применять масштабирование.
К недостаткам использования единицы измерения пиксель относится то, что они не позволяют изменять масштаб для слабовидящих пользователей.
Относительные единицы
Процентные значения.
Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).
html {
font-size: 16px;
}
Как вы можете догадаться, процентные значения высчитываются относительно значения свойства родительского элемента. Независимо от основного размера шрифта, он будет эквивалентен 100%.
Давайте рассмотрим пример. Допустим, у всех параграфов (элемент <p>) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):
<!DOCTYPE html>
<html>
<head>
<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%;
}
.doubleFontSize {
font-size: 200%;
}
</style>
</head>
<body>
<p>Обычный параграф на странице</p>
<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.</p>
</body>
</html>
Результат нашего примера:
Рис.51 Пример использования процентных значений.В данном примере базовый размер шрифта текста не изменялся, и расчет процентных значений происходил следующим образом для параграфов:
Первый параграф: 16px * 100% = 16px Второй параграф: 16px * 50% = 8px Третий параграф: 16px * 200% = 32px
При работе с процентными значениями обратите Ваше внимание на то, что все вложенные элементы наследуют значения и используют их для вычисления своих размеров шрифтов. Что это значит, разберем в примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример наследования процентных значений</title>
<style>
div {
font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */
}
.doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */
font-size: 200%;
}
.doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */
font-size: 200%;
}
</style>
</head>
<body>
<div>Родительский div 12px
<div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента.
<div>Блок, который наследует значение</div>
</div>
</div>
</body>
</html>
Результат нашего примера:
Рис.52 Пример наследования процентных значений.В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.
Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:
12px * 200% = 24px
Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:
16px(базовый размер шрифта) * 200% = 32px
Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.
Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:
размер шрифта родительского элемента * 200% = 48px
Единица измерения еm.
Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.
Если вы внимательно отнеслись к изучению использования и наследования процентных значений, то вы быстро сможете освоить работу с такой единицей измерения как em.
В CSS значение em относится к базовому размеру шрифта текста. Сейчас Вы можете подумать, что алгоритм работы значения em функционируют аналогично с процентными значениями и будете практически правы.
Например:
базовый размер текста = 1em = 100% базовый размер текста * 2 = 2em = 200% базовый размер текста * 0.5 = 0.5em = 50%
Обращаю Ваше внимание, что при работе, как с процентными значениями, так и со значениями em, вложенные элементы наследуют значения и используют их для вычисления своего размера шрифта.
<!DOCTYPE html> <html> <head> <title>Пример использования значений em</title> </head> <body> <p style = "font-size:.8em;">font-size:0.8em</p> <p style = "font-size:80%;">font-size:80%</p> <p style = "font-size:1.5em;">font-size:1.5em</p> <p style = "font-size:150%;">font-size:150%</p> <p style = "font-size:1.8em;">font-size:1.8em</p> <p style = "font-size:180%;">font-size:180%</p> </body> </html>
Результат нашего примера:
Рис.53 Пример использования значений em.Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.
Единица измерения rеm.
Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента. Чтобы окончательно понять, давайте рассмотрим сравнение на примерах:
<!DOCTYPE html>
<html>
<head>
<title>Пример наследования значений em</title>
<style>
div {
font-size: 1.25em;
}
</style>
</head>
<body>
<div>Блок 1
<div>Блок 2
<div>Блок 3
<div>Блок 4
<div>Блок 5
<div>Блок 6
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25em. В результате сработали правила наследования стилей и для каждого последующего вложенного блока, родительский блок становится базовым, что в дальнейшем сказывается на расчете размера шрифта, исходя из размера шрифта родительского элемента. Как вы понимаете, с каждым вложенным блоком увеличивается размер шрифта.
Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂
Рис.54 Пример наследования значений em.Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования значений rem</title>
<style>
div {
font-size: 1.25rem;
}
</style>
</head>
<body>
<div>Блок 1
<div>Блок 2
<div>Блок 3
<div>Блок 4
<div>Блок 5
<div>Блок 6
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem. В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.
В этом и заключается замечательная особенность этой единицы измерения, которая предназначена для тех, кто не готов бросить вызов неожиданно появившихся наследований стилей.
Рис.55 Пример использования значений rem.Обе вышерассмотренные единицы измерения имеют широкое применение среди разработчиков, но при этом имеют как сильные, так и слабые стороны. С опытом вы определите для себя те критерии, когда необходимо использовать ту или иную единицу измерения в зависимости от возникших обстоятельств.
Единица измерения еx.
Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.
В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.
Единица измерения ch.
Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:
.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}
Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.
Масштабируемые величины относительно экрана
С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).
Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.
В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:
1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.
Рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<title>Масштабируемые единицы измерения</title>
<style>
* {
margin: 0 ; /* внешние отступы для всех сторон*/
}
.viewportHeight30 {
font-size: 5vw; /* размер шрифта*/
width: 100vw; /* ширина блока */
height: 30vh; /* высота блока */
background-color: orange; /* цвет заднего фона */
}
.viewportHeight50 {
font-size: 4vw;
width: 75vw;
height: 50vh;
background-color: yellow;
}
.viewportHeight20 {
font-size: 3vw;
width: 50vw;
height: 20vh;
background-color: red;
}
</style>
</head>
<body>
<div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div>
<div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div>
<div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div>
</body>
</html>
В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).
Попробуйте изменить размер окна Вашего браузера, как видите, пропорции будут соблюдены для всех заданных нами параметров, что не может не радовать.
Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).
Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».
Результат нашего примера:
Рис.57 Масштабируемые единицы измерения.Минимальное и максимальное значение области просмотра
Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:
1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.
1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.
Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:
.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }
<!DOCTYPE html>
<html>
<head>
<title>Vmin и vmax c масштабируемыми единицами измерения</title>
<style>
* {
margin: 0;
}
div {
display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта*/
}
.viewportMin {
width: 40vmin; /* ширина блока */
height: 40vmin; /* высота блока */
background-color: black; /* цвет заднего фона */
}
.viewportMax {
width: 40vmax; /* ширина блока */
height: 40vmax; /* высота блока */
background-color: blue; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = "viewportMin">viewportMin<br>w&h - 40vmin</div>
<div class = "viewportMax">viewportMax<br>w&h - 40vmax</div>
</body>
</html>
В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.
Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:
400px (текущее минимальное значение viewport области просмотра) * 40% = 160pxДля высоты расчёт аналогичен:
400px (текущее минимальное значение viewport) * 40% = 160px.
В итоге мы получили «квадрат Малевича».
Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:
Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.
Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.
Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:
- Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
- Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
- IE работает только с версии 9.0 (поддерживает значение vm, вместо vmin).
- IE 10, IE 11 не поддерживают значение vmax.
- Edge 12, 13, 14 не поддерживают значение vmax.
Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.
Например:
i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */
}
Полный перечень возможных ключевых слов с расшифровкой размещен в следующей таблице:
| Значение | Описание |
|---|---|
| medium | Устанавливает размер шрифта среднего размера. Это значение по умолчанию. |
| small | Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов). |
| x-small | Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов). |
| xx-small | Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов). |
| smaller | Устанавливает размер шрифта меньшего размера, чем у родительского элемента. |
| large | Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов). |
| x-large | Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов). |
| xx-large | Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов). |
| larger | Устанавливает размер шрифта большего размера, чем у родительского элемента. |
Рассмотрим пример использования ключевых слов на странице:
<!DOCTYPE html>
<html>
<head>
<title>Ключевые слова для управления размером шрифта</title>
<style>
.medium {font-size: medium;}
.small {font-size: small;}
.x-small {font-size: x-small;}
.xx-small {font-size: xx-small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
.x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
.larger {font-size: larger;}
</style>
</head>
<body>
<div class = "medium">Блок с ключевым словом medium</div>
<div class = "small">Блок с ключевым словом small</div>
<div class = "x-small">Блок с ключевым словом x-small</div>
<div class = "xx-small">Блок с ключевым словом xx-small
<div class = "smaller">Блок с ключевым словом smaller</div>
</div>
<div class = "large">Блок с ключевым словом large</div>
<div class = "x-large">Блок с ключевым словом x-large</div>
<div class = "xx-large">Блок с ключевым словом xx-large
<div class = "larger">Блок с ключевым словом larger</div>
</div>
</body>
</html>
В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).
Результат нашего примера:
Рис.59 Использование ключевых слов для управления размером шрифта.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:
- Практическое задание № 13
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:body, div { /* создаем групповой селектор */ font-size: 150%; /* устанавливает размер шрифта 150% */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее). - Практическое задание № 14
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:body, div { /* создаем групповой селектор */ font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее). - Практическое задание № 15
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:body, div { /* создаем групповой селектор */ font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */ }Сделаем следующую разметку:<body>Текст внутри тела документа <div>Текст внутри блока <div>Текст внутри вложенного блока</div> </div> </body>
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
© 2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]
basicweb.ru
Размер шрифта в CSS
На прошлых уроках мы научились правильно подключать шрифты, задавать их цвет и семейство. Казалось бы, что еще нужно для счастья начинающего веб-мастера?
Однако, не одним цветом все решается. Как вы думаете, какой технический момент больше всего влияет на удобство восприятия текстового контента сайта?
Думаю, скорее всего вы скажете — «Размер шрифта!», и будете правы. Чем более удобного кегля шрифт вы подобрали, тем приятнее читать текст на вашем сайте. Возражаете? А как вам такой размер текста? Неудобно??
И какой бы экспертный и интересный ни был контент, если у вас слишком мелкие шрифты на сайте, ваши поведенческие факторы упадут, или проще говоря, ваш сайт перестанет пользоваться спросом у простого населения, не имеющего под рукой лупу.
Итак, как вы наверное догадались, в данном CSS уроке мы учимся управлять размером шрифта. Готовы? Тогда начинаем!
Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]
Возвращаемся к истокам или сила 16 пикселей
Прежде всего стоит сказать, что вам необязательно управлять размером шрифта во всех элементах веб-страницы, потому как они по умолчанию отображаются в размере 16 пикселей. Данный размер кегля является, на мой взгляд, оптимальным значением.
Заголовки по умолчанию выводятся уже большим размером. Однако, часто для более эффективного управления вниманием пользователя необходимо изменять размеры шрифтов тех или иных элементов веб-страницы. Этим мы и займемся в данном уроке, а также более детально познакомимся с разными измерениями размера шрифта.
Свойство, отвечающее за размер шрифта
Размер текста мы изменяем при помощи простого свойства font-size. Например, для отображения всех шрифтов в размере 16 пикселей мы создаем следующее правило CSS:
body {font-size: 16px;}Обратите внимание, что после свойства мы указываем размер шрифта в числовом варианте и сразу же после него, без пробела прописываем систему измерения, в частности, пиксели. Однако, правило выше зачастую будет бесполезным, так как уже отмечалось, весь текст веб-страницы по умолчанию выводится в размере 16 пикселей.Пиксели
Все системы измерения шрифтов я разделяю на две группы — абсолютные и относительные. Вам возможно немного непонятно данное разделение, но я постараюсь объяснить.
Под абсолютным я имею в виду такие значения, которые не изменяются в зависимости от контекста. Например, давайте зададим тегу body размер шрифта в 18 пикселей.
body {font-size: 18px;}Размер текста на нашей веб-странице теперь увеличился на 2 пикселя (18-16). Следующим шагом я предлагаю задать параграфам размер шрифта в 14 px.
p {font-size: 14px;}Теперь, все параграфы на нашей веб-странице отображаются размером в 14 пикселей, и не важно какие значения имеют другие элементы веб-страницы. То есть, в этом случае элемент p имеет абсолютное значение.Если вернуться к терминологии, то можно сказать что пиксели — это определенные точки на экране, с помощью которых передается зрительная информация. Когда мы говорим — «Размер шрифта равен 16 пикселям» — мы имеем в виду что на отрисовку шрифта уходит 16 точек (пикселей).
Однако, вы можете спросить, как тогда быть с Retina дисплеями, ведь они имеют более 200 пикселей на дюйм, в то время как обычные мониторы в два раза меньше. Я же отвечу, что вам не о чем беспокоиться, ведь браузеры для Retina мониторов увеличивают шрифт в 2 раза.
Например, если мы через таблицу стилей задаем размер текста в 20 пикселей, браузер увеличит данное значение до 40 пикселей, в случае с Retina дисплеями. Хочу отметить, что задание размеров текста в пикселях является наиболее распространенным и универсальным методом. Я также предпочитаю данный метод всем остальным.
Но, как бы там ни было, будет не лишним познакомить вам с заданием кегля шрифта при помощи ключевых слов, процентов и единиц измерения. Эти значения также имеют свои плюсы.
Ключевые слова
Помимо вышеназванного метода, у нас есть возможность управлять размером шрифта при помощи следующих ключевых слов — medium (16px), small (13px), x-small (10px), large (18px), x-large (24px). За базовое значение берется medium.
Хочу подчеркнуть, что базовые значения всех единиц измерения равняются 16 пикселям, хотя обозначаются по-разному. Если вы хотите задать тексту больший размер, можно указать значение large (18px) или x-large (24px). Если хотите меньше, указываете small (13px) или x-small (10px). Вот как это выглядит на практике:
p {font-size: large;}
ol {font-size: small;}Всем абзацам мы придали размер текста в 18px, а всем нумерованным спискам — 13px. Вам никто не запрещает использовать ключевые слова при оформлении сайта, однако, в таком случае у вас нет большой гибкости.Например, вдруг вы захотите изменить размер текста на 15px? В этом случае ключевыми словами дело не решить. Нужно применять обозначения в виде пикселей, либо в виде процентов и единиц измерения, с которыми мы познакомимся далее.
Процентные значения
Процентные значения я отношу к относительным системам задания размера шрифта, и сейчас вы поймете почему. Дело в том что у нас базовый кегль шрифта равен 16px, которое по-другому можно обозначить как 100%. В случае если нам необходимо увеличить размер всего текста веб-страницы на 10%, мы создаем следующее CSS правило:
body {font-size: 110%;}В правиле выше мы указали в процентном отношении размер всего текста веб-страницы. Он увеличился на 10% относительно 16px. Если нам нужно увеличить шрифт в два раза, то вместо 110% мы указываем 200%. Если нам нужно уменьшить текст абзацев на 30 процентов, мы пишем следующее CSS правило:
p {font-size: 70%;}В общем, все просто и думаю у вас не возникло никаких трудностей с пониманием работы данного метода. Однако, есть одна особенность, которую я бы хотел осветить, и которую очень часто люди упускают из виду. Дело в том что за базовое значение берется не всегда 16px, а берется размер текста родительского элемента. Например, давайте зададим всем нумерованным спискам размер текста в 80%, а затем создадим один список вложенный в другой.
ol {font-size: 80%;}Теперь, наш нумерованный список первого уровня будет на 20 процентов меньше 16 пикселей, а это примерно 13 пикселей. А вложенный в него список, будет меньше на 20 процентов не 16 пикселей, а будет меньше размера родительского элемента, то есть 13 пикселей. Значит, текст списка второго уровня будет примерно 10 пикселей. 
Размер шрифта вложенного списка относительно родителяЭтот момент часто не учитывают начинающие веб-мастера и получают на выходе не совсем то, что ожидали. Вот такая вот история.
Единица измерения em
Данный метод очень похож на предыдущий, с той лишь разницей что вместо 100% у нас выступает значение в 1em. Для увеличения всего текста на 20 процентов мы создаем следующее CSS правило:
body {font-size: 1.2em;}Как и в предыдущем примере, у нас 1em равен 16 пикселям, и можно сказать что он также равен 100%. Для уменьшения размера текста всех нумерованных списков на 15 процентов мы создаем следующее CSS правило:
ol {font-size: .85em;}Думаю, в данной системе обозначений нет ничего сложного и вам все понятно. Не удивлюсь, если вы в мыслях сравниваете меня с пестрым попугаем, который повторяет одно и то же. Однако, прошу не быть столь строгим к вашему товарищу, ведь я лишь пытаюсь наиболее понятно объяснить все детали, чтобы у вас не возникло никаких сложностей при верстке сайта.Итак, как и в предыдущем способе задания размера шрифта, у нас есть проблема с размером родительского элемента. Вы ведь еще помните про вложенный нумерованный список? Так вот, для решения данной проблемы как вариант мы можем создать следующее CSS правило:
ol ol {font-size: 100%;}При помощи записи выше, мы задали вложенному списку 100 процентное, то есть такое же значение размера шрифта как и у родителя. Однако, такой метод решения проблемы не является панацеей, ведь у нас могут быть элементы большей вложенности, и я говорю не только о теге .Тем не менее спешу вас обрадовать что в CSS 3 появился новый метод задания размера шрифта, который обозначается как rem (root em). Данное значение будет брать за базовый размер величину корневого элемента, то есть тега html, которое равняется 16 пикселям. Таким образом, мы можем создать следующее CSS правило:
ol {font-size: .85rem;}В этом случае, вложенный список второго уровня будет на 15 процентов меньше корневого значения (16px). Единственным недостатком в использовании единицы обозначения rem является то, что его не понимает браузер Internet Explorer 8 и более ранних версий, а во всем остальном он просто идеален.Ну что ж, в заключение хочу сказать о моем предпочтении использовать обозначение размера шрифта в пикселях, ведь оно является абсолютной величиной, и дает большую гибкость.
При необходимости использовать относительные величины, можно присмотреться к процентам и em. Ну а если вам безразличны браузеры IE 8 и более ранние версии, лучше тогда использовать значение rem. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
site4business.net
font-size — размер текста | CSS справочник
Поддержка браузерами
| 12.0+ | 5.5+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
CSS свойство font-size позволяет увеличивать или уменьшать размер текста. Установка размера текста, в свою очередь, может изменить размеры других элементов, так как размер текста используется для вычисления значения таких единиц измерения как em и ex.
Примечание: для изменения цвета текста используется CSS свойство color, для изменения стиля — font-style, для выравнивания — text-align, а для добавления тени — text-shadow.
| Значение по умолчанию: | medium |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.fontSize=»larger» |
Синтаксис
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| xx-small | Сверх мелкий размер шрифта. |
| x-small | Очень маленький размер шрифта. |
| small | Маленький размер шрифта. |
| medium | Средний размер шрифта. |
| large | Большой размер шрифта. |
| x-large | Очень большой размер шрифта. |
| xx-large | Огромный размер шрифта. |
| smaller | Маленький размер шрифта в сравнении с родительским элементом. |
| larger | Большой размер шрифта в сравнении с родительским элементом. |
| размер | Указания размера с помощью единиц измерения, используемых в CSS. |
| % | Определение размера шрифта в процентом соотношении от родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Попробуйте изменить размер текста, кликнув на нужное значение.
div {
font-size: xx-small;
}
puzzleweb.ru
css размер шрифта
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать шрифт в CSS. В данной статье я бы хотел рассказать, как задать размер шрифта в CSS. Если размер шрифта не задавать, то браузер будет отображать текст стандартным размером шрифта (каким — узнаете ниже). Размер шрифта задаётся с помощью свойства font-size. Существуют следующие способы задания размера шрифта:
- large, medium, small — с помощью ключевых слов
- px — в пикселях
- pt — в пунктах
- % — в процентах
- em — в единицах
Браузер по умолчанию отображает размер шрифта следующим образом:
- medium
- 16px
- 12pt
- 100%
- 1em
Т.е все эти 5 значений равны между собой. Убедитесь в этом сами, задав размер шрифта любым из этих 5 способов.
Давайте создадим тестовую html-страницу.
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p>Первый абзац данного текста</p> <p>Второй абзац данного текста</p> </body> </html>
Допустим мы хотим увеличить размер шрифта и задать его в процентах. Для этого в файле стилей style.css необходимо написать:
p {
font-size:120%;
}
Обновите страницу и вы увидите, что базовый размер шрифта увеличился. Если вы хотите уменьшить размер шрифта, то соответственно, нужно указывать число, меньшее базового размера. Давайте зададим размер шрифта в единицах. Данная единица измерения пришла из книгопечатания (1em = 100%):
p {
font-size:0.7em;
}
Вы увидите, что шрифт уменьшился. Как и проценты, данная единица хорошо масштабируется.
На своих сайтах я обычно задаю размер в пикселях (px). Раньше считалось, что браузеры плохо масштабируют пиксели. На данный момент все современные браузеры очень хорошо справляются с этой задачей.
В пунктах обычно размер не задают (очень редко где встречал, да и смысла в этом нет, когда есть другие хорошие способы). Один пункт равен 0,35 миллиметра.
Ключевые слова large, medium, small встречаются крайне редко. Если нужно ещё меньше, чем small, то можно писать x-small или xx-small (что ещё меньше). То же самое и для large.
Домашнее задание: создайте тестовую html-страницу и задайте размер шрифта с помощью всех 5 способов.
В данной статье вы узнали, как задать размер шрифта в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Следующая статья >
alekseygulynin.ru
Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS
Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size, для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:
/* в процентах: */
h2 {
font-size: 100%;
}
/* в единицах измерения em: */
h3 {
font-size: 1em;
}
/* в пикселях: */
h4 {
font-size: 18px;
}
/* с помощью ключевого слова: */
p {
font-size: small;
}
Размер шрифта в пикселях
Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:
font-size: 24px;
Размер шрифта в процентах
Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:
p {
font-size: 100%;
}
/* ...то же самое, что и значение в браузере по умолчанию: */
p {
font-size: 16px;
}
Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.
Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.
Единица измерения em
По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:
font-size: 0.9em; /* перед точкой можно опустить ноль: */ font-size: .9em;
Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:
Скриншот: наследование значений размеров шрифтовВ качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem, которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.
Ключевые слова
Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:
| Ключевое слово | Размер в пикселях |
|---|---|
| xx-small | 9px |
| x-small | 10px |
| small | 13px |
| medium | 16px |
| large | 19px |
| x-large | 24px |
| xx-large | 32px |
Как видим, значение medium соответствует базовому размеру шрифта 16px. Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.
Завершение
В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.
Читайте далее: как установить жирный шрифт и курсив в CSS.
idg.net.ua
Меняем размер текста CSS-стилями | Impuls-Web.ru
Приветствую вас на сайте Impuls-Web!
Добавляя на страницы сайта какой-то текст, мы обязательно сталкиваемся с необходимостью оформления текста в соответствии с общим дизайном. Одним из основных параметров, влияющих на читабельность и восприятие текста, является его размер.
В этой статье я хочу с вами поговорить о том, как можно изменить размер текста css-свойствами, и какие единицы измерения можно для этого использовать.
Навигация по статье:
Как изменить размер текста CSS-стилями
Для изменения параметров в таблице стилей css существует специализированное свойство font-size, используя которое можно задать размер текста css-стилями в любых, удобных для вас единицах измерения. При этом можно использовать абсолютные и относительные единицу измерения.
Пример:
.font-s{ font-size:20px; }
.font-s{ font-size:20px; } |
Размер текста CSS
При указании параметра в абсолютных единицах, его величина не будет меняться относительно значения родительского элемента.
К таким единицам измерения относятся:
- px (пиксель)
- pt (пункт)
- pc (пика)
Кроме этого можно использовать ключевые слова:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Наиболее распространённой абсолютной единицей измерения шрифта является пиксель (px). Все остальные единицы используются редко, но при желании вы можете использовать и их.
При использовании относительных единиц, таких как: %, em, rem, размер шрифта в CSS будет рассчитываться относительно родительского элемента.
То есть при изменении шрифта родительского элемента шрифт в блоке будет так же увеличиваться или уменьшаться.
Например:
font-size: 2em;
Также расчёт размера шрифта может осуществляться относительно ширины или высоты области просмотра.
Для этого можно воспользоваться такими единицами измерения как:
- 1vw – 1% от ширины области просмотра
- 1vh – 1% от высоты области просмотра
- 1vmin — 1% от меньшей стороны окна браузера
- 1vmax — 1% от большей стороны окна браузера
Кроме того, так же можно указать размер шрифта CSS ключевым словом в относительном выражении: larger, smaller.
Например:
font-size: larger;
При использовании такого CSS-свойства шрифт будет более крупным чем в родительском блоке.
При использовании smaller – шрифт будет меньше чем родительском блоке.
Как изменить размер текста в HTML
Если вам нужно выделить одно слово или фрагмент текста, то, конечно же, это проще всего сделать в html-коде, используя атрибут style.
Вот так это будет выглядеть на примере:
Меняем размер <span>шрифта</span> в CSS
Меняем размер <span>шрифта</span> в CSS |
Меняем размер шрифта в CSS
Теперь, зная возможности данного css-свойства, вы можете использовать его в зависимости от ситуации, и добиться именно того результата, который вам нужен.
Например, относительными единицами можно воспользоваться при адаптации под мобильные устройства, и текст будет уменьшаться при уменьшении ширины экрана. Это намного удобнее, чем для разных разрешений задавать размер шрифта css-свойствами в пикселях.
На этом я, пожалуй, сегодня закончу. Если вам что-то не понятно или у вас остались вопросы, не стесняйтесь и задавайте их в комментариях.
Не забудьте поделиться статьей в социальных сетях и подписаться на мою рассылку. Увидимся в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru