Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Font size в css


CSS font-size Property

Set the font size for different elements:

div.a {  font-size: 15px;}div.b {  font-size: large;}div.c {  font-size: 150%;

}

Try it Yourself »

The font-size property sets the size of a font.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-size 1.0 5.5 1.0 1.0 7.0

CSS Syntax

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Property Values

Value Description Play it
medium Sets the font-size to a medium size. This is default Play it »
xx-small Sets the font-size to an xx-small size Play it »
x-small Sets the font-size to an extra small size Play it »
small Sets the font-size to a small size Play it »
large Sets the font-size to a large size Play it »
x-large Sets the font-size to an extra large size Play it »
xx-large Sets the font-size to an xx-large size Play it »
smaller Sets the font-size to a smaller size than the parent element Play it »
larger Sets the font-size to a larger size than the parent element Play it »
length Sets the font-size to a fixed size in px, cm, etc. Read about length units Play it »
% Sets the font-size to a percent of  the parent element's font size Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Fonts

CSS reference: font property

HTML DOM reference: fontSize property

Размер шрифта в 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

Это означает, что если вы зададите одному элементу

размер шрифта равный 100%, а другому — 16px, они будут выглядеть на экране одинаково. Это показано на рисунке ниже:

Пример 2 — абсолютные и относительные единицы измерения

Разница между абсолютными и относительными единицами измерения может быть продемонстрирована с помощью изменения размера шрифта элемента html. Если мы установим html { font-size: 200% }, это повлияет только на те элементы

, для которых размер шрифта задан в относительных единицах.

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

Свойство font-size

Трепачёв Д.П. © 2012-2018 г.

Ученикам: я ухожу на каникулы с 21-го декабря по 8 января. Буду не онлайн, хотя иногда возможно буду появляться.

Свойство font-size устанавливает размер шрифта текста. Размер может задаваться в различных единицах: в pt, px, em, процентах или ключевыми словами.

Синтаксис

селектор { font-size: CSS единицы для размера | проценты | абсолютный размер | относительный размер | inherit; }

Значения

Значение Описание
CSS единицы Значение в любых CSS единицах.
Проценты Размер в процентах от размера шрифта родительского элемента
Абсолютные значения Возможные значения: xx-small, x-small, small, medium, large, x-large, xx-large.
Относительные значения Возможные значения: larger и smaller - они увеличивают или уменьшают шрифт относительного родительского элемента.
inherit Наследует значение родителя.

Значение по умолчанию: medium.

Абсолютные значения

Размер варьируется от xx-small до xx-large и берется относительно размера medium в данном браузере.

Значение Описание
xx-small Самый самый маленький. Пример: Lorem ipsum dolor sit amet.
x-small Самый маленький. Пример: Lorem ipsum dolor sit amet.
small Маленький. Пример: Lorem ipsum dolor sit amet.
medium Средний. Пример: Lorem ipsum dolor sit amet.
large Большой. Пример: Lorem ipsum dolor sit amet.
x-large Очень большой. Пример: Lorem ipsum dolor sit amet.
xx-large Самый большой. Пример: Lorem ipsum dolor sit amet.

Примеры

Пример

p { font-size: 13px; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере для абзаца задан размер в 16px, а для span внутри него - 150%. В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px:

p { font-size: 16px; } span { font-size: 150%; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере для абзаца задан размер в 16px, а для span внутри него - larger. В этом случае размер шрифта для span будет больше, чем у его родителя (абзаца):

p { font-size: 16px; } span { font-size: larger; }

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Обратите внимание на то, что шрифты с разным font-family и одинаковым font-size визуально могут быть совсем не одного размера. (Для решения данной проблемы смотрите свойство font-size-adjust) В примере ниже обоим абзацам задан font-size в 16px, но разные font-family:

font-family: Arial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-family: 'Times New Roman' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Определение размеров шрифтов в CSS

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

Обзор единиц измерения

Единицы измерения можно разделить на две категории: абсолютные и относительные.

Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.

Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.

Вот краткий обзор некоторых единиц измерения:

Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px, pt, %, em, rem и vw.

Какая между ними разница?

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

Пример 1 — Настройки по умолчанию

В HTML-документе, где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:

100% = 1em = 1rem = 16px = 12pt

Это означает, что, если вы установите размер шрифта для одного блока в 100%, а для другого — 16px, на экране они будут выводиться с одним и тем же размером шрифта:

Пример 2 — Абсолютные и относительные единицы измерения

Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html { font-size: 200% }, это повлияет только на блоки с размером шрифта, заданным в относительных единицах:

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

Пример 3 — rem и em (и %)

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

Например:

html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ }

Поскольку р является дочерним элементом body, который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML:

При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.

Решением данной проблемы является rem. Он рассчитывается только на основе размера шрифта элемента html, а не родительского элемента.

Например:

html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ }

Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.

Пример 4 — Размеры шрифта на основе ширины окна просмотра

vw — это новая единица измерения CSS3, которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.

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

Мой метод

До этого исследования я использовала для установки размеров шрифта пиксели. Потому что в настоящее время большинство браузеров позволяют пользователю увеличить масштаб, если текст кажется ему слишком маленьким.

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

Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта):

html { font-size: 62.5%; /* для простоты вычислений в качестве базового размера шрифта задается 10 пикселей */ } body { font-size: 16px; font-size: 1.6rem; /* устанавливаем размеры шрифтов по умолчанию, чтобы быть уверенными, что размера в 10 пикселей у нас нигде не будет */ } h2 { font-size: 32px; font-size: 3.2rem; }

Это позволяет мне изменять размеры шрифтов с помощью следующего кода:

@media screen and (min-width: 1280px) { html { font-size: 100%; } }

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

Перевод статьи «CSS Font Sizing» был подготовлен дружной командой проекта Сайтостроение от А до Я.


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!