Единицы измерения css, размер шрифта

Стилевые свойства шрифта

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

<h2 style=»font-variant:small-caps;font-weight: bold;font-style:italic;font-family: Arial; font-size:18pt;»>Наш зоголовок</h2>

Ох, как длинно! Вы, наверное, заметили, что все свойства начинаются одинаково, со слова font. 

Оказывается, оно является базовым атрибутом. И мы можем все эти свойства записать в следующем виде:

<h2 style=»font:small-caps bold italic Arial 18pt»</h2>

% — проценты от …

Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:

• Ширина width — относительно ширины родительного элемента
• Высота height — относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
• При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
• Для абсолютно позиционированных объектов — относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
• Отступы padding \ margin — относительно ширины родительного элемента, даже если задаются вертикальные отступы.
• transform: translate(x, y) — относительно ширины \ высоты самого объекта к которому применено свойство.
• font-size и line-height — относительно размера свойства font-size

Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 100%; 16/100*100=16px)

Живи, а работай в свободное время! (задан font-size: 150%; 16/100*150=24px)

Подписывайся! (наследует font-size: 150%; 16/100*150=24px)

Ставь лайк! (задан font-size: 150%; 24/100*150=36px)

И комментарий напиши! (задан font-size: 80%; 24/100*80=19.2px)

Высота родителя 300px, ширина 400px (height: 300px;width:400px;)

width: 50%;height: 50%;padding: 5%;margin: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Внешние отступы: 400/100*5 = 20px

Высота родителя 300px, ширина 400px (height: 300px;width:400px;)

width: 50%;height: 70%;padding: 5%;position: relative;left: 10%;top: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*70 = 210px

Внутренние отступы: 400/100*5 = 20px

Вправо: 400/100*10 = 40px

Вниз: 300/100*5 = 15px

Высота родителя 300px, ширина 400px (height: 300px;width:400px;)

width: 70%;height: 50%;padding: 5%;transform: translate(10%, 5%);

Ширина: 400/100*70 = 280px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Вправо: 280/100*10 = 28px

Вниз: 150/100*5 = 7.5px

Шрифты[править]

font-familyправить

Семейство шрифта

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

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

Пример:

p {
  font-family Verdana, Helvetica, Arial, sans-serif;
}

Существуют 5 семейств шрифтов:

1. serif — шрифты с засечками
2. sans-serif — шрифты без засечек
3. monospace — моноширинные
4. cursive — курсивные
5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif
sans-serif
monospace
cursive
fantasy

font-styleправить

Стиль шрифта

Существуют три значения этого свойства:

1. normal — обычный (значение по умолчанию)
2. italic — курсив
3. oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variantправить

Вариант шрифта

1. normal — обычный (значение по умолчанию)
2. small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weightправить

Вес шрифта

Это свойство устанавливает вес (насыщенность) шрифта.

Возможные значения:

1. 100
2. 200
3. 300
4. 400 или normal (значение по умолчанию)
5. 500
6. 600
7. 700 или bold
8. 800
9. 900

font-sizeправить

Размер шрифта

Возможные значения этого свойства:

1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
2. относительные константы: smaller, larger
3. абсолютные и относительные единицы измерения CSS

line-heightправить

Межстрочный интервал, часто применяется вместе с font-size

Возможные значения:

1. normal — нормальное значение (по умолчанию)
2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
3. length — фиксированное значение в единицах измерения CSS
4. % — проценты от текущего размера шрифта

fontправить

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Пример:

p {
  font bold italic small-caps 150%1.4 Arial, Helvetica, sans-serif;
}

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифтыправить

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило

Шрифты бывают следующих типов:

1. eot — embedded opentype (.eot)
2. ttf — truetype (.ttf)
3. otf — opentype (.ttf, .otf)
4. svg — svg-шрифты (.svg, .svgz)
5. woff — web open font format (.woff)

Стиль шрифта

Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.

Шрифт может иметь следующие стили:

• normal — обычный (по умолчанию)
• italic — курсив
• oblique — наклонный

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Стиль шрифта</title></head><body><p style=»font-style: italic«>это курсив</p><p style=»font-style: oblique«>а это наклонный текст</p><p style=»font-style: normal«>И чем спрашивается, они отличаются?</p></body></html>

смотреть пример  

Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст — это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.

Свойство font-size

Свойство используется для установки размера шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, ключевыми словами, , , , и т. д.

Установка font-size в пикселях (px)

Установка размера шрифта в значениях пикселей (например, , и т. д.) является хорошей практикой только когда вам нужна точность. Пиксель — это абсолютная единица измерения, которая определяет фиксированное значение.

Посмотрим следующий пример, чтобы понять, как это в основном работает:

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

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

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

Установка font-size в единицах em

Единица является пропорциональной единицей измерения. При определении свойства значение равно размеру шрифта, который применяется к родительскому элементу.

Итак, если вы установите для элемента , то и .

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

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Использование комбинации % и em

Чтобы упростить вычисление значений , есть лайфхак, который состоит в том, чтобы установить для элемента равным (чтобы единицы рассчитывались не от , а от ).

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

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента (), независимо от того, где находится элемент в документе (в отличие от , который расчитывается относительно размера шрифта родительского элемента).

