网站开发中的字体设置

字体的选择，是网页开发的关键因素之一。合适的字体，对网页的美观度（或可读性）有着举足轻重的影响。由于字体设置在代码实现上非常的简单，导致了大多数开发人员都没有重视。在前端、设计分工协助的状态下很容易导致字体设置成为三不管的状态。

衬线体和无衬线体

在西文（英文）字体中，最简单的字体分类方式是将字体分为衬线体（serif）与无衬线体（sans-serif）。其中sans在法语中的意思是“没有”。衬线体与无无衬线体的区分方式非常的简单，只需要判断文字的笔画开始部分或结束部分是否有装饰细节即可，如下图：

在印刷品的正文中，衬线体用的比较多。而在屏幕显示中更多的会采用无衬线体。主要原因是油墨印刷时，将油墨印刷到纸张上时，在没有非常精确的控制好油墨量时，非常容易造成文字变粗或变细，从而导致颜色太深或太淡，在阅读时产生疲惫。如果采用有棱角的衬线字体，可以使得文字笔画的开始或结束更加容易识别到，阅读效率会更高。而在电脑屏幕上，由于不涉及到油墨问题，衬线体在笔划上有过多的点缀很容易造成视觉疲劳。

另外，为了使得标题与正文形成差异，一般在使用与正文相反的字体。如在印刷品中标题采用无衬线体，由于标题要比一般的文字大或者粗，且不会大面积出现，所以采用无衬线体不会影响到阅读。同理，屏幕上的标题也不会大面积出现，采用衬线体也不会带来视觉疲劳。

网页中的字体渲染

在衬线体和非衬线体的介绍中谈到了字体的渲染，而字体的渲染又与各个操作系统有非常大的关联，为了更好的掌握字体在计算机屏幕上的应用，这里再来学习下字体渲染的相关知识。

理想形状与三代渲染策略

理想形状

理想形状，如上图所示，指的是使用矢量图形描述出来的形状。当文字需要在屏幕上显示时，字体形状需要用一定数量的像素栅格来呈现。你可能已经注意到了，理想形状示意图里的字母e并不能和灰色的网格（可以理解为像素点）对应起来，尤其是曲线的边缘，只占了网格的一部分。理想的形状与实际呈现的现状受单位面积内的像素点影响，原理上像素密度越密，呈现效果与理想形状越接近。

黑白渲染

黑白渲染是最早人们使用的渲染技术，这种渲染方式只使用黑白两种颜色来表达文字的形状。这种方法也被称为二值渲染（bi-level rendering）。目前打印机就仍在使用这种方法，由于打印机的高输出分辨率，打印的结果能很好地再现原图。但是在屏幕上，有限的像素（屏幕通常是72dpi，而印刷时通常使用300dpi。即印刷品的像素密度是屏幕的4倍）无法很好地传递字体形状的微妙之处。虽然我们无法分辨单个像素，但是肉眼仍可觉察到弧形轮廓线上的毛刺。即锯齿。这时字体渲染技术还处在初级阶段。

灰度渲染

在上世纪90年代中期，操作系统开始采用非常巧妙的渲染手段。尽管屏幕的分辨率非常低，但是操作系统可以控制每个像素的明暗。这就可以在栅格化图像中存储更多信息。在灰度渲染模式下，处于字形边界上的像素变成灰色。该像素亮度取决于自身被理想字体形状所覆盖的面积比值所决定。这样，字体轮廓看起来就更平滑，字体设计的细节也得以再现。字体在屏幕上看起不仅清晰——而且还能体现字体本身特征及风格。

亚像素渲染

亚像素渲染的重要特征是引入彩色像素。在液晶显示屏中，一个像素是由红绿蓝三个紧密排列的亚像素构成的，它们决定了这一像素的颜色和亮度。因为这些子像素非常小，以至于人眼无法察觉到他们是一个个独立的颜色点。与单纯的灰度渲染相比，水平方向的分辨率翻了三倍。竖笔的位置及粗细就可表现的更为精确，文本外观也就更为清晰。

参考链接： https://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/

点阵字体与轮廓字体

点阵字体（Bitmap Fonts）和轮廓字体（Outline Font）的区别其实和图片格式中的png8和png24的的区别很类似，点阵字体都是实色，没有过渡色，边缘锐利，而轮廓字体有过渡色，边缘也比较平滑。点阵字体类似上面的黑白渲染。我们日常使用的字体大部分为轮廓字体，在Windows操作系统中，宋体会在12px~17px的时候按照点阵方式呈现，但是起本质上还是轮廓字体只不过宋体内置了点阵信息而已。

• 点阵字体：本质上是点阵图片的集合。渲染极快，显示效果稳定，容易创建，在小字号、多笔画时渲染效果较好。视觉效果较差，不适合缩放。
• 轮廓字体：是向量图的集合，用 Bézier 曲线描述字形，适合缩放。

常见的轮廓式字体格式可分为：PostScript、TrueType和OpenType。

• PostScript由Adobe 开发，用三次 Bézier 曲线描述字形。私有 hinting，价格昂贵。质量高，适合打印专业质量的印刷出版物。又细分为Type1/Type3/CID 等类型。扩展名是.ps
• TrueType是Apple 为对抗 Adobe 的 Type1 与 Microsoft 共同开发，用二次 Bézier 曲线描述字形，渲染较快。可内置点阵字体。在 Mac OS X 和 Windows 中是最常见的字体格式。扩展名是.ttf
• OpenType源于Microsoft独自开发的TrueType Open，后 Adobe 加入开发，增加对 PostScript 轮廓的支持。是TrueType的升级版，最明显的一个好处就是可以在把PostScript字体嵌入到TrueType的软件中。
  • 包含TureType字体的OpenType文件后缀名为.ttf
  • 包含PostScript字体的OpenType文件缀名为.otf
  • 包含两者的，后缀名为.ttc

总结：轮廓式字体的格式对网页呈现的影响并不是很大，仅做了解即可。

不同操作系统的渲染区别

了解完了三种字体渲染策略，我们来看一下各种操作系统对渲染方式的选择。首先要了解的是苹果与微软针对字体渲染的不同理念：苹果认为，字体渲染应尽可能还原字体的设计，即使代价是造成些许模糊。微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。技术上说，两者的主要区别是：

• Windows 默认是使用很重的 hinting（字体微调），直到 DirectWrite开始才禁用 horizontal hinting（水平微调）；而 Mac OS X 完全不用 hinting 信息，只在 vertical（垂直）方向做一些 autohint（自动调整）
• Windows 关闭小字号的 antialiasing（反锯齿），直到 DirectWrite 才启用大字号的 vertical antialiasing（垂直方向反锯齿）；而 Mac OS X 默认要到非常小的字体才会关闭 antialiasing（反锯齿），大部分情况下都是启用的。
• Windows 在 DirectWrite 之前没有subpixel positioning（亚像素定位）支持，而 Mac OS X 一直有，当然这个只影响间距。

在Windows系统下，使用什么渲染技术取决于使用什么样的字体以及应用程序的设置。Windows系统有两套图形文字渲染接口，一个是GDI，另一个是Windows Vista之后推出的 DirectWrite，用于取代老的GDI。严格来说，微软自己的亚像素渲染技术有另一个名字—— ClearType，这个技术与两套图形文字渲染接口是被包含的关系。

简单地说：Mac OS X 的字体渲染强调忠实字体设计，最大化保留字体的外形。边缘平滑是为了更好地传递字体设计中的曲线等细节，而小字号时显得模糊也是在此方针下的妥协。而 Windows 的字体渲染强调文字的锐利和清晰。在操作系统介面和网页正文等小字号的地方比较清晰，但大幅牺牲字体的原貌。

要想在Windows上是哟个Mac OS的渲染方式，可安装 MacType软件。

另外在iPhone或者安卓手机上找一个网页打开截屏，图片拿到电脑上不断放大后，你会发现手机上的字体渲染并没有使用亚像素渲染。最优可能的原因是减少CPU的使用。

同样，不同的渲染方式对网页呈现的影响并不是很大，仅做了解即可。

英文字体分类

英文字体的分类方式有很多中，在《写给大家看的设计书》这本书中，将英文字体主要分为了6类：

• Oldstyle：倾斜衬线+粗细过渡（对角线强调线），适合阅读。
• Modern：水平衬线+剧烈的粗细过渡（垂直强调线），冷酷高雅，不太适合正文。
• Slab Serif：Modern的变形版，水平衬线+粗细过渡变小或没有。有较好的可读性，常在儿童书籍中使用。
• Sans Serif：无衬线+无粗细变化（无强调线）
• Script：书法笔或者书法刷写出来的字
• Decorative：装饰性字体。

参考链接：

• https://www.fusionforward.com/6-common-font-categories/
• https://tympanus.net/codrops/2012/03/07/understanding-and-using-type-categories-in-web-design/

中文字体分类

同样，中文字体也有非常多的分类方法，这里简单的将中文字体分为如下四类：

