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

Содержание

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

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

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

Pt Px Em %
6 8 0.5 50
7 9 0.55 55
7.5 10 0.625 62.5
8 11 0.7 70
9 12 0.75 75
10 13 0.8 80
10.5 14 0.875 87.5
11 15 0.95 95
12 16 1 100
13 17 1.05 105
13.5 18 1.125 112.5
14 19 1.2 120
14.5 20 1.25 125
15 21 1.3 130
16 22 1.4 140
17 23 1.45 145
18 24 1.5 150
20 26 1.6 160
22 29 1.8 180
24 32 2 200
26 35 2.2 220
27 36 2.25 225
28 37 2.3 230
29 38 2.35 235
30 40 2.45 245
32 42 2.55 255
34 45 2.75 275
36 48 3 300

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из 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 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

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

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

Значение Общее название
100 Тонкий (Волосяной) Thin (Hairline)
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)

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

Значения 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…

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

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

em, px, pt, cm, in

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

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

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

margin: 1.2in; margin: 0.5cm), и наоборот.

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

Ре­ко­мен­ду­ются Мож­но ино­гда Не ре­ко­мен­ду­ются
Экран em, px, % ex pt, cm, mm, in, pc
Печать em, cm, mm, in, pt, pc, % px, ex

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

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

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

, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

В прошлом 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 и т.д.

Используйте

em или px для шрифтов

Единицы 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:

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

css font-size
Поделиться Источник user852091     23 июля 2011 в 20:12

9 ответов


  • Css сброс: размер шрифта: 100%; почему?

    Я изучаю сброс css С. Мейера, найденный здесь: http://meyerweb.com/eric/tools/css/reset / Мой вопрос таков: какова цель: размер шрифта: 100%? Кто-нибудь может это объяснить?

  • CSS – размер шрифта 100% содержащего div (элемента)

    Хорошо. Вот в чем дело. Например, мы можем использовать width:100% элемента, и он займет всю ширину своего контейнера. Как мы можем это сделать в случае шрифтов? Я пробовал использовать 100% или em и т. д., Но это не работает. Позвольте мне объяснить реальную проблему. Вот три версии div….



91

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

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

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

Теперь размер шрифта всех моих тегов HTML унаследует размер шрифта 14 пикселей.

Скажем, я хочу, чтобы все дивы имели размер шрифта 10% больше, чем тело, я просто делаю:

div {
    font-size: 110%
}

Теперь любой браузер, который просматривает мои страницы, автоматически сделает все divs 10% больше, чем у тела, которое должно быть чем-то вроде 15.4px.

Если я хочу, чтобы размер шрифта всех div был меньше 10%, я это делаю:

div {
    font-size: 90%
}

Это приведет к тому, что все дивы будут иметь размер шрифта 12.6px.

Кроме того, вы должны знать, что, поскольку размер шрифта наследуется, каждый вложенный div будет уменьшаться в размере шрифта на 10%,, так что:

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

Внутренний div будет иметь размер шрифта 11.34px (90% из 12.6px), который, возможно, не был предназначен.

Это может помочь в объяснении: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html# value-def-процент

Поделиться b01     23 июля 2011 в 20:40



15

Насколько я понимаю, когда шрифт установлен следующим образом

body {
  font-size: 100%;
}

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

В спецификации говорится, что % отображается

относительно размера шрифта родительского элемента

http://www.w3.org/TR/CSS1/#размер шрифта

В данном случае я понимаю, что это означает, на что настроен браузер.

Поделиться Jason Gennaro     23 июля 2011 в 20:22



9

Процент в значении свойства font-size относится к размеру шрифта родительского элемента . CSS 2.1 говорит об этом неясно и сбивчиво (ссылаясь на “унаследованный размер шрифта”), но текст CSS3 говорит об этом очень четко.

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

Установка font-size: 100% во многих случаях бессмысленна, так как элемент наследует размер шрифта своего родителя (что приводит к тому же результату), если ни одна таблица стилей не устанавливает свой собственный размер шрифта. Однако может быть полезно переопределить параметры в других таблицах стилей (включая таблицы стилей браузера по умолчанию).

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

ввод { размер шрифта: 100% }

Для элемента body логически избыточный параметр font-size: 100% используется довольно часто, так как считается, что он помогает бороться с некоторыми ошибками браузера (в браузерах, которые, вероятно, сейчас потеряли свое значение).

