Подтвердить что ты не робот

Размер шрифта H1-H6 в HTML

В HTML (и в типографике вообще, я полагаю), для H1-H6-элементов существуют определенные размерные размеры.

Т.е. если размер шрифта базовой линии равен 16px (или 100%), тогда h1 (w/c) будет равен 2.25em (36px). И H2 (w/c) составляет 1.5em (24px). И т.д. Откуда берутся эти переменные? H1 = 36px, H2 = 24px, H3 = 21px, H4 = 18px, H5 = 16px, H6 = 14px, т.е. (или, если хотите, H1 = 2em, H2 = 1.5em, H3 = 1.17em и т.д., точка не сама по себе, а отношение между ними)

Есть ли у них математическая формула? Это имеет какое-то отношение к золотому соотношению или фибоначчи? Я не смог найти информацию об этом.

EDIT: более конкретно, каков шаблон; почему он идет от 36 до 24 до 21 или начинать с 36, чтобы начать (или, если хотите, от 2em до 1.5em до 1.17em и т.д.)?

О, я забыл указать, где я пришел с исходными номерами, они из здесь

4b9b3361

ОТВЕТЫ

Ответ 1

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

Это вывод пентатонной музыкальной шкалы. Шкала Типа в любом случае. Заголовки берутся из шкалы Типа, но не в порядке 1:1.

Шкала идет: 8 9 10 12 14 16 18 21 24... Шкала удваивается в 5 шагов (от 12 до 24). Каждый шаг представляет собой базовое (12) раз 2 (масштаб ['он удваивает']) до степени я (шаг), деленный на 5 (ttl шагов) ['i/5'] - округленный до ближайшего.

Таким образом, h4 является базой, h3 является этапом 1, h2 является этапом 3, а h1 является этапом 5 или октавом 12 в пентатонической шкале. h5 и h6 находятся на 1 и 3 шага от основания другим способом. Если я это понимаю, это будет эквивалент основного аккорда E.

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

Ответ 2

Они определяются независимо от каждого браузера.

Они не являются однородными в разных браузерах и существуют для семантики (большой заголовок, немного меньший заголовок и т.д.).

Если вы посмотрите на спецификацию HTML 4 для этих, не упоминается, как они должны быть стилизованы, только чтобы они были, Из спецификации:

Visual browsers usually render more important headings in larger fonts than less important ones.

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

Несмотря на то, что w3 определил предложенную таблицу стилей по умолчанию для HTML 4 со следующими сведениями, большинство браузеров игнорируют это предложение:

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

(да, я не вижу font-size: для h4)

Ответ 3

Это зависит от браузера, как говорят другие.

С другой стороны, в типографике есть правило для установки размеров шрифта: если базовый шрифт имеет размер X, более крупные шрифты должны экспоненциально расти; обычный способ состоит в том, чтобы иметь размеры X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3 и т.д., но вы можете изменить базу.

Однако компьютерные шрифты имеют особые требования.

Раньше они предоставлялись только в растровой форме (поэтому размеры были фиксированными), и даже если они представлены в векторной форме - некоторые форматы предпочитали некоторые специальные размеры: делимые на 2 или 5 (это было в случае с Amiga старые векторные шрифты... Agfa Intellifont?).

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

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

Ответ 4

Одним из возможных способов продвижения является использование квадратных корней с помощью формулы, такой как 2/sqrt [heading #]. Следовательно, у вас будет:

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

Для базы шрифтов 12, которая будет достаточно близка к 24, 17, 14, 12, 11, 10. Для других баз данных результаты могут быть немного дальше от целых чисел.

Фибоначчи будет хорошо работать с базой 16, поэтому у вас будет:

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

Ответ 6

Я придумал следующий алгоритм/расчет, посмотрев несколько разных методов для размера шрифта с H1 ~ H6, p, меню и т.д. с html, установленным на 100% (обычно 16 пикселей) и следующим в единицах rem. Это исправлено из часто используемого 1.14/.875 "магического номера". Mine - 0,8735, который, по-видимому, хорошо работает с p в 16px/1rem до H1 при 36px/2.25rem и достигает довольно "нормальных" значений px, как 12, 14, 16, 18, 21, 24, 28, 32, 36 и т.д. До 54 для Jumbotrons и до .zilch, который является излишним, я знаю. Я обычно остаюсь в пределах .huge и .micro. В основном я начинаю с p, что равно 1.0rem и умножается на .8735 последовательно, чтобы получить меньше или разделить его последовательно, чтобы получить больше:

 item    rem   px   pt
.giant  3.38  54.4  41
.huge   2.95  47.2  35
.big    2.58  41.3  31
 h1     2.25  36.0  27
 h2     1.97  31.5  24
 h3     1.72  27.5  21
 h4     1.50  24.0  18
 h5     1.31  21.0  16
 h6     1.15  18.4  14
 p      1.00  16.0  12
.menus  0.87  13.9  10
.legal  0.76  12.2   9
.micro  0.67  10.7   8
.zilch  0.58   9.3   7

/* Font-Sizes using pt */
.giant { font-size:41pt; }
 .huge { font-size:35pt; }
  .big { font-size:31pt; }
    h1 { font-size:27pt; margin-top:0; }
    h2 { font-size:24pt; }
    h3 { font-size:21pt; } 
    h4 { font-size:18pt; }
    h5 { font-size:16pt; }
    h6 { font-size:14pt; }
     p { font-size:12pt; margin-bottom:15pt; }
.menus { font-size:10pt; }
.legal { font-size: 9pt; }
.micro { font-size: 8pt; }
.zilch { font-size: 7pt; }

Я использую очки в последнее время (pt), которые, как вы можете видеть, еще легче работать, и прежде чем все согнут из-за формы, не используя rem или em, я скажу это откровенно, на данный момент (без каламбур Я не думаю, что это важно. Я начал использовать то, что мне легче. Легче работать с точками, которые вычисляются до простых целых чисел, чем беспорядок вокруг с запятыми в десятичных точках.

Ответ 7

В более общем виде связанные размеры, подобные этому, часто основаны на геометрической серии, т.е. каждое последующее число больше по постоянному коэффициенту (что-то вроде 1.2 или sqrt (2)) из предыдущего. Существует такая же прогрессия в размерах гаечных ключей и шестиугольных клавиш, или диаметров винтов и т.д. В механике, или в форматах бумаги формата A5/A4/A3...

Ответ 8

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

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

Это преднамеренно, поскольку HTML предназначен для описания структуры, а не для представления документа.

Ответ 9

W3C предложил таблицу стилей рендеринга по умолчанию для реализации браузеров.

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

Ответ 10

Многие из них говорят о разных размерах для тегов заголовков, но существует вариация от начальной загрузки до шрифта font-size по умолчанию. Здесь указаны размер шрифта по умолчанию:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;} 
h5 { font-size: 12px;} 
h6 { font-size: 10px;}

Ответ 11

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

h1 - 36px)
h2 - 30px
h3 - 24px
h4 - 18px
h5 - 14px
h6 - 12px