[转] 中文字体网页开发指南

字体的选择,是网页开发的关键因素之一。

合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。

但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做。)

不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。

下面是目前中文字体的最佳实践,主要参考了Kendra Schaefer的文章。

一、操作系统的预装字体

操作系统决定了开发者可以使用的字体。所以,第一步,我们必须了解操作系统到底提供哪些字体。

Windows操作系统:

  • 黑体:SimHei
  • 宋体:SimSun
  • 新宋体:NSimSun
  • 仿宋:FangSong
  • 楷体:KaiTi
  • 仿宋GB2312:FangSongGB2312
  • 楷体GB2312:KaiTiGB2312
  • 微软雅黑:Microsoft YaHei (Windows 7开始提供)

OS X操作系统:

  • 冬青黑体: Hiragino Sans GB (SNOW LEOPARD开始提供)
  • 华文细黑:STHeiti Light (又名STXihei)
  • 华文黑体:STHeiti
  • 华文楷体:STKaiti
  • 华文宋体:STSong
  • 华文仿宋:STFangsong

如果用户装了MicroSoft Office,还会多出一些字体。

  • 隶书:LiSu
  • 幼圆:YouYuan
  • 华文细黑:STXihei
  • 华文楷体:STKaiti
  • 华文宋体:STSong
  • 华文中宋:STZhongsong
  • 华文仿宋:STFangsong
  • 方正舒体:FZShuTi
  • 方正姚体:FZYaoti
  • 华文彩云:STCaiyun
  • 华文琥珀:STHupo
  • 华文隶书:STLiti
  • 华文行楷:STXingkai
  • 华文新魏:STXinwei

二、font-family命令

CSS的font-family命令,指定了网页元素所使用的字体。下面是一个例子。


font-family: Georgia, "Times New Roman",
             "Microsoft YaHei", "微软雅黑",
             STXihei, "华文细黑",
             serif;

它的规则有三条。

(1)优先使用排在前面的字体。

(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。

(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

根据这些规则,font-family应该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体,这往往很丑陋。

上面图片中,红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。

为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。比如,"微软雅黑"的英文名称是Microsoft YaHei。

此外,中文字体的中文名称,以及由多个单词组成的英文名称,应该放在双引号内。

三、 Windows平台和Mac平台

由于Windows和Mac的中文字体没有交叉,所以应该同时为两个平台指定字体。

常见的做法是,Windows平台指定"微软雅黑"(Microsoft YaHei),Mac平台指定"华文细黑"(STXihei)。

四、衬线体和无衬线体

所谓"衬线体"(Serif),指的是笔画的末端带有衬线的字体。

就像英文字体一样,中文字体也可以分成"衬线体"和"无衬线体"(San-serif)。比如,对于繁体字来说,微软正黑(Microsoft JhengHei)是无衬线体,新细明体(PMingLiU)是衬线体。

对于简体字来说,微软雅黑(Microsoft yahei)是无衬线体,宋体(SimSun)是衬线体。

一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。

五、几种常见中文字体

(1)宋体(SimSun)

宋体是最常见的中文字体,如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。

(2)微软雅黑(Microsoft YaHei)

微软雅黑的美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。

但是,Windows XP没有预装这种字体,这时可以选择黑体(Simhei)替代。不过,黑体比较粗,不应用于字号较小的文字。

(3)仿宋(FangSong)

这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。

它在Mac平台的对应字体是"华文仿宋"(STFangsong)。

(4)楷体(KaiTi)

楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。

它在Mac平台的对应字体是"华文楷体"(STKaiti)。

时间: 2024-08-05 21:15:20

[转] 中文字体网页开发指南的相关文章

网站开发进阶(四十一)中文字体网页开发指南

网站开发进阶(四十一)中文字体网页开发指南 前言 字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响.   但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开

中文字体网页开发指南

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

Font-Spider 一个神奇的网页中文字体工具,就是这么任性

文章摘要:    1>>  font-spider 字体神奇 由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf. 方正喵呜.ttf 我看了一些好看的测试活动页面的demo,页面的(问题和答案)都是直接切成的小图片,我看了也是楞了,难怪这么好看.于是本想着也这么做,结果发现了一个很严重的问题. 我计算了一下,我们的问题大概有60道,而每道题的答案有3.4.5个,算了一个下,如果是切成小图片来维护的话,至少也得有: 60*4=240 张图片吧.于

解决Ubuntu下Chrome浏览器网页中文字体混乱

在Ubuntu下使用Chrome浏览器时碰到了网页中文字体混乱的现象: 黑体和楷体混杂,看起来非常不美观. 这是由于许多网页并没有指定字体,然后浏览器将调用系统默认字体配置. 首先,安装文泉驿字体: sudo apt-get install ttf-wqy* 编辑字体设置 sudo gedit /etc/fonts/conf.avail/69-language-selector-zh-cn.conf 可以设置字体的优先级,个人比较喜欢文泉驿正黑(WenQuanYi Zen Hei) 最后,重启电

Angularjs中文版本开发指南发布

Angularjs中文版本开发指南发布 2014-02-16 15:49 by 破狼, 29069 阅读, 9 评论, 收藏,  编辑 从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天.想知道为什么Angularjs会这么火,请移步angularjs移除不必要的$watch. 也是一次偶然的机会,在Angular.js中文社区群里相遇一群Angular的爱好者,在一次巧妙的交谈,大家对于Angular官方的Gu

iOS WKWebview 网页开发适配指南

iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 UIWebView的老.旧.笨,特别是内存占用量巨大的问题.它使用与Safari中一样的Nitro JavaScript引擎,大大提高了页面js执行速度. 切换方

QT开发安卓APP的中文字体问题

1.安卓默认的字体为DroidSansFallback:谷歌中文字体 由于手机和PC字体的不一致,导致PC上开发的APP到目的安卓设备中文显示为小方框. 故需要要在qt的main函数中设置系统字体: //将字体文件名传给addApplicationFont,得到字体的Id int fontId = QFontDatabase::addApplicationFont("/system/fonts/DroidSansFallback.ttf"); //将字体Id传给applicationF

在网页中使用特殊中文字体成为可能

转载 http://www.cnblogs.com/Kummy/p/4442142.html ??以前还不知道这种办法的时候,如果要在网页中显示特殊中文字体的话,需要导入整个全部的.ttf字体文件,而文件高达好几兆,根本是不可取的,偶然间看到以上链接的文章,新的思路新的方法,将网页中需要用特殊字体的中文文字,进行打包压缩. 1.安装font-spider npm install font-spider -g 2.在css中使用webfont @font-face{ font-family: 'p

web前端入门到实战:网页开发中字体,字号与尺寸对应表

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的.整齐划一,井然有序才终是大家之道. 1.字体 在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距. 在网页开发中,普遍偏爱微软雅黑与宋体,14/16px,非衬线体. 2.字号 印刷文字有大.小的不同变化,排版及图象处理软件中汉字字体大小的计量,前主要采用印刷业专用的号数制和点数制