• 对比 Modulated（宋体、仿宋等所谓的中文「衬线体」）
• 等线 Monolinear（黑体）
• 书写 Handwritten（楷书、草书等书法字体）
• 图案 Graphic（偏几何图形的字体）

我们最常使用的是宋体和黑体：

• 传统型宋体：竖线粗、横线细、书写至结束的地方有一个类似三角形，名为“麟”的装饰
• 传统型黑体：横线和竖线宽度几乎相同的字体。

网页中的字体设置

在网页中设置时，优先要考虑的是可读性，所以一般正文或长段的文字都采用无衬线字体，另外在标题上基本上会采用与正文有强烈对比的字体（也可以是字号和颜色的高对比度）。另外在网页中进行字体设置时最先需要考虑的是该字体是否在用户的操作系统中存在，如果没有，替代字体是什么？即设置安全字体。

CSS中的字体设置项

与字体有关的 CSS 属性，通常有以下几个：font-family、font-style、font-weight、font-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

• font-family：用于定义字体，通过给定的顺序来选择，更详细的资料请看： font-family
• font-style：用于定义字体的样式，包括正常、斜体、倾斜等，对应的属性值为：normal(文本正常显示)、italic(文本斜体显示, 为单独设计的斜体字体)、oblique(文本倾斜显示，由普通字体变形而成)。
• font-weight：用于定义文字的粗细，详细的属性值请看： font-weight 数值-样式名对照表如下：
  • 100 – Thin
  • 200 – Extra Light (Ultra Light)
  • 300 – Light
  • 400 – Normal
  • 500 – Medium
  • 600 – Semi Bold (Demi Bold)
  • 700 – Bold
  • 800 – Extra Bold (Ultra Bold)
  • 900 – Black (Heavy)
• font-size：设置字体大小。
• line-height：用于设置文字中的行间距，合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。
• letter-spacing：设置文字之间的字间距，使文字之间的距离增大或者减小。
• word-spacing：用于调整单词的间距。
• text-align：用来对齐文字，例如左对齐、右对齐、居中对齐等。
• text-decoration：用来修饰一段文本，例如添加下划线等。常对 a 标签使用这个属性消除其默认的下划线。
• font 属性是设置 font-style, font-variant, font-weight, font-size, line-height 和 font-family属性的简写，详细资料请看： CSS font 属性

操作系统字体区别

操作系统所包含字体不只和系统预装的字体有关，还和系统上安装哪些软件有关，微软操作系统下，详细的系统和一些软件包含的字体可以查看这个索引： Microsoft typography ，Mac系统可以查看这个索引： List of typefaces included with OS X。以下为各操作系统所在的中文字体：

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
• 苹方：PingFang（OS X El Capitan开始提供）

Linux操作系统：（每个发行版都有些差别）

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

font-family的设置

在设置font-family是为了保障在页面上能够合适的呈现，通常需要考虑各种操作系统。如下是我整理的font-family。

font-family: system, -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Droid Sans”, “Ubuntu”,”Oxygen”, “Cantarell”, “Helvetica Neue”,Arial, “Hiragino Sans GB”, “PingFang SC”,”Heiti SC”, “Microsoft YaHei UI”, “Microsoft YaHei”, “Source Han Sans”, “Noto Sans CJK SC” , “WenQuanYi Micro Hei”,sans-serif, “Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;

这个列表非常的长，这里来讲解什么意思：

第一组：映射系统 UI 字体

• system ：将来有可能成为标准，-apple- 为过渡阶段的厂商前缀
• -apple-system：macOS 和 iOS 平台的 Safari 指向 San Francisco，更老版本的 macOS 指向 Neue Helvetica 和 Lucida Grande
• BlinkMacSystemFont：为 macOS Chrome 应用系统 UI 字体，与上面等同

第二组：定义英文字体

• “Segoe UI”：面向 Windows 和 Windows Phone
• “Roboto”：Android 及 较新的 Chrome OS
• “Droid Sans”：面向老版本 Android
• “Ubuntu”：Ubuntu操作系统
• “Oxygen”：KED桌面字体
• “Cantarell”：GNOME桌面字体
• “Helvetica Neue”：El Capitan 之前的 macOS 系统 UI 字体
• Arial：Windows自带字体

第三组：定义中文字体

