增强阅读体验:设置“字体大小”和“行高”

 2008-02-08    大连 /others/2008/02/08/css-font-line.html others nil

本文最近更新于 2017 年 10 月 09 日

用 CSS 语法可以设置“文字大小”和“行高”,不仅可以使各浏览器的文字显示效果统一,也可以让阅读更加舒适。

CSS font-size 和 line-height 基本語法

font-size: 设定值;
line-height: 设定值;

设定值的取值参考:font-size line-height

示例:

<html>

<head>
<style type="text/css">
p {font-size: 14px}
p.small
  {
  line-height: 14px
  }
p.big
  {
  line-height: 30px
  }
</style>
</head>

<body>

<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 20px。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
</html>
关于作者
Jason,80 后,现从事通信行业。安卓玩家一个人的书房朗读者麦子
 英语入门到放弃
 jsntn
 jasonwtien
 jasonwtien
更多…… /about.html

最近更新: