Установить размер шрифта с em
Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.
Единица измерения размера em рекомендуется консорциумом W3C.
1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.
Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM
Пример
h1 { font-size: 2.5em; /* 40px/16=2.5em */}h2 { font-size: 1.875em; /* 30px/16=1.875em */
}p { font-size: 0.875em; /* 14px/16=0.875em */}
В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.
К сожалению, есть еще проблема с более старыми версиями IE.
Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.
Единицы измерения углов в CSS
Когда в css-свойствах используются функции предназначенные, например, для поворота элемента или изображения на
определенный угол (см. пример №4), они в качестве своих параметров обычно принимают все доступные в CSS
единицы измерения углов:
-
deg (от англ. degree –
градус) – всем известная и общепринятая в быту единица измерения углов, которая равна
1/360 полного оборота по окружности
(1deg = π/180rad ≈ 0,01745rad); -
rad (от лат. radius –
луч, радиус) – 2π радиан равны 360 градусам
(1rad = 180/πdeg ≈ 57,296deg); -
grad (от фр. grade) –
400 градов равны одному полному обороту или же 360 градусам; -
turn (от англ. turn –
поворачивать)– один полный оборот равен 360 градусам.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование единиц измерения углов в CSS</title>
<style>
/* Оформляем родительский «div» абзацев */
div{
width: 600px;
height: 600px;
margin: auto;
padding: 50px;
background-color: #DFDFDF;
border-radius: 5px;
}
/* Это общий стиль абзацев */
p{
width: 240px;
padding: 30px;
background-color: #55aa55;
border-radius: 5px;
text-align: center;
font-weight: bold;
color: #F9F9F9;
}
/* Это класс 1-го трансформированного абзаца */
.p_1{transform: rotate(-10.5deg);}
/* Это класс 2-го трансформированного абзаца */
.p_2{transform: rotate(0.11rad);}
/* Это класс 3-го трансформированного абзаца */
.p_3{transform: rotate(10grad);}
/* Это класс 4-го трансформированного абзаца */
.p_4{transform: rotate(-0.5turn);}
</style>
</head>
<body>
<div>
<p>
Простой абзац.<br>
</p>
<p class="p_1">
1-й трансформированный абзац: <br>
transform: rotate(-10.5deg)
</p>
<p class="p_2">
2-й трансформированный абзац: <br>
transform: rotate(0.11rad)
</p>
<p class="p_3">
3-й трансформированный абзац: <br>
transform: rotate(10grad)
</p>
<p class="p_4">
4-й трансформированный абзац: <br>
transform: rotate(-0.5turn)
</p>
</div>
</body>
</html>
Пример №4. Использование единиц измерения углов в CSS
Пиксели
Самый распространенный вариант. Устанавливается следующим образом:
font-size: 16px;
Преимущество у пикселей только одно – никаких сложностей с величиной. Ничего не надо подсчитывать. Какой размер указан, такими и будут символы на экране. Недостаток – трудности с адаптивным размером шрифта CSS. Не получится установить соотношения между разными размерами.
К числу «пиксельных» можно отнести устаревшие единицы измерения. К ним относятся pc, cm, mm и pt. Так, mm – это миллиметр, cm – сантиметр. Pt и pc – типографский пункт и типографская пика. Почему эти способы устарели? Потому что они не были «самостоятельными» – браузер автоматически пересчитывал значения в пиксели. Соответственно, проблемы были такими же, как и в случае с px. Кстати, в одном cm с точки зрения браузера содержится 38px.
Вид списка
Списки — это хлеб и масло мобильных приложений. Вы никогда не знаете, сколько вещей на самом деле будет в списке, пока вы не начнете показывать их на вытянутом тонком экране. Давайте посмотрим на следующее.
В представлении списка — в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр — как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.
На странице настроек сами параметры записываются в текстовом стиле по умолчанию, хотя заголовки разделов (например, «AirDrop») меньше (ничего себе!). Но заметьте, что, хотя, заголовок меньше, это более толстый шрифт, а значит вы все равно можете распознать его как заголовок. Опять же: ненавязчиво.
Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.
Модальные окна
Это маленькое всплывающее окно является наглядным примером того, как Apple создает дизайн текста.
- Заголовок имеет размер по умолчанию. Вы можете подумать, что этого, будет недостаточно, но что мы видели раньше? Тяжелый вес шрифта, чтобы компенсировать его размер.
- Пояснительный текст — 13pt. Я бы подумал, что это будет 15pt, как основной текст электронной почты, но, возможно, они просто хотели, чтобы он уместился в одну строку?
- Ввод пароля составляет 13pt, что было бы слишком мало для обычного ввода текста, хотя, мне кажется, что вы увидите только кучу черных кружков, это не обязательно будет размер по умолчанию.
- «ОК» и «Отмена» имеют размер по умолчанию, но поскольку кнопка «ОК» надеется, что вы ее нажмете, Apple привлекает к ней немного больше внимания, сделав ее толще.
Эти размеры шрифта следуют четкому шаблону, и они иллюстрируют несколько трюков со стилем текста, однако, есть некоторые странные несоответствия.
ЗНАКИ
7.1. Шрифт типа А с наклоном приведен на черт.19.
Черт.19
7.2. Шрифт типа А без наклона приведен на черт.20.
Черт.20
7.3. Шрифт типа Б с наклоном приведен на черт.21.
Черт.21
7.4. Шрифт типа Б без наклона приведен на черт.22.
Черт.22
7.5. Наименования знаков приведены в табл.3.
Таблица 3
|
Номера знаков на чертежах |
Наименование знаков |
|
Двоеточие |
|
|
Точка с запятой |
|
|
Восклицательный знак |
|
|
Вопросительный знак |
|
|
Параграф |
|
|
Равенство |
|
|
Величина после округления |
|
|
Соответствует |
|
|
Асимптотически равно |
|
|
Приблизительно равно |
|
|
Меньше или равно |
|
|
Больше или равно |
|
|
Минус, тире |
|
|
Плюс-минус |
|
|
Умножение |
|
|
Параллельно |
|
|
Перпендикулярно |
|
|
Конусность |
|
|
Интеграл |
|
|
Бесконечность |
|
|
Квадратные скобки |
|
|
Круглые скобки |
|
|
Черта дроби |
|
|
Знак подобия |
|
|
Звездочка |
Rem: простая и универсальная единица
Выше перечислено множество способов настройки размеров шрифта в CSS, но ни один из них не является действительно удобным. Для упрощения работы был придуман параметр rem, который вычисляется в зависимости от заданной для тега html величины.
Это проще, чем кажется на первый взгляд. Например, для тега html, в который обернут весь контент страницы, вы задали в CSS font-size 16px. Соответственно, 1rem теперь будет являться 16px. 2rem – это 32px, и т. д. Можно использовать любые пропорции: 0,2rem, 1,1rem, 100rem… Браузер аккуратно пересчитает параметры.
В html можно вообще ничего не трогать, поскольку браузеры сами устанавливают для обертки определенный размер шрифта. Но для более тщательной настройки лучше все-таки переопределить показатель. Главное достоинство rem в том, что можно легко масштабировать шрифты в определенном месте, не влияя на другие элементы. Однако помните, что старые браузеры (IE ниже 9-й версии) не поддерживают этот показатель.
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 |
Font-size — задаем размер шрифта с помощью CSS
Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Давайте теперь рассмотрим подробнее способы применения данного свойства.
Размер шрифта можно задавать в абсолютных и относительных величинах. Для этого используются единицы измерения, поддерживаемые CSS. Чтобы задать размер шрифта жестко, используются следующие единицы измерения:
- px — пиксели;
- pt — пункты;
- in — дюймы;
- cm — сантиметры;
- mm — миллиметры;
- pc — пики.
Обозначение единицы измерения указывают после самого значения. Например:
p { font-size: 10px; }
strong { font-size: 12pt; }
При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.
Для задания относительных размеров шрифта используются следующие обозначения:
- em — размер буквы «m» текущего шрифта;
- ex — размер буквы «x» текущего шрифта;
- % — проценты от размера шрифта родительского элемента.
Например:
h1 { font-size: 3em; }
em { font-size: 150%; }
В этом примере заголовок h1 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.
Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:
Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Относительные единицы измерения
Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.
В большинстве браузеров по умолчанию
установлен размер шрифта 16px. Это значение
можно использовать при расчетах
(например, 16px равны 1em, 1rem или 100%).
Давайте рассмотрим, какие же относительные
единицы измерения у нас есть.
- % – измерение в процентах.
- em – размер шрифта относительно
обычного, т. е., если шрифт имеет
размер 2.5em, значит, он в 2,5 раза больше
обычного шрифта. - rem – размер шрифта относительно
корневого элемента документа. - ch – ширина символа «0». В моноширинных
шрифтах, где все символы имеют одинаковую
ширину, 1ch это ширина одного символа. - ex – x-высота текущего шрифта,
измеряется в высоте символа «х» в нижнем
регистре.
See the Pen
CSS Relative Units by Matthias (@fullstack-to)
on CodePen.
Чем отличаются em и rem?
Разница между этими единицами в
наследовании. Значение rem основывается
на корневом элементе (html). Каждый
дочерний элемент в качестве основы для
вычислений использует размер шрифта
элемента html.
А в единицах em вычисления основаны на
размере шрифта родительского
элемента.
rem очень упрощает вычисления размеров
шрифтов. Если размер шрифта в элементе
не зависит от размера шрифта родителя,
это очень удобно, например, для вложенных
элементов или даже нескольких вложенных
элементов, таких как списки. Единицы
rem всегда вычисляются относительно
размера шрифта в теге html.
Различные семейства шрифтов
Все представленные на картинке шрифты
имеют один размер (18pt), но благодаря
красной линии видно, что x-высота (ex) у
этих шрифтов разная.
На этой картинке шрифты имеют все тот
же одинаковый размер (18pt). Но они отличаются
шириной, т. е., их размер в единицах
ch будет разным. Символы моноширинных
шрифтов имеют одинаковую ширину, а в
serif или sans-serif символы отличаются по
ширине (например, «i» будет уже, чем «o»).
Em: величина зависит от размера шрифта родительского элемента
Все просто. Допустим, у вас есть div, для которого задан font-size 16px. В нем находится еще один div, для которого размер шрифта CSS установлен как 2em. Соответственно, 1em – это будет 16px (т. е. размер шрифта родительского элемента), а 2em – вдвое больше, т. е. 32px.
В родительском элементе можно также задавать величину в em. В таком случае она будет зависеть от базового размера, заданного в body или html. Em – это относительный размер шрифта CSS, который будет увеличиваться и уменьшаться вместе с величиной знаков родительского элемента. Это удобно – чтобы изменить величину в большом количестве мест, надо только поменять параметры родителя.
ПРИЛОЖЕНИЕ (справочное). ДИАКРИТИЧЕСКИЕ ЗНАКИ
ПРИЛОЖЕНИЕ
Cправочное
Венгерский язык
Немецкий язык
Польский язык
Румынский язык
Чешский и словацкий язык
Электронный текст документа
подготовлен АО «Кодекс» и сверен по:
официальное издание
Единая система конструкторской документации:
Сб. ГОСТов. — М.: Стандартинформ, 2007
У каждого человека есть свой почерк. Записывая информацию от руки на бумаге, мы преобразуем ее в определенные символы. Точно также , которая выводится на экран компьютера или на принтер, первоначально проходит этап преобразования символов текста в их изображения на экране или на бумаге. Для этого используются компьютерные шрифты.
Проводя сравнение между почерком человека и компьютерным шрифтом, можно сказать, что шрифт является аналогом почерка. Точнее, шрифт – это набор изображений символов определенного алфавита
. Эти изображения, как правило, выдержаны в одном стиле, в общем формате, имеют одинаковый дизайн.
Шрифт является для компьютера инструкцией, в каком виде следует выводить символы текста на экран или на печать.
Шрифтов много, отличаются они друг от друга по трем параметрам:
- гарнитура,
- размер символов,
- начертание.
Рассмотрим эти параметры шрифта.
Свойство font-weight
Свойство указывает вес или жирность шрифта.
Это свойство может принимать одно из следующих значений: , , , , , , , , , , , , и .
- Числовые значения — указывают жирность шрифта. соответствует значению , а соответствует .
- Значения и изменяют жирность текущего элемента на по сравнению с жирностью родительского элемента. — больше, — меньше.
Давайте посмотрим на примере:
Большинство шрифтов доступны только в ограниченном количестве весов; часто они доступны только в и начертаниях. В случае, если шрифт не доступен в указанном весе, будет выбран альтернативный, который является ближайшим доступным.
Гарнитура шрифта
Гарнитура шрифта – это один шрифт или набор шрифтов, имеющих одинаковый дизайн, общее художественное решение. Как правило, шрифты одной гарнитуры разрабатываются одним автором.
Лингвистически слова «гарнитура» и «гарнитур» похожи. Гарнитур означает набор предметов, имеющих схожее назначение, например, мебельный гарнитур, ювелирный гарнитур и т.п. Также и гарнитура объединяет набор шрифтов для вывода текста на экран или на принтер. Все предметы из гарнитура, также как все шрифты одной гарнитуры, выполнены в одном стиле, имеют единое художественное решение.
Каждая гарнитура имеет свое имя,
например, Times New Roman, Courier New. Есть гарнитуры со специальными символами, например, Symbol и Wingdings.
В названиях компьютерных шрифтов русские буквы не используются. Вместо этого применяется латинский алфавит, например, «Baltica», «Svetlana» (это транслитерация, когда русские названия пишутся английскими буквами). Также возможен английский перевод русских названий шрифтов, например, «Schoolbook». Шрифты, которые пришли к нам с Запада, сохраняют свои названия, например, шрифт Garamond.
Слово «гарнитура» обычно опускается. Как правило, просто говорят «выберите шрифт Arial» или «документ набран шрифтом Times New Roman». Также обычно упрощают и вместо «гарнитура», либо «имя гарнитуры» говорят «имя шрифта
».
Подводим итоги
Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток – компоненты становятся менее модульными.
Рекомендуется соблюдать 2 правила:
- если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
- в остальных случаях рекомендуется применять rem.
Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.
