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

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

前言

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

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

 

但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个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-10-22 09:36:39

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

中文字体网页开发指南

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

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

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

QT开发(四十一)——XML文件解析基础

QT开发(四十一)--XML文件解析基础 一.XML文档简介 XML(Extensible Markup Language,可扩展标记语言),是一种通用的文本格式,被广泛运用于数据交换和数据存储,而不是显示数据.XML的标签没有被预定义,用户需要在使用时自行进行定义.XML是W3C(万维网联盟)的推荐标准.相对于数据库表格的二维表示,XML使用的树形结构更能表现出数据的包含关系,作为一种文本文件格式,XML简单明了的特性使得它在信息存储和描述领域非常流行. <?xml version="1

QT开发(三十一)——NotePad实例开发

QT开发(三十一)--NotePad实例开发 一.界面开发 NotePad使用主窗口作为顶层窗口组件,使用QMainWindow作为基类,QMainWindow内部封装了菜单栏.工具栏.中央组件.停靠组件.状态栏等.QMainWindow内置了布局管理器,基本的组件布局如下: 使用二阶构造模式构建NotePad界面. MainWindow::MainWindow() {     resize(800, 600); }   MainWindow::~MainWindow() {   }   Mai

java微信开发API解析(七)-网页开发-微信网页授权

java微信开发API解析(七)-网页开发-微信网页授权 全局说明 * 详细说明请参考前两篇文章. 本文说明 本文主要完成获取用户基本信息的工作,包括(昵称.头像.地址.国家等基本信息) 对于snsapi_base和snsapi_userinfo我们只演示关于snsapi_userinfo.因为snsapi_userinfo更难,如果能够理解snsapi_userinfo,那么snsapi_base不在话下. 对于该部分(微信网页开发)我们只介绍如何获取用户基本信息,对于开发样式库,js-SDK

[转]微信公众平台开发(四) 简单回复功能开发

本文转自:http://www.cnblogs.com/mchina/p/3155072.html 一.简介 微信公众平台可以根据用户发送的信息进行判断,然后给出对应的回复,具有良好的交互性.下文将模拟简单的回复功能,根据这个案例,开发者也可以基本理解微信交互的原理,进行更深层次的开发. 二.思路分析 用户发送过来的文本信息,我们可以提取关键字,通过简单的 if...elseif...else... 实现. 关键代码如下: if($keyword=="你好"){ $contentStr

微信公众平台开发(四) 简单回复功能开发

原文地址:http://www.cnblogs.com/mchina/p/3155072.html 一.简介 微信公众平台可以根据用户发送的信息进行判断,然后给出对应的回复,具有良好的交互性.下文将模拟简单的回复功能,根据这个案例,开发者也可以基本理解微信交互的原理,进行更深层次的开发. 二.思路分析 用户发送过来的文本信息,我们可以提取关键字,通过简单的 if...elseif...else... 实现. 关键代码如下: if($keyword=="你好"){ $contentStr

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

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

BizTalk 开发系列(四十一) BizTalk 2010 BAM 安装手记

使用64位系统可以支持更大的内存,现在服务器基本上都使用64位系统.微软从Windows Server 2008 R2开始服务器版的操作系统也只支持64位了,不过对于像BizTalk这种“繁杂的东西”在64位系统下确实增添了不少麻烦. 微软于9月底正式发布了面向企业SOA解决方案的最新产品BizTalk Server 2010.最新想搭一个最新的环境.本为装了BizTalk不下百遍的我,应该可以很快就搞起来.但是这次安装太纠结了.特别是在BAM方面,竟然耗了近 两天(白天上班)才搞定.是不是技术