css - 引导程序中字体大小背后的基本原理

Question

以下是来自的标头大小bootstrap.css：

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

我对这些大小是分数（半整数）这一事实感到惊讶，这表明它们的精度至少是0.25px（小于 1%）。

网页设计师如何达到这样的尺寸？它们是通过某种科学过程或某种计算获得的吗？还是人们只是盯着他们的网站，玩弄尺寸直到感觉合适？设计师如何让他的队友相信它真的应该是31.5px而不是仅仅31px？

Answer 1

他们没有准确指定字体大小 31.5px，而是指定了标题的基本字体大小和系数，请参见代码：

// file: variables.less
@baseFontSize:          14px;

// file: type.less
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px

如果愿意，bootstrap 的用户可以在自定义构建中自由自定义基本字体大小；标题中的字体大小将自动按比例更改，这就是重点。