网络编程
位置:首页>> 网络编程>> 网页设计>> CSS文字排版终极指南(2)

CSS文字排版终极指南(2)

作者:神采飞扬 来源:前端观察 发布时间:2010-01-19 10:30:00 

标签:文字,排版,css,font

制作有吸引力的段落

对于更有吸引力的段落排版,可以采用Robert Bringhurst的方法,它约定:用你的文字大小乘以30就可以得到段落的宽度。

比如如果你的文字大小是12px,用30乘以它,也就是360px,这样每行大约可以呈现65个英文字符。

不正确的段落大小:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的段落大小

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Line-height示例

行高用来限定每行文字之间的空白大小。一个经验之谈就是让行高比你的字体大6-7px。

比如,如果你的文字大小是12px,加上6px就是你的行高,也就是18px。

不正确的Line-Height

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

正确的Line-Height

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

PS:关于line-height的设置,推荐一下码头写的《line-height的继承问题

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com