创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

软件大铺的博客

IT技术共享

 
 
 

日志

 
 

CSS排版:例子和工具  

2011-04-17 11:17:15|  分类: Div & CSS |  标签: |举报 |字号 订阅

在这系列文章的前面一部分,我们讨论了CSS排版的一些技术和最佳实践。现在让我们通过一些案例学习,工具以及网页中一系列出色排版来更深入的研究。

这是CSS排版参考三篇系列中的第三部分,这三篇将涵盖从基本语法到最佳实践,以及CSS排版相关工具的内容。

  • CSS排版:例子和工具

CSS排版案例学习

教程和理论很不错,但是没有比案例学习更能够说明事情的了。这里是一系列案例,它们可以为你提供一些关于网页排版在现实世界中的理解。

Southern Savers Case Study: Typography

Southern Savers Case Study, Part IV: Typography

Serif Fonts vs. Sans Serif Fonts: A Working Case Study

Southern Savers Case Study, Part IV: Typography

Fixing Web Fonts, A Case Study

Southern Savers Case Study, Part IV: Typography

Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face

Southern Savers Case Study, Part IV: Typography

CSS排版工具

下面是收集的一些排版相关的工具,他们可以最大程度地帮助你处理CSS排版工作。

Typographic Grid

Typographic Grid

这个预定义的CSS网格组成了垂直节奏。它是任何做CSS排版的人的很好的起点。

Baseline

Baseline

Baseline是一个关注基准网格的排版框架。它具有CSS reset,HTML文本基本风格,网页表单等特点,以及一些新的HTML5元素。

Typograph

Typograph

这个工具具有创作排版的拖拽界面。它有许多功能,包括自动计算大小因此在你做CSS排版时不需要拿出你的计算器了。

TypeTester

TypeTester

选择你计算机里有的字体,并调试它们的line-height,letter-spacing等等。这个工具可以为你生成一个预览你可以很方便地调整你的字体样式直到满意。

FontTester

FontTester

FontTester与上面的TypeTester目的相似. FontTester允许你从方方面面测试和比较不同的字体。 测试好了不同的组合之后,你可以很开心地获取最终的css代码。

Typechart

Typechart

Typechart是不同字体组合的一个展览,对于每一个组合都可以获取它们的代码。它很适合快速挖掘字体组合和样式。

CSS Typeset Matrix

CSS Typeset Matrix

你以像素为标准来考虑吗?这个工具可以帮助你将单位转成em,也可以帮你寻找基于你指定的字号和行高的边距和间距值。

CSS Typeset

CSS Typeset

使用这个工具,你可以改变任何放在左边输入框文字的line-height,word-spacing,color, 样式和文本修饰。调整后马上就能看到更改,然后你可以从输入框中复制最终的代码。

Type Navigator

Type Navigator

你有没有过在网页上见到一个字体然后想知道它是什么字体么?使用这个工具,你可以通过回答一每关于字体特征问题而到答案。脑海里没有特定的字体,你也可以通过它来找到想要的字体。

PX to EM

PX to EM

使用这个工具,简单地用任意一种测量单位(px,em,%或pt)选择一个希望的body font-size,它会帮你转成em。

What the Font

What the Font

你可以使用这个工具通过上传图片来得到字体的名字。

Fontifier

Fontifier

这个基于网页的生成器会根据你手写的样本创建一个字体。这个字体可以在现实网站中使用,通过@font-face规则。样本和创建字体是免费的,但是你需要花费$9来下载字体。

Serif Font Search

Serif Font Search

这个工具允许你通过它的牲查找serif字体。如果你找到了,它会告诉你这个字体的名称以及一些其它信息。

Font Picker

Font Picker

Font Picker允许你根据特点和风格从成百上千种字体中筛选出你要找的字体。

Typekit

Typekit

只要支付订阅飞费用,网页设计师可以在它们的网站中使用额外的网页字体。使用Typkit的好处是不用担心版权问题,这个服务帮你搞定了一切。

CSS排版展览

为了获得灵感,这里给出了一些排版很漂亮的网页设计。我们也会简单的讨论CSS是如何被运用到网页设计的排版中去的。

Matt Hamm

Matt Hamm

这个网站设计的垂直节奏执行得很好,并且通过Typekit提供额外的字体。注意网页设计中使用不同的大小写,字号和其它字体样式来创造出出色的视觉层次

Kilian Muster

Kilian Muster

这个网站使用了一些与众不同的CSS排版技术。网站的名字和口号使用了CSS3的text-shadow来产生CSS3阴影效果

Grid Based Web Design

Grid Based Web Design

这个页面的排版始终坚持一个基线网格,不同文本元素的字号和样式产生了视觉的层次感。

Brizk

Brizk

这个网页设计是如何有效地使用自定义网页字体的另一个例子。整个网站的标题以及不同的文本块都使用了同一种字体。注意每页第一段和标题的字体都使用更大一些的字号——使用CSS的:first-child伪元素的实例。

Design View

Design View

字体大小的变化是使得它在排版方面很巧妙的因素。它体大小和排版间距使用em单位。

A List Apart

A List Apart

A List Apart网站向来都被认为具有出色的排版和内容可读性。这是因为好的排版增强了像A List Apart这样以内容为中心的网站,它的漫长的文章占有主要的地位。这个网站的布局有很好的垂直节奏并且使用了很多CSS排版的技术,比如文本居中,大写字母,以及文章中有趣的链接悬停状态。

Mutant Labs

Mutant Labs

这个网页设计在字体样式(颜色,字体选择,大小和间距)方面做得很好。

Jason Santa Maria

Mutant Labs

它使用了CSS的background-image文本替换和一些基本的CSS排版技术,使得内容的易读情和可读情都很强。垂直节奏在这个设计中做得非常好。

Darren Hoyt

Darren Hoyt

这里在主体段落中使用了CSS首字母大写(第二部分提到)。

I Love Typography

I Love Typography

注意在设计中serif字体被留给了更多的空白,而sans serif字体则更少。这可能可以产生视觉上的层级,因此主要内容是首要的焦点而边栏的内容是次要的关注点。

CSS排版延伸阅读及资源

最后,这里是一些关于CSS排版的阅读材料供你浏览。

结论

设计网页排版需要很好的了解基本排版原则以及通过现实的实现去练习。精通CSS字体和文本属性,排版可以变得很漂亮。有效而巧妙的编码习惯应该包括在CSS排版中什么可以(或不可以)和什么不可以(或不应该)。[English]

这结束了我们的CSS排版三篇系列教程。我希望它对你在网页设计当中如何处理排版的理解有帮助。

  • CSS排版:例子和工具

转自:http://www.cnblogs.com/beiyu/archive/2011/04/14/css-example-tools.html
  评论这张
 
阅读(495)| 评论(0)
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014