Web与排版学上的字体问题

web|问题

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。

事关大小

字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

1、相对大小包括:em, ex, px
2、绝对大小包括:in, cm, mm, pt, pc
3、em 就是相对 font-size 制定的大小而言的,例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin,当 em 本身用于 font-size 时,指的是它所继承元素的相对大小。
4、百分比也是相对 font-size 而言的。

因此我认为,em 和百分比都不适合设置字体的大小,因为相互变动的因素太多了,修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的,这不适合汉字的大小,所以也否决了。px 是根据当前显示设备的解析度而言的,同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为,如果网页中应该存在作为绝对参照系的长度,那么 pt 和 px 应该是首选,其他的长度根据这个绝对参照系,按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的,而问题在于,屏幕的解析度要比纸张低得多,所以如果直接把字体按照纸张上印刷的那个大小显示,肯定是看不清的,仅就英文字体而言,许多细微的点划、衬线都没法在那么低的解析度下表现出来,所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的,有一种看法认为,尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读,但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

 对于中文字体的情况有所不同,中文字体在屏幕上的清晰显示依赖的是点阵字体,或者简单的说,就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun),这套字体是华康公司 (Dynalab) 设计的,对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体:

那么比这个大小要大的汉字呢?就要依赖操作系统的字体圆整 (anti-alias,以下简称 aa) 技术了,一般大家认为,Mac OS X 和 Linux 下的 AA 要比 Windows 的 ClearType 好很多。然而不管怎么说,用太大的汉字是比较危险的。

事关空间

今天新加一节,本来计划好的,昨天写的时候又忘了。

这里的空间指的是 letter-spacing 和 line-height,也就是字间距和行间距。首先,良好的行间距是排版最重要的地方,你可能不能自由选择字体,字号的选择也受诸多限制,但至少行间距的选择是可以完全由自己控制的。

所谓的 line-height,指的是两行字基线 (base-line) 之间的距离,什么是基线?下面图中的红线便是,对于汉字,则应该就是底部的水平线。

在印刷排版中,习惯用 pt 来指定行高,比如所谓采用 12/14pt 排版,就是字号 12pt,行高 14pt;而 Web 中似乎习惯用百分比来设置,这个见仁见智,只要自己看得顺眼就行。但必须注意的是,浏览器默认的行高一定是不够的,尤其对于希望浏览者长时间阅读的内容,行高 - 字号至少要有 2pt 以上。更苛刻的排版学家通常推荐 3pt 以上,但毕竟 Web 上可以随意一点。

但 letter-spacing 又是另一回事,我没学过书法,汉字的间距不好多说,但英文字母的间距却不应该随便调整,尤其不宜统一调整。因为实际上,Type1、TrueType、OpenType 这些字体格式中都包含了一个叫做 kerning table 的东西,也就是字母间距的微调。为什么要做这种微调?两个简单的例子是 AV 和 We,如果不做微调,“A”和“V”之间的距离就会过宽,“e”也不会像我们平常书写的那样和“W”契合得那么自然,下图显示了 Adobe Reader 中,使用 Sabon Next 字体时的 kerning 效果:

大部分的 User Agent,当然也包括你的浏览器,都会根据字体的 kerning table 自动做这个微调工作,但倘若你使用 CSS 来修改 letter-spacing,这个工作就白费工夫了。所以我才建议不要随便调整 letter-spacing。比如 WordPress 原来的 Classic Theme (Dave Shea 设计,Matt 修改),就犯了这个毛病。

事关风格

谈到英文字体,可以扯出许多掌故,不过这里且说说 Web 开发有关的。

关于 Times New Roman,首先,与大家一般保留的印象不同,Times 不应该是一个适合长时间阅读的字体,尤其不适合书籍的阅读,因为众所周知的,Times 一开始是给报纸设计的一种字体,而为了适应报纸这种在劣质纸张的快速印刷的环境,字体的衬线不得不夸张一些,否则细节很容易被油墨破坏,所以把 Times 用在书籍上其实是一种很不负责任的方式。

比这个更不负责任的是用 Times New Roman,Times New Roman 其实是一种压缩 (Condensed) 了的 Times,比原来的 Times 更细长,更不易读了。下面的一个比较应该比较容易分辨出优劣来:

Times 与 Times New Roman 的比较(点击下图可放大

时间: 2024-09-17 03:27:24

Web与排版学上的字体问题的相关文章

学院观点:Web 与排版学上的字体问题

web|问题 关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议. 事关大小 字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明: 相对大小包括:em, ex, px 绝对大小包括:in, cm, mm, pt, pc em 就是

Web 与排版学上的字体问题

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议. 事关大小 字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明: 相对大小包括:em, ex, px 绝对大小包括:in, cm, mm, pt, pc em 就是相对 font

超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版

日期:2012-10-9  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例

Web端的设计:让我们的web端产品跟上时代的脚步

文章描述:如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 如今,随着智能手机.平板电脑等移动手持设备的普及,越来越多的Web网站都在向这些平台做兼容.同时,这些移动设备上的视觉设计与交互设计也在影响着Web端的设计. 所以,现在我们的设计是不是要变得更加的popular一点呢?是不是可以总结出一些方法让我们的web端产品跟上时代的脚步呢?

Silverlight结合Web Service进行文件上传

Silverlight跨浏览器支持已经有了长足的进步,而且与.NET开发语言的完美结合,这些都使得在 Windows平台下开发富客户端应用Silverlight应该比Flash更有优势,当然Silverlight代替Flash应该为 时尚早,而且现有的功能与Flash仍有不小差距,但是对于开发者而言早一点接触.使用的话,对于改进 网站用户的体验,提高网站的交互能力和界面很有帮助. 本文就如何使用Silverlight调用Web Service进行文件上传,Silverlight用于界面显示.用户

photoshop制作写在公路上的字体教程

             photoshop制作写在公路上的字体教程

在Win8系统电脑上添加字体的方法

  在Win8系统电脑上添加字体的方法          首先可以在百度.360搜索等平台搜索"字体下载",然后就可以找到很多字体下载网站.字体安装到电脑其实非常简单,只要将下载的格式为.ttf格式或.fon格式文件拷贝到C盘的的字体文件夹中就行了. 具体位置在:本地磁盘C:windowsfonts (注:系统如果安装在D盘,那就是进入D盘哦) 安装后,我们可以打开WORD或者PS等查看字体是否安装有了新字体,之后选择即可打出个性文字了,让你的文件因字体而变得更出众,请从安装字体开始吧

java web问题,用户上传头像,我应该存在哪里?

问题描述 java web问题,用户上传头像,我应该存在哪里? 一般存在哪里?,存在服务器上,我重新发布就没啦.一般存在哪里?,存在服务器上,我重新发布就没啦 解决方案 开一个叫upload的文件夹,存在里面.部署的时候不要删除原先的应用. 解决方案二: 上传到一个目录可以就放在当前工程下面.

web方向-我是大二学生,求前辈提点一下WEB方向应该学什么

问题描述 我是大二学生,求前辈提点一下WEB方向应该学什么 都是大三才分方向的,但是我决定提前一年自己先着手学习,或许我连WEB是什么都不是很清楚,语言也只学了C,正准备学C++,基础很差,但是我需要一个学习的方向,我想制作个人网页的全套流程,听说要学java,还有什么?不胜感激 解决方案 先学习基础吧,然后课程设计的时候你就知道了,看看jsp,servlet ,tomcat这些 在试试js css 然后自己做点小的web工程 试试,自己不动手说啥都白说