CSS font-family 网页字体使用小结

前言

一直到最近才开始调整博客的字体,之前都是全站微软雅黑了事。慢慢调整后发现 font-family 这个属性相关的知识还是不少的,整理一下常用的部分,分享于此。

基本用法

使用语法

1
2
font-family: 字体名1, 字体名2, 字体名n, 字体系列名;
font-family: Verdana, Helvetica, "Microsoft YaHei", Arial;

语法说明

  1. 系统将选择列表中最先可用的字体来显示文字;
  1. 因为规则1,通常在最末添加一个 generic-family 字体系列名,保证文字获得相似的显示效果;
  2. 因为规则1,西文字体名应该写在中文字体前,这样才能中英文同时使用不同字体;
  3. 字体名为中文或包含空格等时,需要加双引号"“才能正确识别;
  4. 中文字体建议也是用其对应英文字体名,如"微软雅黑"为"Microsoft YaHei”,以提高编码兼容性。

常见字体系列

Serif 衬线字体

  • Times New Roman, Georgia 和宋体都是很常见的衬线字体;
  • 特征: 文字笔划的开始或结束处有额外的装饰,笔划有粗细之分。

serif

Sans-serif 无衬线字体

  • Arial, Verdana, Tahoma, 微软雅黑都是很常见的无衬线字体;
  • 说明: sans-源于法语前缀,意思为没有。Sans-serif 也就是指无衬线字体。
  • 特征: 字体比较圆滑,笔划较为均匀。

sans-serif

  • 字体选用: 有种说法是正文多用衬线字体,易于区分;标题多用无衬线字体。不过这个也看个人喜好,我更习惯正文用无衬线字体。如果实在不知道怎么选,随便找一个自己看着舒服的网站,套用它的字体样式好了。

Monospace 等宽字体

  • Courier New, Consolas, Menlo 都是比较常见的等宽字体;
  • 特征: 字母、数字、空格以及其他符号所占宽度都一致。识别度高,易于对齐和定位,通常用于显示代码。

Monospace

  • 一个优秀的代码字体除了等宽外,还应该能较好地区分出0 o O i l 1 I "" '' [] () {} 等字符。

Cursive 手写体

  • Comic Sans, Author, 华文行楷都是比较常见的仿手写体;
  • 特征: 模仿人的手写体,笔划圆滑或者有连笔等装饰。英文的花体,中文的行书草书等都属于此类。

cursive

获取字体名称

同一个字体在不同系统和应用中可能会显示为不同名字,但其内部一般有一个不变的英文名字。CSS font-family 需要引用的就是字体的内部名字。

本地字体

  • Win 上通过搜索或控制面板进入字体文件夹,然后双击字体查看字体名称;
  • 通过软件,如记事本、Office 等也可以查看字体名字:

font-a1

  • Mac 上搜索打开字体册即可,中间一栏显示的就是字体名称:

font-a2

网页字体

  • 审查元素,查看生效的 font-family:

font-a3

font-a4

字体图标

使用@font-face引入字体后,可以像使用文字那样,无损的控制图标的大小,颜色等样式。常见的有 Webdings,Wingdings, Font Awesome .

font-icon

备用记录

字体配置

  • 下面是自己目前比较常用的字体配置,通常按系列设置为 CSS 预处理器的变量,方便调用。
1
2
3
4
5
6
7
8
//中文
font-chs = "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei"
//无衬线字体 sans-serif
font-sans = Verdana, "Helvetica Neue", Helvetica, Tahoma, Arial
//衬线字体 serif
font-serif = Times, Georgia
//等宽字体 monospace
font-mono = Menlo, Consolas, "Source Code Pro", Inconsolata, Monaco, "Courier New"

字体英文名

  • 一些常见中文字体的对应英文名。
-中文名英文名
1 苹方PingFang SC
2 冬青黑/苹果丽黑Hiragino Sans GB
3 思源黑体Source Han Sans CN
4 华文细黑STHeiti Light [STXihei]
5 华文黑体ST Heiti
6 华文楷体STKaiti
7 华文宋体STSong
8 华文仿宋STFangsong
9 丽黑 ProLiHei Pro Medium
10 丽宋 ProLiSong Pro Light
11 标楷体BiauKai
12 苹果丽中黑Apple LiGothic Medium
13 苹果丽细宋Apple LiSung Light
14 新细明体PMingLiU
15 细明体MingLiU
16 标楷体DFKai-SB
17 (中易)黑体SimHei
18 宋体SimSun
19 新宋体NSimSun
20 仿宋FangSong
21 楷体KaiTi
22 仿宋_GB2312FangSong_GB2312
23 楷体_GB2312KaiTi_GB2312
24 微软正黑体Microsoft JhengHei
25 微软雅黑Microsoft YaHei
26 隶书LiSu
27 幼圆YouYuan
28 华文中宋STZhongsong
29 方正舒体FZShuTi
30 方正姚体FZYaoti
31 华文彩云STCaiyun
32 华文琥珀STHupo
33 华文隶书STLiti
34 华文行楷STXingkai
35 华文新魏STXinwei
36 文泉驿微米黑Wenquanyi Micro Hei
37 文泉驿正黑WenQuanYi Zen Hei
38 文泉驿点阵正黑WenQuanYi Zen Hei Sharp

相关链接

  1. Font Awesome: http://fontawesome.io/
  2. Webdings和Wingdings字符码对应表: http://dwz.cn/2jOjYi
  3. CSS魔法堂:再次认识 font by 肥仔John on 2015/3/3: http://www.cnblogs.com/fsjohnhuang/p/4310533.html
  4. 有字库-中文在线字体: http://www.youziku.com/
  5. 谈谈网页设计中的字体应用 (2) serif 和 sans-serif by 棕熊 on 2008/5/6: http://www.cnblogs.com/ruxpinsp1/archive/2008/05/06/font-in-front-end-development-2.html
  6. Serif 和 Sans Serif 字体的区别 by 冰火九九 on 2013/11/4: http://blog.jobbole.com/50828/
  7. Chinese Web Font Guide by Kendra Schaefer on 2012/6/11: http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
  8. Fonts.css – 跨平台中文字体解决方案: http://zenozeng.github.io/fonts.css/
署名 - 非商业性使用 - 禁止演绎 4.0