Это означает, что эквивалентен размеру шрифта элемента , который по умолчанию составляет в большинстве браузеров. Взглянем на пример, чтобы понять, как это работает:

Установка font-size с помощью ключевых слов

CSS предоставляет возможность использования некоторых ключевых слов для определения размеров шрифта.

Размер шрифта можно указать с помощью одного из следующих ключевых слов: , , , , , , . Кроме этих, есть еще ключи со значением относительного размера шрифта: or . Посмотрим, как это работает:

Ключевое слово равно стандартному размеру шрифта в браузере, который обычно составляет . Аналогично, — это эквивалент , — , — , — , — и — .

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

Установка font-size в единицах vw и vh

Размеры шрифта могут быть указаны с использованием относительных единиц : или .

Единицы расчитываются в процентном отношении от размеров окна браузера, где ширины области просмотра и высоты области просмотра. Следовательно, если область просмотра имеет ширину составляет , но т.к. чаще область просмотра имеет ширину то составит

Посмотрим следующий пример:

Однако существует проблема с единицами . На маленьких экранах шрифты становятся такими маленькими, что их трудно прочитать. Чтобы предотвратить это, вы можете использовать CSS-функцию , как в примере:

В этом примере, даже если ширина области просмотра становится равной , размер шрифта будет по крайней мере равен или .

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Свойство font-family

Свойство используется для указания шрифта, который будет использоваться для визуализации текста.

Это свойство может содержать несколько разделенных запятыми имен шрифтов в качестве «резервной» системы, т.к., если первый шрифт будет недоступен в системе пользователя, браузер будет пытаеться использовать следующий и т. д., пока не найдет тот, который сможет применить.

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

Вы должны закончить список любым общим семейством шрифтов (generic font) на выбор — , , , и . Типичное объявление семейства шрифтов может выглядеть так:

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

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

Курсивные шрифты выглядят как рукописные. Fantasy шрифты представляют собой художественные начертания, но они практически не используются из-за плохой поддержки в операционных системах.

Разница между Serif и Sans-serif шрифтами

Шрифты с засечками имеют маленькие штрихи (засечки) на концах символов, тогда как шрифты без засечек более прямые и не имеют этих маленьких штрихов. Посмотрим следующую иллюстрацию:

Подробнее о стандартных, браузерных шрифтах, здесь: .

Кодировка

Правило просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

@charset "ISO-8859-1";

Шрифтовой комплект (font-face)

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

Другие описатели, добавленные в , становятся условиями для шрифта, который используется. Например, если вы добавили стиль в эт-правило, описатель свойства будет применяться к селектору со свойством , если свойством будет .

Вы можете использовать похожее эт-правило font-face:

@font-face {
	font-family: somerandomfontname;
	src: url(somefont.eot);
	font-weight: bold;
}
p {
	font-family: somerandomfontname;
	font-weight: bold;
}

Это правило применит шрифт somefont.eot к параграфам (за исключением случаев, когда для селектора не установлено ).

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

Только Internet Explorer, похоже, обладает определенной степенью поддержки. Чтобы внедрять шрифты с IE, вам потребуется использовать приложение Microsoft WEFT, которое конвертирует символы формата TrueType в формат OpenType (и затем ими можно воспользоваться только по определенной вами ссылке).

Из-за ограничений (и сложности) совместимости, рекомендуется не использовать шрифты, которые не имеют адекватной альтернативы среди системных шрифтов.

Псевдоклассы для постраничных медиа

Существует три псевдокласса, которые используются специально в связке с At правилом . Выглядит их использование следующим образом:

@page :pseudo-class { stuff }.

— этот псевдокласс применяется к первой странице постраничных медиа.

и применяются для левых и правых страниц соответственно. Может использоваться для указания больших полей слева при печати левой страницы и справа – при печати правой страницы.

Есть и ряд других особенностей эт-правила , такие как переход на новую страницу, наименование страниц, но учитывая, что это эт-правило с трудом работает в любом из браузеров, вы возможно и так потратили достаточно времени на чтение этой части. Хотя идея хороша.

Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Спасибо за ваши отзыв!

Относительно шрифта: em

– текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: , и т.п.

Размеры в – относительные, они определяются по текущему контексту.

Например, давайте сравним с на таком примере:

пикселей – и в Африке пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с вместо :

Так как значение в высчитывается относительно текущего шрифта, то вложенная строка в раза больше, чем первая.

Выходит, размеры, заданные в , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

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

Единицы и

В спецификации указаны также единицы и , которые означают размер символа и размер символа .

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

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

Пиксели: px

Пиксель – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в , его нужно разделить на три части – волей-неволей появляются . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

Достоинства

Главное достоинство пикселя – чёткость и понятность

Недостатки

Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: , , ,

Существуют также «производные» от пикселя единицы измерения: , , и , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

• (мм) =
• (см) =
• (типографский пункт) =
• (типографская пика) =

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в .

Поэтому ни о каком соответствии реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

но что, если контейнер не просмотра (тела)?

