守望的麦子

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

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

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

用 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>
关于作者
麦子,80 后,现从事通信行业。安卓玩家一个人的书房朗读者。
MRJENGLISH
jsntn
jasonwtien
jasonwtien
更多…… /about.html

最近更新: