css 字体按比例

CSS中字体按比例是一个非常重要的话题，因为不合理的字体大小和不合适的字体样式会直接影响到网页的可读性和美观性。对于网页设计师来说，如何利用CSS让文字大小和行距按比例排列是一个必须掌握的技能。

body {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 2.5em;
  line-height: 1.2;
}

h2 {
  font-size: 2em;
  line-height: 1.2;
}

h3 {
  font-size: 1.5em;
  line-height: 1.2;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

以上是一个基础的CSS样式示例，为了让字体大小按比例分布，我们通常使用相对单位em或rem进行设置。其中rem是根据根元素字体大小的倍数，而em是根据父元素字体大小的倍数。这样就可以让不同阶段的标题和正文字体大小比例相对协调。

此外，除了字体大小之外，行距也是非常重要的一部分。一般来说，行距可以通过倍数的方式进行设置。如果我们假设正文基础行距为1.5，那么标题的行距可以设置为1.2，这样可以让整个页面不同部分的字数按比例分布。