Размеры шрифта H1-H6 в HTML
https://stackoverflow.com/questions/2325850
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В HTML (и в типографике в целом, я полагаю), по-видимому, существуют некоторые определенные размеры для H1-H6 -элементов.
Т.е., если базовый размер шрифта равен 16px (или 100%), то h1 (w / c) должен быть 2.25em (36px).И H2 (w / c) должно быть 1,5 em (24px).Et cetera.Откуда берутся эти переменные?То есть H1 = 36px, H2 = 24px, H3 = 21px, H4 = 18px, H5 = 16px, H6 = 14px.(или, если хотите, H1 = 2em, H2 = 1.5em, H3 = 1.17em и т.д., дело не в самих числах, а в связи между ними)
Есть ли для них какая-то математическая формула?Имеет ли это какое-то отношение к золотому сечению или фибоначчи?Я не смог найти информацию по этому поводу.
Редактировать:чтобы быть более конкретным, что это за шаблон;почему оно меняется с 36 на 24 на 21 или начинается с 36 для начала (или, если хотите, с 2em на 1.5em на 1.17em и т.д.)?
О, я забыл указать, откуда я взял исходные цифры, они взяты здесь
Решение
Я знаю, что этот пост старый.Я столкнулся с этим с тем же вопросом, откуда они это берут.Я думаю, что нашел это.
Это производное от пентатонической музыкальной гаммы.Шкала типов в любом случае.Заголовки взяты из шкалы типов, хотя и не в порядке 1:1.
Масштаб идет:8 9 10 12 14 16 18 21 24...Шкала удваивается за 5 шагов (от 12 до 24).Каждый шаг равен основанию (12), умноженному на 2 (масштаб ['он удваивается']) в степени i (шаг), деленной на 5 (шаги ttl) ['i/5'], округленному до ближайшего.
Итак, h4 - это основа, h3 - шаг 1, h2 - шаг 3, а h1 - шаг 5, или восьмерка 12 по пентатонической шкале.h5 и h6 - это 1 и 3 шага от основы в другую сторону.Если я правильно понимаю, это было бы эквивалентно аккорду ля, Ми мажор.
На то, чтобы разобраться с таблицей и объяснением музыкальных гамм, у меня ушло около 2 часов.
Другие советы
Они определяются каждым производителем браузеров независимо.
Они неодинаковы в разных браузерах и предназначены для семантики (Большой заголовок, немного меньший заголовок и т.д. ).
Если вы посмотрите на спецификацию HTML 4 для этих, там нет упоминания о как предполагается, что они должны быть стилизованы, только чтобы они следует быть.Из спецификации:
Visual browsers usually render more important headings in larger fonts than less important ones.
Если вы хотите, чтобы они были согласованными, вам следует использовать сброс таблицы стилей это их определяет.
Даже несмотря на то, что 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)
Один из возможных подходов к прогрессии заключается в использовании квадратных корней с помощью формулы, такой как 2 / sqrt[заголовок #].Следовательно, у вас было бы:
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
Это зависит от браузера, как говорят другие.
С другой стороны, в типографии существует правило для установки размеров шрифта:если базовый шрифт имеет размер X, более крупные шрифты должны расти экспоненциально;обычный способ - это иметь размеры X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3 и так далее, но вы можете изменить базу.
Однако к компьютерным шрифтам предъявляются некоторые особые требования.
Раньше они предоставлялись только в растровой форме (поэтому размеры были фиксированными), и даже когда они предоставлялись в векторной форме - некоторые форматы предпочитали некоторые специальные размеры:делится на 2 или 5 (это было, например,случай со старыми векторными шрифтами Amiga...Агфа Интеллифонт?).
Даже сейчас шрифтовым движкам больше нравятся целочисленные размеры, потому что их алгоритмы намеков работают лучше.
И люди, похоже, привыкли к значениям, выбранным из-за этих технических ограничений, даже несмотря на то, что сейчас шрифтовые движки стали намного лучше.
Некоторые номинальные цифры:
Таблица стилей по умолчанию для HTML 4:
- h1:2em
- h2:1.5эм
- h3:1.17эм
- h4:1em
- h5:0,83эм
- h6:0,75эм
Firefox 3 и Safari 4 (на самом деле, WebCore):
- h1:2em
- h2:1.5эм
- h3:1.17эм
- h4:1em
- h5:0,83эм
- h6:0,67 эм
Я пришел к следующему алгоритму / вычислению после рассмотрения нескольких различных методов определения размера шрифта с H1 ~ H6, p, меню и т.д.с html, установленным на 100% (обычно 16 пикселей) и следующим в rem-единицах.Это изменено по сравнению с часто используемым "магическим числом" 1.14 / .875. Мое значение .8735, которое, кажется, хорошо работает с p при 16px / 1rem до H1 при 36px / 2.25rem и достигает довольно "нормальных" значений px повсюду, таких как 12, 14, 16, 18, 21, 24, 28, 32, 36, и т.д.до 54 для Jumbotrons и до .пшика, что, я знаю, перебор.Я обычно остаюсь в рамках .огромный и .микро.В основном я начинаю с p, которое равно 1,0 rem, и последовательно умножаю на .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, я скажу это откровенно, на данный момент (без каламбура) Я действительно не думаю, что это имеет значение.Я начал использовать то, что для меня проще.Проще работать с точками, которые вычисляются до простых целых чисел, чем возиться с rems в десятичных запятых.
В более общем виде связанные размеры, подобные этому, часто основаны на геометрическом ряду, т. е.каждое последующее число больше на постоянный коэффициент (что-то вроде 1.2 или sqrt(2)) по сравнению с предыдущим.Такой же прогресс наблюдается в размерах гаечных ключей и шестигранных ключей, диаметрах винтов и т.д. В механике или в семействе форматов бумаги A5 / A4 / A3 ....
Многие из них указывают разные размеры тегов заголовков, но в bootstrap был изменен размер шрифта по умолчанию. здесь указаны размеры шрифта по умолчанию:
h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
Я думаю, что это зависит от браузера, который может даже позволить пользователю определять размеры шрифта (я помню, как Opera делала это).В Спецификация HTML не вдается в подробности:
В HTML существует шесть уровней заголовков, из которых H1 является наиболее важным, а H6 - наименее.Визуальные браузеры обычно отображают более важные заголовки более крупными шрифтами, чем менее важные.
Это сделано намеренно, поскольку HTML предназначен для описания структуры, а не представления документа.
Предложенный W3C таблица стилей рендеринга по умолчанию для реализации браузерами.
Вы заметите, что ваши цифры отличаются от них.Это потому, что производители браузеров имеют привычку игнорировать все, что говорит W3C.
Для начальной загрузки размеры шрифта тегов заголовков в пикселях варьируются следующим образом проверьте заголовки этой начальной загрузки
h1 - 36 пикселей)
h2 - 30 пикселей
h3 - 24px
h4 - 18 пикселей
h5 - 14 пикселей
h6 - 12 пикселей