Поделиться Jukka K. Korpela     21 октября 2013 в 20:07


  • Проблемы с “размером шрифта: 100%”

    Я новичок в css, так что прошу прощения, если это глупый вопрос. Я делал сайт и использовал это: body { font-size: 80%; } Позже, на самом деле сегодня, я попытался применить сброс EricMeyer CSS к моей странице над объявлением 80%, но это вызывает всевозможные проблемы с моим размером шрифта. Я не…

  • Зачем устанавливать размер шрифта тела на 100%

    Согласно этой статье о адаптивном веб-дизайне, вы должны установить размер шрифта тела на 100%., я также слышал об этой практике раньше. http:/ / webdesign.tutsplus.com / статьи / типография-articles/taking-the-erm-out-of-ems / Зачем ты это сделал? Кроме того, что это на самом деле меняет?



4

Это относительно размера шрифта браузера по умолчанию, если вы не переопределите его значением в pt или px.

Поделиться RocketR     23 июля 2011 в 20:14



4

Извините, если я опоздал на вечеринку , но в вашей правке вы делаете замечание о font: 100% Georgia, на которое другие ответы не ответили.

Существует разница между font: 100% Georgia и font-size:100%; font-family:'Georgia' . Если бы это было все, что делал метод стенографии, часть размера шрифта была бы бессмысленной. Но он также устанавливает множество свойств для их значений по умолчанию: высота строки становится normal (или около 1.2), то же самое для стиля (без курсива) и веса (без полужирного шрифта).

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

Поделиться Mr Lister     13 февраля 2014 в 16:19



3

Как вы убедительно показали, font-size: 100%; не будет отображаться одинаково во всех браузерах. Тем не менее, вы установите свой шрифт в файле CSS, поэтому он будет одинаковым (или резервным) во всех браузерах.

Я считаю, что font-size: 100%; может быть очень полезен при сочетании его с дизайном на основе em. Как показано в этой статье , это позволит создать очень гибкий веб-сайт.

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

Поделиться Tim     13 января 2015 в 16:30



1

Относительно размера по умолчанию, определенного для этого шрифта.

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

Поделиться Yochai Timmer     23 июля 2011 в 20:15



1

Согласно ВСЕМ СПЕЦИФИКАЦИЯМ , ОТНОСЯЩИМСЯ К 1996 ГОДУ, процентные значения на font-size относятся к (вычисленному) размеру шрифта родительского элемента.

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

Это так просто.

Что делать, если div объявляет относительный размер шрифта, например em s, или, что еще хуже, другой процент?? См. “computed” выше. В какую бы абсолютную единицу ни превратилась относительная единица.

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

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

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

Рекомендации:

Поделиться chharvey     15 сентября 2017 в 04:34




0

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

Поделиться Mith     24 января 2015 в 12:44


Похожие вопросы:


CSS растущий размер шрифта при изменении размера элемента

при изменении размера браузера мой ввод растет и уменьшается. Как изменить тот же размер шрифта? это возможно без js? размер шрифта должен быть 100% высота ввода. http://jsfiddle.net/krLf0cbc/7 /…


как установить размер шрифта 100% окна браузера

Я пытаюсь понять, как установить размер шрифта в высоту/ширину = 100% окна браузера и сделать его отзывчивым. Я понимаю, что это будет искажено, но я хочу, чтобы шрифт был 100% ширины и 100% высоты….


Разница между размером шрифта 100% и наследованием

Hej и Мой вопрос таков: Является ли установка стиля font-size:inherit на тег HTML эквивалентной установке его стиля на font-size:100%? Насколько я понимаю, font-size:inherit это означает, что размер…


Css сброс: размер шрифта: 100%; почему?

Я изучаю сброс css С. Мейера, найденный здесь: http://meyerweb.com/eric/tools/css/reset / Мой вопрос таков: какова цель: размер шрифта: 100%? Кто-нибудь может это объяснить?


CSS – размер шрифта 100% содержащего div (элемента)

Хорошо. Вот в чем дело. Например, мы можем использовать width:100% элемента, и он займет всю ширину своего контейнера. Как мы можем это сделать в случае шрифтов? Я пробовал использовать 100% или em…


Проблемы с “размером шрифта: 100%”

Я новичок в css, так что прошу прощения, если это глупый вопрос. Я делал сайт и использовал это: body { font-size: 80%; } Позже, на самом деле сегодня, я попытался применить сброс EricMeyer CSS к…


Зачем устанавливать размер шрифта тела на 100%

