网页安全字体的分类

不同设备、不同操作系统中的内置字体往往各不相同，即使使用相同的设备和操作系统，也会因为后期用户安装、更新软件等操作而直接或间接的安装新的字体，导致与其它用户的字库不同。因此，在选择网页字体时需要考虑这种差异，以免不同用户查看到的网页字体显示差异太大，通常选择广泛使用的字体作为常规的文本显示/打印字体，这类字体常称作网页安全字体。
网页安全字体按照样式通常可分为如下五类：serif (衬线体), sans-serif(无衬线体), monospace(等宽体), cursive(草书体) 和 fantasy(幻想体) 。用户浏览器一般会为这五种字体指定默认的可用字体。设计网页时可用CSS语法指定具体的字体，当具体字体都不可用时，将采用浏览器的默认字体。具体语法如下：
font-family: [font-family-names][, serif | sans-serif | monospace | cursive | fantasy];
例如：
body {font-family: Georgia,Helvetica, serif;}
当Georgia字体可用时使用Georgia字体；当Georgia不可用而Helvetica可用时使用Helvetica字体；否则使用浏览器默认的serif字体。
  • 衬线体
    衬线字体（serif）优雅纤细、正经严肃，在字的笔画开始和结束处有额外的装饰，且笔画的粗细会有所不同，整体上显得格外精致、易于识别，比较适合作为标题、较短的文字段落、印刷字体或较正规的文字内容。
    典型中文衬线字体：宋体、仿宋；
    典型英文衬线字体：Times New Roman、Georgia、Courier；
  • 无衬线体
    无衬线字体（sans-serif）给人一种轻松休闲、干净简洁的感觉，字体的笔画粗细一致、曲率相同、线条笔直、转角锐利，整体上显得简洁、现代、柔美、有力，比较适合作为正文，同等字体下显得比衬线字体大。
    典型中文无衬线字体：黑体、微软雅黑、苹方；
    典型英文无衬线字体：Helvetica、Arial、Tahoma；
  • 等宽体
    等宽字体（monospace）中每个字符的宽度相等，通常用于显示和打印计算机代码。
    典型的中文等宽字体：宋体、黑体、微软雅黑；
    典型的英文等宽字体：Courier、Consolas、Monaco、Lucida Console、Source Code Pro；
  • 草书体
    草书字体（cursive）草的字形通常具有连接笔划或它草书特征，字形部分或完全连接，结果看起来更像是手写字。
    典型的中文草书字体： 楷体、行楷；
    典型的英文草书字体：Comic Sans MS、Comic Sans、Apple Chancery、Lucida Handwriting；
  • 幻想体
    幻想字体（fantasy）主要是装饰性或表达性字体，包含字符的装饰或表现形式，通常用作艺术字体或图标字符。
    典型的中文字体：网页中不常用
    典型的英文字体：Impact、Marker Felt、Trattatello

字体规范

  1. 不要再任何单张网页上使用三种以上的字体；
  2. 不要在段落中间修改字体，除非有明确的理由；
  3. 无衬线字体更适合于网络使用，衬线字体更适合于打印；
  4. 等宽字体更适合于程序代码和打印；
  5. 草书字体适合添加手写样式；
  6. 幻想字体适合添加音标符号和艺术字。

推荐网页字体风格

  • 正文样式1:
    风格特点：黑体，无衬线
    Font：’Helvetica Neue‘,Helvetica,Arial,’PingFang SC’,’Microsoft YaHei’,’WenQuanYi Micro Hei’, STHeiti,SimHei,sans-serif
  • 正文样式2:
    风格特点：宋体，衬线
    Font：Georgia,’Times New Roman’,’Songti SC’,STSong,NSimSun,SimSun,serif
  • 正文样式3:
    风格特点：仿宋，衬线
    Font：’Courier New’,Courier,STFangsong, FangSong, serif
  • 正文样式4:
    风格特点：楷体，草书（正规）
    Font： ‘Kaiti SC’,STKaiti,KaiTi,cursive
  • 正文样式5:
    风格特点：行楷，草书（随性）
    Font：’Xingkai SC‘, STXingkai,XingKai,cursive
  • 代码样式1:
    风格特点：等宽，无衬线
    Font：Consolas,Monaco,’Source Code Pro’,’PingFang SC’,’Microsoft YaHei’,’WenQuanYi Micro Hei’, STHeiti,SimHei,monospace
  • 代码样式2:
    风格特点：等宽，有衬线
    Font: ‘Courier New’,Courier,’Songti SC’,STSong,NSimSun,SimSun,monospace
  • 风格样式1:
    风格特点：英文特粗
    Font：Impact, ‘Helvetica Black’, ‘Arial Black’, sans-serif
  • 风格样式2:
    风格特点：英文活跃
    Font：’Comic Sans MS’,’Comic Sans’,cursive

 

参考文章：