этот вопрос задан в комментарии Алексом под принятым ответом.

этот факт не означает нельзя использовать в некоторой степени для размера этого контейнера. Теперь, чтобы увидеть какие-либо изменения, нужно предположить, что контейнер каким-то образом является гибким по размеру. Будь то через прямой процент или через 100% минус маржа. Точка становится «спорной», если контейнер всегда установите, скажем, широкий, тогда просто установить это работает для этой ширины.

Пример 1

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

полагая здесь является ребенком , это этой ширины, что размер окна в данном случае. В принципе, вы хотите установить это будет выглядеть хорошо для вас. Как вы можете видеть в моем комментарии в приведенном выше css, вы можете «думать» через это математически относительно полного размера окна просмотра, но вы не нужно для этого. Текст будет «сгибаться» с контейнером, потому что контейнер сгибается с изменением размера окна просмотра. UPDATE:вот пример двух контейнеров разного размера.

Пример 2

вы можете помочь обеспечить размер окна просмотра, заставив расчет на основе этого. рассмотрим такой пример:

размер все еще основан на видовом экране, но по существу настроен на основе сам размер контейнера.

Размер шрифта

Изменение размера шрифта в элементе — хороший способ визуально выделить его и придать ему значимости, или наоборот показать, что данная информация не должна привлекать к себе повышенное внимание. Для изменения размера шрифта используется свойство font-size

Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

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

body { font-size: 14px; }
h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p class="class1">Изменение размера с помощью процентов.</p>
    <p class="class2">Изменение размера с помощью пикселей.</p>
    <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• Как изменить шрифт в CSS
• Стандартные (безопасные) шрифты

Единица измерения em

CSS

.element {
  font-size: 2em;
}

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

HTML

<div class="container">
  <h2>Заголовок</h2>
  <p>Какой-нибудь текст</p>
</div>

CSS

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

В сухом остатке

Что мы узнали:

• понять строчный (инлайновый) контекст форматирования нелегко
• у всех строчных элементов 2 высоты
  • область содержимого (основанная на метриках шрифта)
  • виртуальная область ()
  • ни ту, ни другую высоту нельзя однозначно визуализировать (если вы разрабатываете браузерный отладчик и готовы взяться за это — было бы великолепно!)
• основывается на метриках шрифта
• при виртуальная область может стать меньше, чем область содержимого
• на нельзя особо полагаться
• высота контейнера строки рассчитывается на основе свойств и его потомков
• нельзя просто взять и получить/установить метрики шрифта из CSS
• есть в планах спецификация на эту тему, чтобы помочь с вертикальным выравниванием: модуль строчной сетки (Line Grid)

Но я по-прежнему люблю CSS

Возможные подходы

Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems.  Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

Setting the font size in pixel values () is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to and its child element is set to , the child element displays larger than the parent element in the page.

Note: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.

Another way of setting the font size is with values. The size of an value is dynamic. When defining the property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven’t set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind:  em values compound. Take the following HTML and apply it with the previous CSS above:

The result is:

Assuming that the browser’s default is 16px, the words «outer» would be rendered at 16px, but the word «inner» would be rendered at 25.6px. This is because the inner span’s is 1.6 em which is relative to its parent’s , which is in turn relative to its parent’s . This is often called compounding.

values were invented in order to sidestep the compounding problem. values are relative to the root element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to .

Then we apply this CSS to the same HTML, which looks like this:

In this example, the words «outer inner outer» are all displayed at 16px (assuming that the browser’s font-size has been left at the default value of 16px).

CSS Семейства Шрифтов

В CSS сушествует два типа имен семейств шрифтов:

• обобщенное семейство (generic family) — группа семейств шрифтов с одинаковым начертанием
  (например «Serif» или «Monospace»)
• семейство шрифтов (font family) — специфическое семейство шрифтов (например «Times New Roman»
  или «Arial»)

Обобщенное семейство	Семейство шрифтов	Описание
Serif	Times New RomanGeorgia	Шрифты serif имеют небольшие линии (засечки) на окончаниях контуров некоторых символов
Sans-serif	ArialVerdana	«Sans» означает без — эти шрифты не имеют засечек на окончаниях контуров символов
Monospace	Courier NewLucida Console	Все моноширинные символы имеют одинаковую ширину

вывод

интересно, почему никто не понял это, и некоторые люди даже говорят, что это было бы невозможно возиться с CSS. Мне не нравится использовать Javascript для настройки элементов, поэтому я не принимаю ответы JS или даже jQuery, не копая больше. В целом, это хорошо, что это было выяснено, и это один шаг к реализации pure-CSS в дизайне веб-сайта.

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

редактировать: следует также отметить, что в некоторых браузерах есть злые полосы прокрутки. Например, при использовании Firefox я заметил, что означает полную ширину окна просмотра, простирающуюся под полосой прокрутки (где содержимое не может расширяться!), поэтому текст fullwidth должен быть тщательно обработан и желательно протестирован со многими браузерами и устройствами.

Подводим итоги

Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток – компоненты становятся менее модульными.

Рекомендуется соблюдать 2 правила:

• если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
• в остальных случаях рекомендуется применять rem.

Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.