Web开发中的字体设置

标签: 程序开发 字体 | 发表时间:2016-02-01 22:05 | 作者:标点符
出处:http://www.biaodianfu.com

如何设置Web中的字体

网上找了下,目前应该还没有系统整理过如何设置Web开发中的字体,更多的Web开发人员在进行字体设置的时候也没有深究该如何更加合理的设置字体。

在Web开发中,CSS默认应用的Web字体是有限的(需要考虑到用户的电脑上是否也安装了此字体),虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。一般来讲,浏览器在展示网页时都会按照font-family中设置的字体进行显示。font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。

举例:

font-family:"Comic Sans MS","幼圆","黑体",sans-serif;

按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体,如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体,如果没有的话就接着查找幼圆字体,以此类推直到浏览器可以表达系统存在的字体为止。注意,“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么,可能是“Arial”,也有可能是“Helvetica”。

font-family取值: [ <family-name> | <generic-family> ]

<family-name>

一个字体族的名字。例如”Times” 和 “Helvetica” 都是字体族。字体族名可以包含空格,但包含空格时应该用引号。

<generic-name>

通用家族定义了下面的通用家族关键字:serif、sans-serif、cursive、fantasy和monospace。这些关键字可以被用作编码人员所选择的字体不可用时的通用后备机制。作为关键字,它们禁止使用引号。

通用字体家族详解

serif( 衬线)

衬线字体的字形,如其在CSS中所使用的术语相同,拥有收笔、向外展开说收紧的端点、或者拥有实际的衬线端点(包括粗衬线)。衬线字体通常是按比例隔开的。通常在显示时,它们比‘无衬线(sans-serif)’通用字体家族在粗/细笔划间拥有更明显的变种。CSS将术语‘衬线(serif)’应用于所有脚本的字体,即使对于某些脚本其他名称可能更加熟悉,例如:Mincho(明朝体,日语)、Sung、Song或Kai(宋体、楷书,中文)、Batang(巴塘,韩语)。所有如此描述的字体都可能会被用于表示通用‘衬线(serif)’家族。

serif

sans-serif( 无衬线)

无衬线字体的字形,如其在CSS中所使用的术语相同,其笔划的端点没有格式——没有扩口、交叉笔划、或者其他装饰。无衬线字体通常是按比例隔开的。通常它们比‘衬线(serif)’家族的字体在粗/细笔划间拥有较小的差异。CSS将术语‘衬线(serif)’应用于所有脚本的字体,即使对于某些脚本其他名称可能更加熟悉,例如:Gothic(哥特式,日语)、Hei(黑体,中文)或Gulim(韩语)。所有如此描述的字体都可能会被用于表示通用‘无衬线(sans-serif)’家族。

sans-serif

cursive( 手写体)

手写体字体的字形拥有连接的笔划或其他远超斜体字体字符的手写体特性。这些字形部分或完全的连接在一起,且产生的结果比印刷的字母更像是手写笔、手写刷。对于某些脚本,例如阿拉伯语,其几乎都是手写体。CSS将属于‘手写体(cursive)’应用于所有脚本的字体,即使对于某些脚本其他名称可能更加熟悉,例如: Chancery、Brush、Swing和Script。

cursive

fantasy( 幻想)

幻想字体主要用于装饰包含幽默地表示字符的字体。它们不包括不表示实际字符的Pi或图片字体。

fantasy

monospace( 等宽字体)

等宽字体的唯一要求是所有字形都拥有相同的固定宽度。它们经常被用于显示计算机代码示例。

monospace

如何正确的设置字体

相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。

Windows操作系统:

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

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

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

OS X操作系统:

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

Linux操作系统:(每个发行版都有些差别)

  • 文泉驿点阵宋体
  • 文泉驿正黑
  • 文泉驿微米黑

对于 iOS:系统会自动使用华文黑体。 对于 Android:系统会自动使用 Droid Sans。

首先,以下的字体声明都是很糟糕的,切忌使用:

font-family: "宋体";
font-family: "宋体", Arial;
font-family: Arial, "宋体", "微软雅黑";
font-family: Helvetica, Arial, "华文细黑", "微软雅黑";

接下来,我们一步一步来说明如何定义好的字体声明。

中文字体也有英文名称

很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样:

font-family: SimSun, "宋体";
font-family: "Microsoft YaHei", "微软雅黑";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

