Погружение в css: метрики шрифтов, line-height и vertical-align

15.7 Font size: the ‘font-size’ property

The font size corresponds to the em square, a concept used in typography.
Note that certain glyphs may bleed outside their em squares. Values
have the following meanings:

<absolute-size>

An <absolute-size> keyword is an index to a table of font
sizes computed and kept by the UA. Possible values are:

The following table provides user agent guidelines for the absolute-size
mapping to HTML heading and absolute font-sizes. The ‘medium’ value is
the user’s preferred font size and is used as the reference middle value.

CSS absolute-size values	xx-small	x-small	small	medium	large	x-large	xx-large
HTML font sizes	1		2	3	4	5	6	7

Implementors should build a table of scaling factors for absolute-size keywords relative to the ‘medium’ font size and the particular device and its characteristics (e.g., the resolution of the device).

Different media may need different scaling factors. Also, the UA
should take the quality and availability of fonts into account when
computing the table. The table may be different from one font family
to another.

Note 1. To preserve readability, a UA applying
these guidelines should nevertheless avoid creating font-size resulting
in less than 9 pixels per EM unit on a computer display.

Note 2. In CSS1, the suggested
scaling factor between adjacent indexes was 1.5, which user experience
proved to be too large. In CSS2, the suggested scaling factor for a
computer screen between adjacent indexes was 1.2, which still created
issues for the small sizes. Implementation experience has demonstrated
that a fixed ratio between adjacent absolute-size keywords is
problematic, and this specification does not recommend such a
fixed ratio.

<relative-size>

A <relative-size> keyword is interpreted relative to the
table of font sizes and the font size of the parent element. Possible
values are: . For example, if the parent element
has a font size of ‘medium’, a value of ‘larger’ will make the font
size of the current element be ‘large’. If the parent element’s size
is not close to a table entry, the UA is free to interpolate between
table entries or round off to the closest one. The UA may have to
extrapolate table values if the numerical value goes beyond the
keywords.

Length and percentage values should not take the font size table
into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, ’em’ and ‘ex’ length values refer to the
computed font size of the current element. On the ‘font-size’ property, these
length units refer to the computed font size of the parent element.

Note that an application may reinterpret an explicit size,
depending on the context. E.g., inside a VR scene a font may get a
different size because of perspective distortion.

Examples:

p { font-size: 16px; }
@media print {
	p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

Свойство спецификации шрифтов в CSS.

Самая важная спецификация шрифтов это Семейство шрифтов(font-family), семейства делятся на категории:serif — глифы шрифтов serif имеют множество изгибов на концах символов, так-же имеются заужения или засечки.sans-serif — глифы имеют более равномерное начертание линий и полное отсуствие засечек и других орнаментов.cursive — название говорит само за себя, гливы имеют наклон и/или елементы для соединения символов.fantasy — фантазийные шрифты, имеют множество орнаментов и других абстракционныых элементов.monospace — моноширинный(печатный) шрифт.
Зачем знать семейства шрифтов? Все очень просто, например вы решили сделать страницу с описанием какого либо скрипта, будут кирилические и латинские символы и вы решили сделать шрифт печатным, для этого вам понадобится шрифт для кирилических символов, например Everson Mono и шрифт для латинских Courier, значит ваше правило будет выглядеть вот так:BODY{font-family: Courier, «Everson Mono», monospace;}
Каскадные таблицы стилей позволяют задавать один или более шрифтов разделеных запятыми, если шрифт в имени имеет пробелы то его нужно помечать в кавычки, если у П.А. не установлены указаные шрифты, то он должен определить категорию(в нашем случае monospace) и согласно ей подобрать нужные, если нужного не окажется то отобразить все в шрифту по умолчанию для П.А.

Правило font-style: позволяет управлять стилем шрифта и может принимать значения:font-style:normal — нормальное представление шрифта, значение по умолчанию.font-style:italic — курсивное предоставление шрифтаfont-style:oblique — другая разновидность курсива, которая подразумевает следующие стили шрифтов:Oblique, Slanted или Incline
Свойство font-style используется самостоятельно или вместе с font-family.

Правило font-variant: позволяет управлять вариантами шрифтов:normal — определяет шрифт который не отмечен как малый заглавный.small-caps — малый заглавный шрифт.inherit — вычисленое значение.

Правило font-weight: устанавливает толшину(жирность) линий символов: от font-weight:100 до font-weight:900 — значение задается цифрами, чем цифра больше тем шрифт жирнее, допустимые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900font-weight:lighter тонкий шрифт, то же что и 100.font-weight:normal нормальный шрифт, то же что 400.font-weight:bold полужирный шрифт, тоже что и 700.font-weight:bolder жирный шрифт, тоже что и 900.

Правило font-size: позваляет управлять размером шрифта, зачением могут быть абсолютные и/или относительные единицы измерения, а так-же проценты. Отрицательные значения недопустимы!!!

Правило font-size-adjust: управляет разборчивостью шрифтов в двухкамерном написании, т.е. чтобы глифы легко читались, например мы используем шрифт Verdana и его аспект равен .58, так-же мы используем второй шрифт Georgia у которого аспект равен всего .5, то в этом случае если текст с шрифтом Verdana легко читается с размером font-size:12px, то чтобы определить разборчивось второго шрифта нам нужно воспользоваться формулой:font-size1(аспект1 / аспект2) = font-size2 , в нашем случае 12(0.58/0.5)= 13.92пикселя, т.е. разборчивось шрифта Georgia начинается от 14px.
Как определяется аспект?, например мы устанавливаем высоту букв верхнего регистра font-size:100px, при этом буквы нижнего регистра(x-height) будут занимать только 58px, то чтобы определить аспект данного шрифта нужно x-height разделить на font-size в нашем случае 58/100=0.58 значит аспект будет .58
Из этого можно сделать вывод, что шрифты с большим аспектом будут разбочививы при небольших размерах шрифта и наоборот.
П.С. Как определить аспект шрифта в спецификации неописано, если задать 2 правила(font-size и x-height) то одно из них будет проигнорировано, сами шрифты данной информации не несут, значит эти цифры можно получить только в разработчика…

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег  содержит три , каждый из которых имеет свой собственный :

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему не создает элементы с высотой в 100px? Я измерил и получилось:

• Helvetica — 115px;
• Gruppo — 97px;
• Catamaran — 164px.

Элементы со значением font-size:100px имеют разную высоту

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

шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц

Но здесь также может применяться значение 1024, 2048 и т.д.
устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

• em-квадрат 1000;
• Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent  на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано . Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство .

Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц).  В результате, = 49px и  = 100px, а не 164px (к счастью, основан на размере шрифта, а не на вычисленной высоте).

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