• “Hiragino Sans GB”：冬青黑体（苹果操作系统）
• “PingFang SC”：苹方（苹果操作系统）
• “Heiti SC”：黑体-简（苹果操作系统）
• “Microsoft YaHei UI”：微软雅黑（行间距比普通版小一点）
• “Microsoft YaHei”：微软雅黑
• “Source Han Sans”：思源黑体（Android系统）
• “Noto Sans CJK SC”：思源黑体别名
• “WenQuanYi Micro Hei”：文泉驿微米黑（Linux系统）

第四组：字体回退

• sans-serif：不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。

第五组：定义emoji表情或符号

• “Apple Color Emoji”,
• “Segoe UI Emoji”,
• “Segoe UI Symbol”;

在设置font-family是，需要特别注意的点：

• 英文字体应该在中文字体之前：绝大部分中文字体里包含英文字母（但是基本上都很丑）
• Mac字体要放在Win前面：大部分Mac用户会去安装Windows字体，反之就很少。

CSS3中的@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中著作权归作者所有。在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

@font-face的语法规则：

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

取值说明

• YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”
• source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
• format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
• weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

@font-face法语目前在大部分浏览器上都能支持，但是存在不同的系统和浏览器支持不同的字体类型：

• TureTpe(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+
• OpenType(.otf)格式：.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+
• Web Open Font Format(.woff)格式：.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+
• Web Open Font Format 2.0（.woff2）格式，相比woff最大的优化应该是加强了字体的压缩比。目前支持的浏览器最新的Chrome和Firefox。
• Embedded Open Type(.eot)格式：.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+
• SVG(.svg)格式：.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

字体文件格式转化工具：

• https://everythingfonts.com/
• http://font-spider.org/

根据上面的信息@font-face中我们至少需要.woff、.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持， Paul Irish写了一个独特的@font-face语法叫 Bulletproof @font-face:

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot?') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}

为了让各多的浏览器支持，也可以写成：

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
        url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

@font-face的功能虽然很强大，但是在使用的时候还是会存在问题。目前主要遇到的问题是中文字体太大。相较于英文字体只需要字、标点、英文字母，中文有上万个不同的文字，字体文件通常十几M，这样大的文字直接应用在网页上将会大大的影响网页的性能，所以@font-face在中文网站上使用到的非常的少。对于少量的使用（比如使用中文Logo），通常会制作精简版的字体。

另外，目前有两家公司提供中文 WebFont 云托管服务，他们能够压缩与转码字体：

• http://www.youziku.com
• http://cn.justfont.com

font-size字体大小的选择

字体大小的单位

在 CSS 中，最常用的描述字体大小的单位有两个：em、px。通常认为 em 为相对大小单位，px 为绝对大小单位。但从实际应用中来讲，px 像素其实也是一种相对大小单位。例如，在一块15寸分辨率为 800×600 像素的屏幕上，10px 大小的文字，要比一块10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字显得更大一些。

• px：像素单位，10px 表示10个像素大小，在现在的网页设计中，常被用来表示字体大小。很方便很直观，但是有一些弊端。对于可用性不太友好，因为是“绝对”单位，所以有些浏览器（早期）的字体放大缩小功能失效。浏览器的默认字体大小为 16px ，早期的网页，由于屏幕分辨率比较低，通常采用12px作为网页正文的标准字体大小。但是在现在，感觉有点偏小，比较长的文章来说，浏览者看起来费劲。
• em：相对大小，它表示的字体大小不固定，根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px，如果你对一段文字指定 1em，那么表现出来的就是 16px大小，2em 就是 32px 大小。相对大小单位有很广泛的用途，由于它的相对性，所以对跨平台跨设备的字体大小处理上有得天独厚的优势，同时对于响应式的布局设计也有很大的帮助。

更多信息请查看： https://www.biaodianfu.com/css-font-size.html

字体大小的选择

通过上面的单位介绍，对于 px 单位中，举得例子都是 12px、14px、16px、18px等等，为啥不是11px、15px？这涉及到一个锯齿的问题，特别是在早期的显示器中，往往不能很好的处理文字的锯齿问题，而使用单数的像素，极有可能造成锯齿，所以默认的通常使用偶数大小。Windows 自带的点阵宋体从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变） 。对于13、15、17px的宋体，其大小与其小一号一样，只是间距多了1px。所以在Photoshop中所使用的13、15、17px宋体并不能在web上正常还原，设计时应避免使用13、15、17px的宋体。推荐的字体大小：正文16px，标题22px。

总结

字体设置涉及到的知识点非常的庞大，整理的时候只涉及到了皮毛，前端开发人员和设计人员可以好好的再进行深入研究。

The post 网站开发中的字体设置 appeared first on 标点符.