永远不要忘记声明英文字体,并且英文字体应该在中文字体之前

记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:

font-family: Georgia, SimSun, "宋体";
font-family: Arial, "Microsoft YaHei", "微软雅黑";

另外还有一个好习惯,就是在最后补充英文字体族的名称。字体族大体上分为两类:非衬线和衬线,它们之间的区别和使用规则请见本文开始介绍的视频。一般来说,你应该这么做:

font-family: Georgia, SimSun, "宋体", serif;
font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif;

请注意:以上两句声明中的宋体和微软雅黑不应该调换(尽管调换了也不会发生错误),这是因为从字体的式样来看,微软雅黑是非衬线的,而宋体才是衬线的。然而中文并不像英文那样严格区分字体族,所以这一点在实际应用当中并不那么重要。

别忘了照顾不同的操作系统

作为一个 Web 开发者,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:

font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;

这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):

  • 对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  • 对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。

为什么Mac字体要放在Win前面

按理来说,大多数网站的主要目标市场还是 Windows 用户的,所以理论上这个才是合理的声明:

font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", STXihei, "华文细黑", Heiti, "黑体", sans-serif;

但实际上却并非如此。在中文字体的用户群体里,很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体(这得归功于 Office for Mac);但极少有 Win 用户去安装 Mac 下的中文字体。

因此,把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响,倒是用来做 fallback 的黑体可能会取代微软雅黑的位置,所以更保险的做法或许是把Mac字体放在最前面。

注意向下兼容

到此为止,我们的字体声明已经很不错了——如果你不必考虑还在使用旧版本操作系统的用户的话。遗憾地是,中文市场还有大量的用户在使用 Windows XP,宋体才是他们的主要中文字体。为了照顾到这些用户,你可以为微软雅黑增加一个 fallback:

font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", Heiti, "黑体", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;

同样地,你看到我们也为 Mac 系统使用了黑体作为 fallback。

字体可用性分析

中文字体

值得注意的是,mac下以及windows下没有公用的中文字体(相关详细对比后续讨论)具体预装简体中文字体列表如下:

 

zhongwen

英文字体

据统计mac以及windows通用的公有字体有:

yingwen

字体实际展示效果分析

Photoshop 设计效果 vs Web实际展示效果

ps-web

微软提供了名为Cleartype的字体平滑技术,但是在XP下,cleartype是默认关闭的。所以在vista以及vista以上系统中,相比于XP,字体渲染更平滑。而Mac Os X中,字体渲染更为饱满,边缘更模糊,视觉上会显得更“粗”一些。总体来说:Mac OS X的字体渲染强调忠实字体设计,最大化保留字体的外形。边缘平滑是为了更好地传递字体设计中的曲线等细节,而在这种方针下,有可能引起小字号时的模糊。
而 Windows 的字体渲染强调文字的锐利和清晰。在操作系统介面和网页正文等小字号的地方比较清晰,但大幅牺牲字体的原貌。

在Mac中,字体的差异性

在Mac中,字体的差异性主要体现在中文上。一些设计师可能会使用Mac进行设计,但是会发现Mac设计出来的页面在还原之后,字体的视觉差异较大,这是因为Mac下的宋体以及Windows下的宋体,Mac下的黑体以及Windows下的黑体是不同的。

Windows系统下,其“宋体”=“中易宋体”,“黑体”=“中易黑体”;Mac系统下,其“宋体”=“华文宋体”,而“黑体”=“华文黑体”,而实际华文黑体的非加粗,加粗分别来自原有的“华文细黑”和“华文黑体。具体对比如下:

win-vs-mac

所以,在Mac下设计时,请注意Windows下字体效果与Mac下的字体效果是不同的,随之,把设计还原成网页后,字体效果自然会和设计稿有一定差距。用Mac访问针于Windows的网页——Mac将使用自己的字体替代

在页面还原中,可以手动设置网页在Mac下使用某种Mac平台下的字体,若不设置的话,将使用浏览器偏好设置中的默认字体,Mac下的Safari默认使用华文宋体,Chrome默认使用华文黑体。如下图所示:

mac-os

