CSS文字排版终极指南(2)
作者:神采飞扬 来源:前端观察 发布时间:2010-01-19 10:30:00
制作有吸引力的段落
对于更有吸引力的段落排版,可以采用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的继承问题》
猜你喜欢
- 本文介绍了4个asp数据库管理中常用到的access数据库操作程序,一般的网站管理后台都提供了这个功能,方便管理员对数据库数据的管理维护。1
- 一个更易读的网站意味着网站使用性的改良以及提供愉悦的阅读体验。我们希望浏览者们能或者这些好处不是吗?这篇文章我们将介绍5个简单的方法让你能提
- 如何正确显示模式对话框中的中文?msg.htm <html> <head> &nbs
- MySQL是关系型数据库中的明星,MongoDB是文档型数据库中的翘楚。下面通过一个设计实例对比一下二者:假设我们正在维护一个手机产品库,里
- 继续我们的 Javascript 优化计划,上期已经做到怎么尽可能的缩小 Javascript 脚本的文件体积便于传输。不过这样做仅仅是不够
- 1函数是一种有零个或多个参数并且有一个返回值的程序。在SQL中Oracle内建了一系列函数,这些函数都可被称为SQL或PL/SQL语句,函数
- 在Google Reader上看到网友分享的一个链接,真的发现自己已经out了。上面的这张图,是纯CSS实现的,没有背景图、没有Javasc
- <!--#include file="conn/conn.asp"--> <% set Newslis
- 弄个随机数的东西,直接从网上找了一个现成的,简单看了两眼,感觉算法应该是对的,但今天测试下来,是不对的;网上大多数人用的写法是这样的:fun
- 一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人
- '*************************************************'函数名:getMaxO
- 这个javascript农历日历,万年历代码网上看到的,很不错,功能齐全,值得收藏!功能介绍:动态显示当前世界各国各时区时间,显示当前农历,
- 这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,七拼八凑,总算是把这个效果写出来了。哎!还是
- 方法很简单,实现原理:使用asp的Request.ServerVariables("HTTP_REFERER") 判断来
- Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可:docume
- 如果有空格就用%20代替,如果有其它字符就用%ASCII代替,如果有汉字等四个字节的字符,就用两个%ASCII来代替。不过有时候我们也需要将
- 如果你的PHP网站换了空间,必定要对Mysql数据库进行转移,一般的转移的方法,是备份再还原,有点繁琐,而且由于数据库版本的不一样会导致数据
- <div class=”A” style=”position:relative;”>A 
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- RSS是 Really Simple Syndication的缩写(对rss2.0而言,是这三个词的缩写,对rss1.0而言则是RDF Si