Согласно этой статье о адаптивном веб-дизайне, вы должны установить размер шрифта тела на 100%., я также слышал об этой практике раньше. http:/ / webdesign.tutsplus.com / статьи /…


размер шрифта 100 процентов с исключением

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


Размер шрифта уменьшается в div, установленном на высоту 100%

Я создаю сайт, который состоит из одной страницы. Однако в верхней части страницы есть div, который занимает 100% высоты экрана, чтобы создать эффект полной страницы. Все работает нормально, но на…


как получить текущий размер шрифта для элемента с помощью css

Мне нужно вычислить размер шрифта, используя CSS (CurrenSize + px). например: body * {font-size: calc([CurrenSize] + 3px) !important;} Я делаю это в jQuery, но не работаю гладко, поэтому я…

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings.LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

Краткая история компьютерных шрифтов. От Chicago до XO Fonts / Хабр

Пять лет назад мы в МойОфис выпустили собственный набор шрифтов XO Fonts. Сегодня в нем 11 шрифтов и 24 начертаний. Они помогают заменить иностранные проприетарные шрифты и предназначены для корректного отображения ранее созданных документов при работе на компьютерах с российскими операционными системами. Тем не менее, область применения XO Fonts не ограничена только этой задачей — благодаря открытой лицензии шрифты могут бесплатно загрузить любые пользователи и сторонние разработчики.

Специально для Хабра я подготовил статью про развитие компьютерных шрифтов с 1984 года по наши дни. Из неё вы узнаете, что такое TrueType и хинты, почему Adobe долгое время была лидером на рынке компьютерных шрифтов, что означает фраза «писать углем» и зачем в 2021 году в России был изменен ГОСТ о требованиях к оформлению документов.


Хабр, привет! Я — Дмитрий Комиссаров, генеральный директор и основатель МойОфис. Мы производим офисное программное обеспечение для совместной работы с документами и коммуникаций. Приложения МойОфис разработаны в России, совместимы со всеми популярными операционными системами и аппаратными комплексами, в том числе с отечественными платформами АО «Байкал Электроникс» и АО «МЦСТ».

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

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

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

Системным шрифтом первых Macintosh стала растровая гарнитура Chicago от Сьюзан Каре —американской художницы и дизайнера, которая в 1980-х годах XX века создала множество графических элементов в интерфейсе Apple, Windows и IBM. Chicago оказался настолько удачным, что использовался в качестве основного шрифта в операционной системе Macintosh вплоть до 1997 года и стал важной частью фирменного стиля всего бренда Apple.

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

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

Кто, когда и зачем создал контурный шрифт PostScript

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

Важно отметить, что спецификация на формат PostScript была доступной и другим компаниям, они могли пользоваться этим языком, выплачивая Adobe лицензионные отчисления. Однако вместе с описанием контуров при создании шрифта Adobe использовала так называемые хинты, которые содержали дополнительные данные о построении геометрии литеры. С помощью хинтинга происходит сглаживание контуров шрифта для более четкого и удобочитаемого отображения текстов на экранах с низким разрешением или при печати, когда контурное изображение переводится в растровое. Вся информация о хинтах держалась в строжайшем секрете — технологию хинтинга использовала только Adobe. Именно поэтому очень долгое время эта компания оставалась единственным производителем высококачественных шрифтов.

ИТ-лидеры делают хинтинг открытым

Между тем компьютеры все чаще стали использовать для работы с документами — росла потребность получать при печати тексты, написанные качественным шрифтом без заломов и грубых контуров. Тогда Apple и Microsoft стали искать альтернативные способы реализации масштабируемых (контурных) шрифтов и в 1991 году совместно создали полностью открытую спецификацию TrueType, которая была реализовала в операционных системах MacOS и Windows 3.1. В TrueType была использована альтернативная технология хинтинга, и Adobe, владевшая проприетарными шрифтами, была вынуждена сделать свою технологию также полностью свободной.

Формат TrueType при всем своем удобстве не был оптимальным: он требовал огромных затрат при создании и описании всей необходимой информации о построении шрифтов. Поэтому в 1996 году зародилось совместное решение Adobe и Microsoft — новый формат контурных шрифтов OpenType. Он был построен на базе двух «конкурентов» — TrueType и PostScript и имел гораздо больше возможностей допечатной подготовки. Именно он получил наибольшее распространение: шрифты формата OpenType сегодня мы видим и на Linux, и на Windows, и на macOS.

Apple и Microsoft меняют шрифты интерфейсов

