网络编程
位置:首页>> 网络编程>> 网页设计>> 谈谈网页设计中的字体应用 (2) serif 和 sans-serif(2)

谈谈网页设计中的字体应用 (2) serif 和 sans-serif(2)

作者:棕熊 来源:棕熊blog 发布时间:2009-11-24 13:04:00 

标签:字体,font,css,font-family,serif,sans-serif

- 其他的通用字体族

印刷学中,除了serif 和 sans-serif 之外,通常还有 monospace 等宽字体、scripts 手写体(比如花体)、blackletter 铅字体(也叫 gothic 哥特体。严格的说,很多常用的serif字体其实是gothic字体)、ornamental 装饰体(那些在文字笔划上或者周围有装饰花纹的字体。很多中世纪书籍上很常见。如果脑残体真的成了字体,那么应该可以算装饰体吧……)和 symbol 符号字体(比如有名的wedding123……)。

  • 不过CSS对通用字体族的定义有点不一样。除了serif 和 sans-serif 之外,CSS还允许以下几个通用字体族:

    • monospace 等宽字体

      所谓的等宽字体,是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致,所以特别容易对齐,能快速精确的定位到某行某列,因此经常用来显示代码。

      要注意的是,一个等宽字体同时也可以是一个衬线(或者非衬线)字体。比如 Courier New 这个字体也可以看作是一个serif(严格的说是gothic)字体。

    • cursive 书写体:相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。

    • fantasy 梦幻体:相当于印刷学中的装饰体。非常少见的一种字体,基本没有参考价值。

要注意的是,CSS中不支持symbol字体族。使用symbol类的字体请用图片。

- 一些你不知道的事情

  • 中文的黑体其实是衬线字体。大家可以看下面的图:

    大家可以看到,其实黑体的确是经过末端加强的,所以很多印刷品的正文也会使用黑体。像这种使用温和的末端加强,笔划粗细大致一致的字体,其实也可以被称为petit-serif/小衬线体。(那些类似于宋体一样有显著末端加强,并且笔划粗细有明显区别的,通常称为slab-serif/雕版衬线体)

    只是很遗憾,因为诸多的硬件原因,在显示器上实际显示黑体时,大家还是可以把它看作一个无衬线字体

  • Italic 不是斜体

    斜体是oblique。Italic 顾名思义,是意大利体。Italic 是一种书写方式(calligraphy script),而oblique 是一种印刷样式,两者是不同的东西。中学英语习字册交授的书写方式就是意大利体。除了意大利体外,比较流行的书写方式还有法兰西体(就是传说中的花体字,正名是French Script)、哥特体、亚伯拉罕体等等。

    很多考究的字体都会为意大利体定制一套特殊的字体,而不是简单的显示成斜体。比如下面的图片里,三行文字都是Georgia字体。第一行普通;第二行是oblique,也就是斜体;第三行才是真正的italic意大利体。

    大家仔细看第三行的a, l, i, e 等字母——很明显的看出区别了吧。实际上,Georgia Italic 和 Georgia 在系统内是两个不同的字体文件。当我们指定 font-style: italic 的时候,系统就会自动搜寻是不是存在Georgia Italic这个字体,并尝试使用这个字体来显示文字内容。

    按理说当我们用 font-style: oblique 指定字体样式时,浏览器不应该去寻找Georgia Italic这个字体,而直接将Georgia字体倾斜显示,所以理论上应该得到图中第二行文字的效果。可惜,连W3C在CSS规范中,自己的参考实现也说是“如果UA不能正确显示italic 和oblique, 可以使用italic来代替oblique显示”,所以几乎没有浏览器实现区分italic 和oblique。哪怕你设置的font-style是oblique, 你也会发现,浏览器显示的也还是italic

 

今天就到这里了。下一讲我会谈谈如何构建一个合理的font-family,并推荐几个使用的字体组合给大家。那么,再见了哟

0
投稿

猜你喜欢

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