CSS排版:例子和工具
在这系列文章的前面一部分,我们讨论了CSS排版的一些技术和最佳实践。现在让我们通过一些案例学习,工具以及网页中一系列出色排版来更深入的研究。
这是CSS排版参考三篇系列中的第三部分,这三篇将涵盖从基本语法到最佳实践,以及CSS排版相关工具的内容。
CSS排版案例学习
教程和理论很不错,但是没有比案例学习更能够说明事情的了。这里是一系列案例,它们可以为你提供一些关于网页排版在现实世界中的理解。
Southern Savers Case Study: Typography
Serif Fonts vs. Sans Serif Fonts: A Working Case Study
Fixing Web Fonts, A Case Study
Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face
CSS排版工具
下面是收集的一些排版相关的工具,他们可以最大程度地帮助你处理CSS排版工作。
Typographic Grid
这个预定义的CSS网格组成了垂直节奏。它是任何做CSS排版的人的很好的起点。
Baseline
Baseline是一个关注基准网格的排版框架。它具有CSS reset,HTML文本基本风格,网页表单等特点,以及一些新的HTML5元素。
Typograph
这个工具具有创作排版的拖拽界面。它有许多功能,包括自动计算大小因此在你做CSS排版时不需要拿出你的计算器了。
TypeTester
选择你计算机里有的字体,并调试它们的line-height,letter-spacing等等。这个工具可以为你生成一个预览你可以很方便地调整你的字体样式直到满意。
FontTester
FontTester与上面的TypeTester目的相似. FontTester允许你从方方面面测试和比较不同的字体。 测试好了不同的组合之后,你可以很开心地获取最终的css代码。
Typechart
Typechart是不同字体组合的一个展览,对于每一个组合都可以获取它们的代码。它很适合快速挖掘字体组合和样式。
CSS Typeset Matrix
你以像素为标准来考虑吗?这个工具可以帮助你将单位转成em,也可以帮你寻找基于你指定的字号和行高的边距和间距值。
CSS Typeset
使用这个工具,你可以改变任何放在左边输入框文字的line-height,word-spacing,color, 样式和文本修饰。调整后马上就能看到更改,然后你可以从输入框中复制最终的代码。
Type Navigator
你有没有过在网页上见到一个字体然后想知道它是什么字体么?使用这个工具,你可以通过回答一每关于字体特征问题而到答案。脑海里没有特定的字体,你也可以通过它来找到想要的字体。
PX to EM
使用这个工具,简单地用任意一种测量单位(px,em,%或pt)选择一个希望的body font-size,它会帮你转成em。
What the Font
你可以使用这个工具通过上传图片来得到字体的名字。
Fontifier
这个基于网页的生成器会根据你手写的样本创建一个字体。这个字体可以在现实网站中使用,通过@font-face规则。样本和创建字体是免费的,但是你需要花费$9来下载字体。
Serif Font Search
这个工具允许你通过它的牲查找serif字体。如果你找到了,它会告诉你这个字体的名称以及一些其它信息。
Font Picker
Font Picker允许你根据特点和风格从成百上千种字体中筛选出你要找的字体。
Typekit
只要支付订阅飞费用,网页设计师可以在它们的网站中使用额外的网页字体。使用Typkit的好处是不用担心版权问题,这个服务帮你搞定了一切。
CSS排版展览
为了获得灵感,这里给出了一些排版很漂亮的网页设计。我们也会简单的讨论CSS是如何被运用到网页设计的排版中去的。
Matt Hamm
这个网站设计的垂直节奏执行得很好,并且通过Typekit提供额外的字体。注意网页设计中使用不同的大小写,字号和其它字体样式来创造出出色的视觉层次。
Kilian Muster
这个网站使用了一些与众不同的CSS排版技术。网站的名字和口号使用了CSS3的text-shadow来产生CSS3阴影效果。
Grid Based Web Design
这个页面的排版始终坚持一个基线网格,不同文本元素的字号和样式产生了视觉的层次感。
Brizk
这个网页设计是如何有效地使用自定义网页字体的另一个例子。整个网站的标题以及不同的文本块都使用了同一种字体。注意每页第一段和标题的字体都使用更大一些的字号――使用CSS的:first-child伪元素的实例。
Design View
字体大小的变化是使得它在排版方面很巧妙的因素。它体大小和排版间距使用em单位。
A List Apart
A List Apart网站向来都被认为具有出色的排版和内容可读性。这是因为好的排版增强了像A List Apart这样以内容为中心的网站,它的漫长的文章占有主要的地位。这个网站的布局有很好的垂直节奏并且使用了很多CSS排版的技术,比如文本居中,大写字母,以及文章中有趣的链接悬停状态。
Mutant Labs
这个网页设计在字体样式(颜色,字体选择,大小和间距)方面做得很好。
Jason Santa Maria
它使用了CSS的background-image文本替换和一些基本的CSS排版技术,使得内容的易读情和可读情都很强。垂直节奏在这个设计中做得非常好。
Darren Hoyt
这里在主体段落中使用了CSS首字母大写(第二部分提到)。
I Love Typography
注意在设计中serif字体被留给了更多的空白,而sans serif字体则更少。这可能可以产生视觉上的层级,因此主要内容是首要的焦点而边栏的内容是次要的关注点。
CSS排版延伸阅读及资源
最后,这里是一些关于CSS排版的阅读材料供你浏览。
结论
设计网页排版需要很好的了解基本排版原则以及通过现实的实现去练习。精?SS字体和文本属性,排版可以变得很漂亮。有效而巧妙的编码习惯应该包括在CSS排版中什么可以(或不可以)和什么不可以(或不应该)。
这结束了我们的CSS排版三篇系列教程。我希望它对你在网页设计当中如何处理排版的理解有帮助。
建议继续学习:
- 中文段首不需要空两格 (阅读:2454)
- CSS排版:技术与最佳实践 (阅读:2404)
- CSS排版: 基础 (阅读:2270)
- 云标签,关键字图排版 html5 canvas版(一) (阅读:2204)
- 空行不空格式排版组织原理 (阅读:2189)
- 繁体中文的混合排版 (阅读:1860)
- 手机版阿里图文排版案例 (阅读:1654)
- 讨论:长文的数字排版与阅读 (阅读:1733)
- 文字编排的易读性 (阅读:1824)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:RockUX 来源: RockUX | WEB、前端、JavaScript、PHP
- 标签: 排版
- 发布时间:2011-06-23 00:10:40
- [67] 如何拿下简短的域名
- [65] Go Reflect 性能
- [62] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [57] android 开发入门
- [56] 【社会化设计】自我(self)部分――欢迎区
- [50] 视觉调整-设计师 vs. 逻辑
- [50] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则