Давайте вернемся к Сьюзан Каре и ее шрифту Chicago. Как я уже сказал, эта гарнитура была основной в качестве пользовательского интерфейса до 1997 года и обрела большое число поклонников среди пользователей Apple, и даже в наше время можно найти гиков Chicago. Затем этот шрифт сменил Charcoal (англ. древесный уголь), разработанный Дэвидом Берлоу из Front Bureau — известного дизайн-бюро из Бостона. «Углем» писали вплоть до 2000 года. Он был создан специально для цифрового использования, но затем эти буквы с увеличенной высотой по оси x стали все чаще встречаться и в печати. А с 2000 года и последующие 14 лет пользователи интерфейсов Apple видели уже шрифты Lucida Grande и Helvetica.

В то же время менялись и шрифты пользовательского интерфейса у Microsoft. От MS Sans Serif, который использовали в самых ранних версиях MS Windows, компания перешла к Tahoma и Verdana (последний был оптимизирован для отображения литер на экранах низкого разрешения), которые впервые применили в Windows 95. Начиная с Windows 7 и до сих пор в качестве шрифта интерфейса используется семейство Segoe.

Настоящая революция в шрифтах интерфейса произошла в 2014 году, когда компания Apple представила San Francisco. Это большое семейство шрифтов, которое было разработано специально и для экрана высокого разрешения, и для печати — в обоих случаях буквы выглядят четко. Любопытно, что изначально шрифт San Francisco был использован в интерфейсе Apple Watch, то есть он остается разборчивым и удобным для чтения даже на экране размером чуть больше спичечного коробка.

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

Зачем нужны метрические аналоги проприетарных шрифтов

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

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

Сегодня же активно распространяются альтернативные ОС, а также появились новые офисные приложения на мобильных платформах iOS и Android. В результате, работа с такими документами превратилась в настоящую проблему. Если пользователь открывает такие файлы на компьютере, где эти шрифты не были установлены, то операционной системе или офисному ПО приходится заменять их другими, доступными. В результате вся структура текста, его разметка и верстка «разъезжаются», и документ теряет свой первозданный вид.

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

Чем отличаются метрические аналоги от проприетарных шрифтов

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

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

Какие шрифты нужно использовать по требованиям ГОСТ

Буквально спустя два года после выхода первой версии XO Fonts, в ГОСТ Р 7.0.97-2016 были внесены изменения, которые прекратили действие рекомендации по использованию проприетарных шрифтов Times New Roman и Arial. Теперь там в п. 3.3 написано «Для создания документов необходимо использовать свободно распространяемые бесплатные шрифты». А в феврале 2021 года Росстандарт, ориентируясь на импортонезависимые решения, внес изменения и в ГОСТ по оформлению технической документации. Теперь госорганам и госкорпорациям рекомендовано использовать в документообороте «свободно распространяемые» гарнитуры.

Так на уровне государства дан зеленый свет бесплатным отечественным шрифтам. Очевидно, что интерес к ним будет расти не только со стороны разработчиков, но и со стороны пользователей. Поэтому наша работа над XO Fonts еще точно не завершена.

Постскриптум

Скачать XO Fonts можно тут. На рабочем месте заменить шрифты может пользователь с правами администратора: XO Fonts — это просто файлы в системной папке.

Шрифт таблицы – 2017 – Справка по SOLIDWORKS

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

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

Имя параметра Проверка шрифта заметки документа Шрифт, используемый в графической области Результат
Шрифт Arial Arial Arial Документ прошел проверку.
Шрифт Arial Arial Times New Roman Документ прошел проверку.
Шрифт Verdana Arial Verdana Документ не прошел проверку.

html – изменить размер шрифта для столбца таблицы

html – изменить размер шрифта для столбца таблицы – qaru

Спросил

Просмотрено 391 раз

Я работаю над таблицей, оптимизированной с помощью Bootstrap, и сталкиваюсь со следующей проблемой: я хочу, чтобы столбец 1 и заголовок, и тело имели размер шрифта 12 пикселей, а затем столбец номер 2 и заголовок, и тело имели размер шрифта 21 пикселей.

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

Код:

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

50.6k1515 золотых знаков9898 серебряных знаков109109 бронзовых знаков

задан 20 янв в 13:19

Вам нужно использовать nth-child / nth-of-type , и если вам нужен стиль зебры (на основе столбцов), вы можете использовать odd и even

  / * один подход * /
.таблица 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 
    
  
  

Добавить комментарий

Ваш адрес email не будет опубликован.