在Web上的字体,如果设置了英文字体,将会影响到对应的中文默认字体。如果默认字体是非衬线字体例如Arial,Verdana,Trebuchet,Impact,中文字体自动是选用非衬线字体华文黑体。(使用Impact的时候会加粗)
如果默认字体是衬线字体例如Georgia,Times New Roman,那么中文字体就会自动选成衬线字体华文宋体。一般mac上会按这个规则选择字体,但是经过测试,特殊的是,

  • Courier New=>华文黑体
  • Comic Sans MS=>华文楷体

moren

具体显示逻辑如下:

luoji

对于不同的浏览器,在Mac中实际展示效果如下,

在实测我们可以发现,在Chrome下华文宋体并不能正常加粗。

关于使用13px、15px、17px的宋体

Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点阵(即每个字占的空间大了 1 px,但点阵没变) 。

对于13、15、17px的宋体,其大小与其小一号一样,只是间距多了1px。

13px

所以在Photoshop中所使用的13、15、17px宋体并不能在web上正常还原,设计时应避免使用13、15、17px的宋体。

具体字体展示效果一览

中文篇:

zihao

测试字号:12、13、14、16、18、24、30、36px

其中可看到,

  • 黑体字的锯齿比较严重,
  • 在字号较小时,仿宋体以及楷体在不加粗的情况下效果较差。
  • 小字体中,宋体比微软雅黑要清晰,(因为宋体在12-17px的时候使用的是点阵表示,小于12px及大于17px之后将由字体轮廓栅格化。而微软雅黑只提供轮廓,在字体较小的时候会显得不清晰,所以对于正文建议使用宋体。)

英文篇:

zihaoyingwen

根据以上图标可以看出不同字体在不同字号不同粗细下的展示效果。如有需要请对比实际效果使用。

最后的总结

17px以下的字体设置

font-family: "Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",STXihei, "华文细黑", SimSun, "宋体",sans-serif

17px以上的字体设置

font-family: "Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",STXihei, "华文细黑", Heiti, "黑体", "Microsoft YaHei", "微软雅黑", SimSun, "宋体",sans-serif

参考链接:

相关 [web 开发 字体] 推荐:

Web开发中的字体设置

- - 标点符
网上找了下,目前应该还没有系统整理过如何设置Web开发中的字体,更多的Web开发人员在进行字体设置的时候也没有深究该如何更加合理的设置字体. 在Web开发中,CSS默认应用的Web字体是有限的(需要考虑到用户的电脑上是否也安装了此字体),虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.

默认Web字体样式

- Ashaum - 随网之舞
通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式. 和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高. 实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能,但是极少数会有用户去自定义,一般用也是高级用户.

最佳 Web 中文默认字体

- 景峰 - 岁月如歌
最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂. 以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置. 在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无. 虽然沮丧悲情愤,但分析研究的工作还是得继续:.

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

Web开发者必备:Web应用检查清单

- - ITeye博客
想做一个高质量的Web应用,前前后后要做的事情非常多. 国外开发者 Ata Sasmaz 为 Web 开发者制作分享了一份检查清单,包括应用开发、性能、安全、分析、可用性、可靠性、转换策略、竞争策略这些方面需要注意的事项. 清单内容可能不全面,欢迎大家在评论中补充. JavaScript 允许捕获异常.

Web应用程序的开发步骤

- xxg - 月光博客
  如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现. 那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢. 这个问题没有一个简单的答案,甚至那些教育机构都未必能清楚的知道. 所以,像大多数在这个领域里的web开发人员一样,我们只是通过去做,去实验才学会了这些.

Web开发人员速查卡

- abcd - 酷壳 - CoolShell.cn
无论你是多牛的程序员,你都无法记住所有的东西. 而很多时候,查找某些知识又比较费事. 所以,网上有很多Cheat Sheets,翻译成小抄也好 ,速查卡也好,总之就是帮你节省 时间的. 之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄,还有程序员小抄大全,今天转一篇开发人员的速查卡,源文在这里.

平台是Web开发的未来吗?

- iyuan - 伯乐在线 -博客
  导读:本文是Arjun Khanna关于平台的出现以及它们如何简化Web开发的个人分析,也分析了平台的缺点和它们能够继续存在的因素.   即便现在大部分网站开发人员所构建的网站在结构上非常相似,或是至少在布局方面会有一些根本的共同之处,如果你问一下,他们大多会说他们还有一大堆的苦差使要头疼呢. 虽然客户几乎都要求顶上有横幅,导航条在左边,页面布局不超过三列,但是这并不使他们的工作更简单.