Прежде чем идти дальше, оставлю некоторое пояснение. Когда элемент  отображается на экране, то он может состять из нескольких линий, в соответствии с его шириной. Каждая строка состоит из одного или нескольких inline-элементов (HTML-теги или встроенные imline-элементы для текстового содержимого) и имеет название line-box. Высота line-box основана на высоте его дочерних элементов. Таким образом, браузер вычисляет высоту для каждого inline-элемента, и, следовательно, высоту line-box (от высшей точки своего дочернего элемента к самой нижней точке своего дочернего элемента). В результате line-box — достаточно высок, чтобы содержать все свои дочерние элементы (по умолчанию).

Если обновить предыдущую страницу HTML код, то получим:

Он будет генерировать три line-boxes:

• первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
• второй, содержащий два встроенных элемента и три

Тег <р> (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом  не дает нам ни какой визуальной подсказки о высоте line-box.

А вот и пример

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" charset=utf-8">
  <title>Видоизменение текста</title>
   <style type="text/css"> 
   h1 { 
    font-size: 32px;
    font-weight: lighter;
    font-style: oblique;
    text-decoration: overline;                   
   }
     p {
      font-variant: small-caps;
       font-size: 18px;
       }
       em {
         text-decoration: line-through;
       }
  </style>
 </head>
 <body>
    <h1>Создаем заголовок для <strong>нового</strong> абзаца!</h1>
    <p>Пишем текстовый контент самого абзаца, который <em> <b>мигает</b> </em>.</p>
 </body>
</html>

Запустите пример в браузере и обратите внимание на оформление стилей. Так, заголовок выделен светлым наклоненным начертанием с подчеркиванием над предложением. Абзац же отображается маленькими прописными буквами

При этом в тексте есть логические и физические выделения слов

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

Теперь вы сможете отредактировать текстовое наполнение своих сайтов по всем правилам. Подписывайтесь на обновления моего блога и приглашайте друзей. Пока-пока!

Прочитано: 314 раз

Селекторы детей

«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).

CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.

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

15.4 Font styling: the ‘font-style’ property

The ‘font-style’ property selects between normal (sometimes
referred to as «roman» or «upright»), italic and oblique faces within
a font family.

A value of ‘normal’ selects a font that is classified as ‘normal’
in the UA’s font database, while ‘oblique’ selects a font that is
labeled ‘oblique’. A value of ‘italic’ selects a font that is labeled
‘italic’, or, if that is not available, one labeled ‘oblique’.

The font that is labeled ‘oblique’ in the UA’s font database may
actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will
typically be labeled ‘oblique’ in the UA’s font database. Fonts with
Italic, Cursive or Kursiv in their names will
typically be labeled ‘italic’.

h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }

In the example above, emphasized text within ‘H1’ will appear in a
normal face.

Свойства font-weight, line-height и font-style

«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

1. Для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder также даст просто жирное начертание).

2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700.

   Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный.

Следующее правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов, это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб-странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж.

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга.

В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже.

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

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS.

По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. А вот «font-variant» позволяет, не изменяя размера строчных букв, сделать их начертание точно таким же, как и начертание заглавных.

Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может  использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

• none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
• underline — устанавливает подчеркнутые текст;
• overline — «надчеркивает» текст, то есть проводит линию над текстом;
• line-through — зачеркивает текст;
• blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

• capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
• uppercase — текст в верхнем регистре;
• lowercase — текст в нижнем регистре;
• none — не меняет регистр символов.

 Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

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

font: font-size font-family

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

What You Need to Know About Using Numerical Values

Although there are in actuality the following numerical values that you can use to define the “boldness” in your displayed text: 100, 200, 300, 400, 500, 600, 700, 800, and 900, the actual result is going to be determined by what font you use in your CSS.

Not every web font, or “font family” was originally built with an array of bold variations. Most font families actually have only a few weights available. What this means is that when a weight is specified for which no face exists, a face with a nearby weight will be used.

The numerical values are as follows:

• 100 – Thin
• 200 – Extra Light (Ultra Light)
• 300 – Light
• 400 – Normal
• 500 – Medium
• 600 – Semi Bold (Demi Bold)
• 700 – Bold
• 800 – Extra Bold (Ultra Bold)
• 900 – Black (Heavy)

Here are some examples of various font-weight values:

Note: We will be using font-family: Helvetica, Arial, sans-serif; for this demonstration.

What you can do with web fonts is endless as you will see as we continue to explore all realms of possibilities. In future blog posts on this subject, we will explore more advanced, cutting-edge areas of font-weight development for the web.