有关Web常用字体的研究?

时间:2023-02-09 05:35:22

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"的意思

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