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

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的用户可以自定义基本字体大小,如果他们愿意,可以在他们的自定义构建中自定义; 标题中的字体大小将自动和按比例更改,这就是重点.