HTML中的H1-H6字体大小

60
在HTML(和排版中一般都是如此),似乎为H1-H6元素定义了一些尺寸大小。例如,如果基准字体大小为16px(或100%),则h1将为2.25em(36px)。而H2将为1.5em(24px)。以此类推。这些变量来自哪里?也就是说H1=36px、H2=24px、H3=21px、H4=18px、H5=16px、H6=14px。是否有数学公式?是否与黄金比例或斐波那契数列有关?我找不到相关信息。
编辑:更具体地说,它们的模式是什么?为什么从36到24再到21,或者从36开始(或者,如果您喜欢,从2em到1.5em到1.17em等)?
哦,我忘了说明原始数字来自这里

3
避开这个隆起; 传统刻度似乎由两股斐波那契数列组成。例如,《印刷样式要素》一书中的示例:(a) 5、8、13、21、34...,以及 (b) 6、10、16、26、42... => 5、6、8、10、13、16、21、26... - morbusg
12个回答

1
对于Bootstrap,标题标签字体大小的变化如下所示,请查看Bootstrap标题: h1 - 36px h2 - 30px h3 - 24px h4 - 18px h5 - 14px h6 - 12px

0
来晚了,但这里有一个有趣的Sass/SCSS mixin,它可以根据H1标签的起始字体大小值为您执行一些斐波那契数学运算。
@use "sass:map";
@mixin headers($h1-em: 2em) {
    $fib: ("6": .236, "5": .382, "4": .50, "3": .618, "2": .786, "1":1);
    @for $i from 1 through 6 {
        h#{$i} {
            font-size: $h1-em * map.get($fib, #{$i})};
        }
      
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接