有关Web常用字体的研究?

Windows自带字体:

  • 黑体:SimHei
  • 宋体:SimSun
  • 新宋体:NSimSun
  • 仿宋:FangSong
  • 楷体:KaiTi
  • 仿宋GB2312:FangSongGB2312
  • 楷体GB2312:KaiTiGB2312
  • 微软雅黑:Microsoft YaHei (win7以上)

安装Office多出的字体:

  • 隶书:LiSu

  • 幼圆:YouYuan

  • 华文细黑:STXihei

  • 华文楷体:STKaiti

  • 华文宋体:STSong

  • 华文中宋:STZhongsong

  • 华文仿宋:STFangsong

  • 方正舒体:FZShuTi

  • 方正姚体:FZYaoti

  • 华文彩云:STCaiyun

  • 华文琥珀:STHupo

  • 华文隶书:STLiti

  • 华文行楷:STXingkai

  • 华文新魏:STXinwei

可爱的英文字体

font-family: Comic Sans MS, "Comic Sans MS", Arial, sans-serif;

使用规范

  1. 英文字体优先指定
  2. 先给出中文字体的英文表示,再给出中文表示
  3. 最后使用 serif ,使得前面字体均无效时,字体由系统自行决定。

 

绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的。

但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文,我们可以先进行英文字体的声明。

这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。


font-family规则:

font-family:Verdana,"黑体",sans-serif;

按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Verdana字体,

如果系统内存在这个字体那么浏览器就会使用Verdana字体,

如果没有的话就接着查找黑体,以此类推直到浏览器可以表达系统存在的字体为止。

注意:“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么。

 

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

Arial字体不认识中文,只认识英文,所以,它只能渲染英文数字和一些特殊符号,而页面中的中文就会自动调用后面设置的Microsoft YaHei

 

示例:

例1(小米):
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi MicroHei",sans-serif; 
例2(淘宝技术研发中心):
font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 
例3(简书):
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
例4(加网 ):
font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
例5(淘宝UED):
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
其它
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

 

 

字体何时需要添加引号

1、当字体具体某个取值中若有一种样式名称包含空格,则需要用双引号或单引号表示,如:

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
2、如果书写中文字体名称为了保证兼容性也会添加引号,如:
font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";

 



Web常用字体?

 

 Verdana

推荐10px的Verdana来做英文正文字体,字号最好介于10~14像素之间,超出这个范围不好看。

Verdana应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。 

 

Georgia
可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。

 

 Times New Roman
可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。

(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

 

Arial

最常用的sans serif字体,当字号很小时不容易阅读。

大写的“I”和小写的“l”不好区分,可以考虑用Tahoma字体来替代。

 

Trebuchet MS
与Arial相似,Trebuchet MS比Arial看起来优雅、古典一点。

推荐用来做标题,因为小字号阅读起来会很困难,不太推荐用来做正文字体,(低于13px阅读起来就很累了)。在苹果系统上可以用Helvetica做替代。

 

Tahoma
Tahoma常见的无衬线字体,微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。

它的字体结构和Verdana很相似,其字符间距较小。

用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),

如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

 

Comic Sans MS
手写体。比较的随意字体,可以变换一下口味,建议不要用在正规的金融、政府、商业机构站点。

 

Impact

字体较为粗犷,适合使用在标题上,而不常用在内文。
Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。

 

Courier New
老式打印机字体,有一种独特的机械工整感觉。

呈现计算机编码时,还会用到这种字体。

12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

 

Courier
Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。

原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。

Courier New是Courier的变体,比Courier更具机械味道。

 

Helvetica、Helvetica Neue

一种被广泛使用的西文字体,该字体也一直伴随着苹果用户,是苹果生态中最常用的西文字体。

Helvetica NeueHelvetica的改善版本,且增加了更多不同粗细与宽度的字形,共拥有51种字体版本,极大的满足了日常的使用。

 

 Hiragino Sans GB 

冬青黑体,听说又叫苹果丽黑,日文字体Hiragino KakuGothic的简体中文版。

简体中文有 常规体和 粗体 两种,冬青黑体是一款清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。 

 

Heiti SC

黑体-简,从 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一。

包括iPhone、iPad等设备用的也是这款字体,显示效果不错,但是喇叭口设计遭人诟病。

 

PingFang SC

苹方,在Mac OS X EL Capitan上,苹果为中国用户打造了一款全新中文字体--苹方。

去掉了为人诟病的喇叭口,整体造型看上去更加简洁,字族共六枚字体:极细体、纤细体、细体、常规体、中黑体、中粗体

 

 Lucida Grande

一种西文无称线字体,是苹果公司操作系统Mac OS X的默认西文字体

 

Lucida Sans Unicode
是一种OpenType型的无衬线字体 。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。

该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。

 

WenQuanYi Microhei

文泉驿微米黑,几乎是 Linux 社区现有的最佳简体中文字体。

 

 

参考资料:

网页设计中常用的19个Web安全字体

常用网页字体

如何优雅的选择字体

Web 中文字体应用指南

"5b8b4f53"的意思

如何保证网页的字体在各平台都尽量显示为最高质量的黑体?

 

posted @ 2017-07-30 22:41  Lucky锦  阅读(785)  评论(0编辑  收藏  举报