Таблица размеров шрифтов: Таблица соответствия размеров шрифтов в CSS

Таблица соответствия размеров шрифтов в CSS

Не важно каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимость посмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.4 em) или быстро перевести одни размеры в другие.

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

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body в 16px.

Обновление от 23.05.2015: для более детального понимания единиц измерения в CSS появился визуальный сервис CSS Ruler

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Telegram

Chrome CSS Firefox Internet Explorer Opera Safari Документация Юзабилити

font-weight – CSS | MDN

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

font-weight: normal;
font-weight: bold;


font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;


font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal

Нормальное начертание. То же, что и 400.

bold

Полужирное начертание. То же, что и 700.

lighter

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

bolder

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100, 200, 300, 400, 500, 600, 700, 800, 900

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

Недоступность заданного значения

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

• Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
• Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
• Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
• Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

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

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

Интерполяция

Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>
 

CSS

p {
  font-weight: bold;
}


div {
 font-weight: 600;
}


span {
  font-weight: lighter;
}

Result

BCD tables only load in the browser

em, px, pt, cm, in…

См. также оглавление со всеми советами.

На этой странице:

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (

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

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt
↓

Так называемые абсолютные единицы (cm, mm

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px. Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

Используйте

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и h2 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

CSS: 100% размер шрифта-100% чего?

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

Процент (%): единица процента очень похожа на единицу “em”, за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т. е. 12pt = 100%). при использовании единицы процента ваш текст остается полностью масштабируемым для мобильных устройств и для специальных возможностей.

Источник: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Но если вы говорите “ie 12 pt = 100%”,”, то это означает, что сначала вы должны определить font-size: 12pt . Так вот как это работает? Вы сначала определяете размер в абсолютной мере, а затем ссылаетесь на это как ‘100%’? не имеет большого смысла, так как многие образцы говорят, что это полезно поставить:

body {
  font-size: 100%;
}

Таким образом, делая это, WHAT – это размер шрифта относительно? Я замечаю, что размер, который я вижу на своем экране, отличается для каждого шрифта. Например, Ариал выглядит намного больше, чем Times New Roman. Кроме того, если бы я просто сделал это, размер тела = 100%, означал бы, что он будет одинаковым во всех браузерах? Или только если я сначала определю абсолютное значение?

UPDATE, СБ 23 ИЮЛЯ

Я доберусь туда, но, пожалуйста, потерпите.

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

1. Является ли этот стандартный размер всегда одинаковым для каждой версии браузера или они различаются между версиями?
2. Я нашел (см. изображение ниже) настройки для Google Chrome (никогда не смотрел на это раньше!), и я вижу стандартные настройки “serif”, “sans-serif” и “monospace”. Но как я могу интерпретировать это для других шрифтов? Скажем, я определяю font: 100% Georgia;, какой размер будет принимать браузер? Будет ли он искать стандартный размер для засечек или шрифт “Georgia” имеет стандартный размер для браузера
3. На нескольких сайтах я читал такие вещи, как Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today . Но из того, что я сейчас узнаю, я считаю, что вы действительно должны выбирать между изменяемым размером текста (используя % или em, как они рекомендуют в этой цитате) или иметь “точные, последовательные размеры шрифтов в разных браузерах” (используя px или pt в качестве основы). Правильно ли это?

Настройки Google:

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

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

div {
    font-size: 110%
}

div {
    font-size: 90%
}

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

body {
  font-size: 100%;
}

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

html {
  font-size: 62.5%; /* 62.5% of what? */
}

  <таблица>
  
     
         1 
         2 
         3 
         4 
     
  
  
     
         1 
         2 
         3 
         4 
     
     
         1 
         2 
         3 
         4 
     
  
  

  / * один подход * /
.таблица th: первенец,
.table td: first-child {
  размер шрифта: 21 пикс.
}

.table th: nth-child (2),
.table td: nth-child (2) {
  размер шрифта: 12 пикселей
}

/ * второй подход * /

/* странный */
.table th: nth-child (2n + 1),
.table td: nth-child (2n + 1) {
  фон: красный
}

/* даже */
.table th: nth-child (2n),
.table td: nth-child (2n) {
  фон: голубой
}  

  
<таблица>
  
    
       1 
       2 
       3 
       4 
    
  
  
    
       1 
       2 
       3 
       4 
    
    
       1 
       2 
       3 
       4 
    
  
  

 -й: эн-ребенок (нечетный),
td: nth-child (odd) {
  размер шрифта: 12 пикселей;
}
th: nth-child (четный),
td: nth-child (even) {
  размер шрифта: 21px;
}  

  <таблица>
  
     
         1 
         2 
         3 
         4 
     
  
  
     
         1 
         2 
         3 
         4 
     
     
         1 
         2 
         3 
         4 
     
  
  

  td: nth-child (1),
td: nth-child (3),
th: nth-child (1),
th: nth-child (3) {
  размер шрифта: 12 пикселей
}

td: nth-child (2),
td: nth-child (4),
th: nth-child (2),
th: nth-child (4) {
  размер шрифта: 21 пикс.
}  

  <таблица>
  
     
         1 
         2 
         3 
         4 
     
  
  
     
         1 
         2 
         3 
         4 
     
     
         1 
         2 
         3 
         4 
     
  
  

  <таблица ...> ... 
  

  




<таблица>
    
          Клиент  
          Имя экземпляра  
          имя базы данных  
          Имя файла  
          KeyName  
          Вращение  
          Путь  
    
    
         NEWDEV6 
         EXPRESS2012 
         master   master.mdf 
         test_key_16   0 
         d: \ Program & nbsp; Files \ Microsoft & nbsp; SQL & nbsp; Server \ MSSQL11.EXPRESS2012 \ MSSQL \ DATA \ master.mdf 
    



<таблица>
    
          Клиент  
          Имя экземпляра  
          имя базы данных  
          Имя файла  
          KeyName  
          Вращение  
          Путь   
    
         NEWDEV6 
         EXPRESS2012 
         мастер 
         мастер.mdf 
         test_key_16 
         0 
         d: \ Program & nbsp; Files \ Microsoft & nbsp; SQL & nbsp; Server \ MSSQL11.EXPRESS2012 \ MSSQL \ DATA \ master.mdf  
  

  

  \ documentclass {article}
\ usepackage {tabularx}
\ setlength \ extrarowheight {2pt}
\ begin {document}

\ begin {table} [ht!]
\ caption {Полноширинная среда \ texttt {tabularx} с разными размерами шрифта \ strut} \ label {tab: 42}

\Большой
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash Large} \\
        \ hline
    \ конец {tabularx}
\ medskip

\большой
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash large} \\
        \ hline
    \ конец {tabularx}
\ medskip

\ normalsize% по умолчанию
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash normalsize} \\
        \ hline
    \ конец {tabularx}
\ medskip

\небольшой
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash small} \\
        \ hline
    \ конец {tabularx}
\ medskip

\ footnotesize
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash footnotesize} \\
        \ hline
    \ конец {tabularx}
\ medskip

\ scriptsize
    \ begin {tabularx} \ linewidth {| X | X |}
        \ hline
        Столбец1 и Столбец2 \\
        \ hline
        Данные & \ texttt {\ textbackslash scriptsize} \\
        \ hline
    \ конец {tabularx}
\ end {table}
\ конец {документ}