《精通CSS》第4章网页排版

《精通 CSS》往期陪读章节&＃xff1a;

• 第 1 章 基础知识

• 第 2 章 添加样式

• 第 3 章 可见格式化模型

或许大家会觉得排版都是设计师的工作&＃xff0c;前端开发按照已经排版好的设计稿复原就行。当然&＃xff0c;这样理解也没有太大问题&＃xff0c;但是过于依赖于设计师往往会限制我们的脚步。作为前端开发&＃xff0c;对于排版我们要有自己的认知&＃xff0c;而且更好地理解 CSS 中关于网页排版的技术&＃xff0c;我们也能更得心应手地还原设计稿。

本章原书用了近 40 页的篇幅来介绍排版&＃xff0c;歪马会尽量精简地将其中的核心内容传达给大家。

同原书&＃xff0c;借助维基百科中一篇关于月亮的文档来给大家介绍排版。分别包括以下几部分内容&＃xff1a;

1. 基础排版&＃xff1a;包括文本颜色、字体相关、间距、对齐、折行连字符等

2. 文本特效

3. 多栏布局

4. 更丰富的字体&＃xff1a;Web 字体

5. 高级的排版特性&＃xff1a;OpenType

其中比较推荐大家关注的点有对于行盒子构造的理解、连字符的使用、Web 字体的使用以及 OpenType 新排版特性。

示例代码托管在CodeSandbox^[1]

4.1 基础排版

如下图所示&＃xff0c;我们没有应用任何样式时&＃xff0c;网页也并没有很糟糕&＃xff0c;还是可读的&＃xff0c;主要是因为浏览器应用了一些默认的样式。

下面我们开始逐步美化这一文档&＃xff0c;在这个过程中&＃xff0c;歪马不会挨个贴出效果图&＃xff0c;这样太浪费篇幅了&＃xff0c;有兴趣的同学可以自己动手跟着试一试。下面先看一下完成版的效果图。

4.1.1. 文本/背景颜色

首先我们可以微调一下文本的颜色。默认情况下&＃xff0c;浏览器会将文字渲染成黑色&＃xff08;链接为蓝色&＃xff09;&＃xff0c;背景为白色&＃xff0c;白底黑字有时候太过与显眼。我们可以调整下字体颜色/背景颜色&＃xff0c;使其看起来更柔和。

如下&＃xff1a;

body { background: #f6fafc; }
p { color: #3b4348; }
a { color: #235ea7; }


4.1.2. 字体族

第二步可以给文档应用我们喜欢的字体。可以借助font-family字体族属性&＃xff0c;该属性的值是一个备选字体的列表&＃xff0c;按优先级从左到右排列。如下&＃xff1a;

body {font-family: &＃39;Georgia Pro&＃39;, Georgia, Times, &＃39;Times New Roman&＃39;, serif;
}
h1, h2, h3, h4, h5, h6 {font-family: Avenir Next, Avenir, SegoeUI, arial, sans-serif;
}


由于font-family是一个可继承属性&＃xff0c;所以body及其后代元素在使用字体时&＃xff0c;浏览器会依次从左向右判断字体是否存在&＃xff0c;存在则使用&＃xff0c;一直到都不匹配时&＃xff0c;随机选择一种衬线字体(serif)。

这种按照顺序查找字体的后备机制是font-family的重要特性&＃xff0c;因为不同的操作系统和移动设备中包含的字体并不一样。关于什么操作系统中默认安装了哪些字体&＃xff0c;可以通过这个网址查询&＃xff1a;https://www.cssfontstack.com^[2]。

上面代码中的最后一种备选字体(衬线字体)是通用字体族的一种。通用字体族共有以下几种&＃xff1a;

• serif 衬线字体&＃xff1a;字形笔画末梢带有装饰性的线条&＃xff0c;很多经典的英文字体都有。

• sans-serif 非衬线字体&＃xff1a;与衬线字体对应&＃xff0c;字形笔画末梢没有装饰性的线条。

• monospace 等宽字体: 每个字符的宽度一样&＃xff0c;不同行之间的字符可以完美对齐&＃xff0c;常用于显示代码。

• fantasy 花式字体&＃xff1a;顾名思义&＃xff0c;就是比较花花绕的字体。

• cursive 手写字体&＃xff1a;手写字体。

歪马将 Orbit 轨道部分的两个段落分别应用的fantasy花式字体和cursive手写字体&＃xff0c;大家可以感受下。Safari 下效果比较显著&＃xff0c;所以该图是 Safari 下的截图。如图&＃xff1a;

最后&＃xff0c;如果字体族的名称包含空格&＃xff0c;引号并非非加不可&＃xff0c;但最好加上。规范中只要求与通用字体族重名的字体族需要加引号&＃xff0c;但同时也建议给包含非标准符号的名称加引号&＃xff0c;从而防止浏览器误判。

4.1.3. 字体大小与标题行外边距

几乎所有浏览器中&＃xff0c;font-size的默认大小都是16px&＃xff0c;除非主动修改。

在这里&＃xff0c;我们不修改默认的font-size&＃xff0c;在设置指定元素的font-size时&＃xff0c;推荐使用em&＃xff0c;如下&＃xff1a;

h3 {font-size: 1.314em; /* 21px */
}


使用em比较灵活&＃xff0c;em单位是基于继承的字体大小进行缩放的。所以当我们修改默认的font-size大小时&＃xff0c;相应的元素大小也会随之调整。

不过这样做会有一个问题&＃xff0c;元素的位置会意外改变其字体大小。试想如下代码&＃xff1a;

p {font-size: 1.314em;
}
article {font-size: 1.314em;
}


p和article元素默认情况下字体大小是21px&＃xff0c;但article下的p元素的字体大小会变成1.314em × 1.314em&＃xff0c;约等于1.73em&＃xff08;28px&＃xff09;。

对于font-size属性&＃xff0c;可以用百分比代替em。如131.4%与1.314em没有区别&＃xff0c;可以任意选择。

当em用于计算盒模型大小时&＃xff0c;不是基于继承的font-size&＃xff0c;而是基于元素自身计算后的font-size。

如上em的计算规则会因为应用属性的不同而不同。我们还可以rem&＃xff0c;它也是一个缩放因子&＃xff0c;它是相对于根元素的字体大小进行缩放的。

rem较新&＃xff0c;但所有现代浏览器均已支持&＃xff0c;只有 ie8 及更早的浏览器不支持。为了兼容&＃xff0c;我们可以如下为标题元素声明统一的上外边距&＃xff1a;

h1, h2, h3, h4, h5, h6 {margin-top: 24px; /* 针对老旧浏览器不能缩放的后备 */margin-top: 1.5rem;
}


书中推荐使用em/rem这两个缩放单位&＃xff0c;其他的长度单位&＃xff0c;如mm/cm/in/pt这些绝对物理长度&＃xff0c;这些是给打印样式准备的&＃xff0c;网页样式不应该使用这些单位。

4.1.4. 行高与垂直对齐

要像彻底了解行高与垂直对齐。我们需要先了解下行盒子的构造。构造如下图&＃xff08;书中图 4-5&＃xff09;&＃xff0c;大家可以仔细看看各部分的含义。

对应代码是&＃xff1a;

The Moon...

关于行内格式化上下文&＃xff0c;我们知道每行文本都会生成一个行盒子&＃xff0c;这段代码中&＃xff0c;行盒子内包含行内盒子(strong元素)以及前后的匿名行内盒子。

内容区用于显示文本&＃xff0c;用font-size决定高度。行高是行盒子的总高度&＃xff0c;内容区上下的空白部分叫做半铅空&＃xff08;因为传统印刷时用铅块隔开的&＃xff09;。

其中&＃xff0c;每个字符在摆放的时候&＃xff0c;底边都是对齐于靠近底部的一条水平线&＃xff0c;这条线叫做基线。内容区并不会完全限制字符的显示&＃xff0c;比如某些字体中g就会超出内容区。

最后&＃xff0c;如果行盒子内有多个行高不等的行内盒子&＃xff0c;则行盒子最后的高度至少等于最高的。至于为啥是至少&＃xff0c;还和垂直对齐的方式有关&＃xff0c;下面说垂直对齐的时候就知道了。

1. 设置行高

一般来说&＃xff0c;行高的取值范围是1.2~1.5。行与行之间不能太密也不能太疏。

如下&＃xff0c;我们可以给body设置line-height: 1.5;。

body {line-height: 1.5;
}


没有单位的行高&＃xff0c;表示是当前字体大小的 1.5 倍。当然我们也可以给line-height设置像素、百分比或em值。但要注意的是&＃xff0c;在元素继承的时候&＃xff0c;继承的是计算后的值。这就会导致如果我们在body上设置1.5em&＃xff0c;其他元素继承的并不是1.5em&＃xff0c;而是24px。这显然不是我们想要的。

好在line-height设置为没有单位的值时并不会出现这一现象&＃xff0c;子元素继承的永远都会是这个数值。

2. 垂直对齐

垂直对齐vertical-align的默认值是基线对齐baseline&＃xff0c;即子元素的基线与父元素的基线对齐。它还有很多很有意思的值如&＃xff1a;sup、top、bottom、text-top、text-bottom、middle&＃xff0c;还可以设置像素值、em以及百分比。

如下图所示&＃xff0c;红框中的文字分别应用了不同的 vertical-align 值&＃xff0c;字面文字即为属性值。

其中text-top与text-bottom会让当前元素的内容区和父元素的内容区顶部或底部对齐&＃xff0c;但只有在行内盒子的 font-size 或 line-height 与父元素不同时才有影响。

从图中&＃xff0c;我们还能看出&＃xff0c;当使用 vetical-align 调整元素位置时&＃xff0c;会扩展行盒子的高度。这也是我们前面为什么说&＃xff1a;“当行盒子内有多个行高不等的行内盒子时&＃xff0c;行盒子最后的高度至少等于最高的”。

最后&＃xff0c;需要提一下&＃xff0c;与行内文本相比&＃xff0c;行内块和图片的垂直对齐行为稍有不同&＃xff0c;因为图片不一定有自己的唯一基线。第 6 章的时候会介绍。

4.1.5 文本粗细&＃xff08;字重&＃xff09;

下面&＃xff0c;我们可以使用font-weight给不同的标题指定不同的文本粗细&＃xff0c;也称字重。font-weight支持关键字normal、bold、bolder、lighter&＃xff0c;也可以指定数字值&＃xff0c;都是 100 的倍数&＃xff0c;100~900.

默认值为normal&＃xff0c;对应数字 400&＃xff0c;bold对应 700。关键字bolder和lighter是在继承值的基础上把文本变得更粗或更细。

如下&＃xff0c;我们给标题设置字重 500&＃xff0c;h1 和 h2 分别是 800 和 600&＃xff1a;

h1, h2, h3, h4, h5, h6 {font-weight: 500;
}
h1 {font-weight: 800;
}
h2 {font-weight: 600;
}


如果指定的粗细不存在&＃xff0c;浏览器尽量模拟&＃xff0c;但是效果不会很好。

4.1.6 字体样式

font-style除了normal外还有两种样式&＃xff0c;分别是italic和oblique。italic会选择字体的斜体变体来显示&＃xff0c;如果不存在&＃xff0c;浏览器会通过倾斜字体来模拟&＃xff0c;但是效果不太理想。oblique也是倾斜文本的一种变体&＃xff0c;但是没有几款字体支持&＃xff0c;所以很少使用。

4.1.7 文字变换

CSS 中有两种文字变换&＃xff0c;分别是text-transform和font-variant。font-variant更准确的说是字体的一种变体&＃xff0c;需要字体支持。

text-transform可以控制英文字母大小写。uppercase可以将所有字母显示为大写&＃xff0c;lowercase可以将所有字母变成小写&＃xff0c;capitalize可以将每个单词的首字母大写&＃xff0c;none显示源码中的默认大小写。

如下&＃xff0c;我们可以将h1元素中的字母全部大写。

h1 {text-transform: uppercase;
}


font-variant是字体的特殊变体&＃xff0c;需要字体支持。如small-caps可以把英文文本转换成所谓的“小型大写字母”。我们可以将文档中 NASA 缩写进行这一变化。不过文中 NASA 已经是大写了&＃xff0c;所以我们还加了text-transform: lowercase;将其转换为小写字母&＃xff1b;此外由于 small-caps 会导致某些浏览器把内容盒子向下移动一点&＃xff0c;所以缩小了一下行高。

abbr {font-variant: small-caps;text-transform: lowercase;line-height: 1.25;
}


效果图如下&＃xff1a;

CSS2.1 中&＃xff0c;只规定了small-caps这一个有效值。CSS Font Modules Level 3^[3]扩展了很多&＃xff0c;后面高级排版技术我们再介绍。

4.1.8 字间距和词间距

word-spacing可以调整单词与单词之间的距离。letter-spacing可以调整字母与字母之间的距离。

通常情况下&＃xff0c;我们无需做字间距和词间距的调整。如果设计师有特殊需求时&＃xff0c;我们可以进行相应的调整。

4.1.9 行长

我们都知道&＃xff0c;每一行文字的多少&＃xff08;也就是行长&＃xff09;&＃xff0c;对于阅读体验有着重要的影响。过长或过短的文本行会打断人的眼球移动&＃xff0c;导致读者无法连续阅读&＃xff0c;甚至读不下去。

书中建议主体内容的文本行长通常是 45-75 个字符&＃xff0c;平均 66 个字符。对于小屏幕也要有至少 40 个字符。

所以&＃xff0c;我们可以直接给article元素设置如下属性。这里推荐使用max-width&＃xff0c;好处是当时候屏幕比这个更窄时可以自动调整。

article {max-width: 33em;
}


4.1.10 缩进与对齐

接下来&＃xff0c;我们可以调整一下缩进与对齐。对于段落&＃xff0c;我们可以设置一定的缩进&＃xff0c;方便用户定位新段落的起始&＃xff0c;这个在中文排版中比较常见。

p {text-indent: 1.25em;
}


另外&＃xff0c;我们会发现段落的右边参差不齐&＃xff0c;这种样式叫做“毛边”。这是因为文本默认是左对齐的。

text-align有以下几个值&＃xff1a;left|right|center|justify。left|right|center三个值都会存在毛边。其中比较适合给短标题应用center(我们给h1应用一个)。justify可以再单词间平均分布间距&＃xff0c;实现左右两端对齐&＃xff0c;消除毛边。但是当某些行空白太多&＃xff0c;会出现空白“串流”的现象&＃xff0c;并且行长越短越明显。如下图所示。

这主要是因为浏览器处理文本两端对齐时使用的算法较为粗糙&＃xff0c;虽然我们可以通过text-justify来修改算法&＃xff0c;但浏览器的支持度较差&＃xff0c;效果也不太好。

此外&＃xff0c;text-align新增了start|end两个新的值&＃xff0c;这两个值与文本书写方向对应。如果dir&＃61;"ltr"文字书写方向是从左到右&＃xff0c;则start为左&＃xff0c;end为右&＃xff1b;反之同理。

4.1.11 连字符

如果又想解决毛边问题&＃xff0c;又不想出现串流问题。我们可以在 HTML 中手动插入连字符的实体符号­。只有当浏览器需要断词换行是才会显示这个连字符。

但是这个方式想想就不可能是吧。谁会没事手动插入连字符&＃xff0c;行长变了咋办&＃xff1f;

好在我们可以使用hyphens属性来让浏览器帮我们插入连字符。该属性有两个值auto自动和manual手动。

但是这个属性较新&＃xff0c;很多浏览器都不支持&＃xff0c;部分需要加前缀&＃xff0c;大家可以自行在Can I Use^[4]上查询一下。支持度不好没事&＃xff0c;别忘了我们前面提到的渐进增强&＃xff0c;这是一个可以提高体验的优化方案&＃xff0c;所以我们可以照用不误。

不过想要使用自动连字符功能&＃xff0c;一定要在 HTML 中设置语言代码。

连字符的效果如下图所示&＃xff1a;

4.2 文本特效

“标题党”总是能够更抓人眼球&＃xff0c;赚取更多的点击。见惯了标题党小伎俩的我们可能早就不吃这一套了。不过&＃xff0c;今天我们也要给大家说一说标题党。但是此标题党非彼标题党&＃xff0c;我们是要让你的标题看起来更炫更酷。

我们可以借助text-shadow文本阴影来实现很好看的标题特效。给大篇幅的正文文本应用阴影不仅不会更炫&＃xff0c;反而会降低可读性。阴影更适合标题或短文本&＃xff0c;我们可以用其模拟凸版印刷或喷涂效果。

text-shadow的语法格式为 &＃xff0c;如1px 1px 5px 0&＃xff0c;其中颜色值放在最前或者最后都行。offset-x/offset-y是 x/y 轴的偏移量(可正可负)&＃xff1b;blur-radius为模糊半径&＃xff0c;0 表示完全不模糊&＃xff1b;color为颜色&＃xff0c;如果不传颜色&＃xff0c;默认为黑色。

此外&＃xff0c;我们还可以用逗号分隔来应用多组阴影&＃xff0c;多组阴影会按照先后顺序堆叠&＃xff0c;先定义的在上&＃xff0c;后定义的在下。

如下&＃xff0c;我们可以给h1标题应用如下样式&＃xff1a;

h1 {text-shadow: -2px 2px 0 goldenrod,0px -2px 0 goldenrod,0px 3px 0 goldenrod,3px 0px 0 goldenrod,-3px 0px 0 goldenrod,2px 2px 0 goldenrod,2px -2px 0 goldenrod,-2px -2px 0 goldenrod,-3px 3px 0 #233956,-4px 3px 0 #3568A8,-4px 5px 0 #233956,-5px 4px 0 #3568A8,/* ...省略部分 */-13px 12px 0 #3568A8,-13px 14px 0 #233956,-14px 13px 0 #3568A8,-14px 15px 0 #233956,-15px 14px 0 #3568A8,-15px 16px 0 #233956,-16px 15px 0 #3568A8;
}


效果如下&＃xff1a;

文本阴影是一门很深的学问&＃xff0c;需要对齐不断尝试&＃xff0c;充分发挥才能创造出更多有意思的效果。Typekit Practice 的Using shades for eye-catching emphasis^[5]一文有更多的类似技术&＃xff0c;大家感兴趣可以看一下。

4.3 多栏布局

第一部分我们把整篇文章的行长设置为了33em&＃xff0c;但是如果在较大的屏幕下&＃xff0c;仅仅只有33em的行长可能会浪费很多空间。有时候为了有效利用宽屏&＃xff0c;我们可以使用多栏布局。

多栏布局主要包括以下几个属性&＃xff1a;

• column-gap: 栏间距&＃xff0c;值为长度值

• column-count: 栏数&＃xff0c;值为数字

• column-width: 栏宽&＃xff0c;值为长度值

• column-span: 是否跨栏&＃xff0c;all开启跨栏&＃xff0c;none关闭跨栏。

• column: column-count和column-width的简写形式。

如果只设置column-count&＃xff0c;浏览器会严格生成指定数量的栏&＃xff0c;不管宽度如何。如果同时设置了column-count和column-width&＃xff0c;则前者会作为最大栏数&＃xff0c;后者会作为最小栏宽&＃xff0c;也就是说优先保证栏宽&＃xff0c;如果不够栏数减少也没关系。

如下&＃xff0c;我们可以这样进行多栏布局。

/* 一级标题和来源跨行 */
h1,
.source {column-span: all;
}
/* article指定最大宽度&＃xff0c;栏数自动生成 */
article {max-width: 70em;columns: 20em;column-gap: 1.5em;
}


效果如下图所示&＃xff1a;

最后对于不支持多栏布局的浏览器&＃xff0c;我们要实现优雅降级&＃xff0c;可以给段落元素应用max-width属性&＃xff0c;限制行长的最大宽度。这样&＃xff0c;旧版浏览器只会显示一栏&＃xff0c;但仍然可读。

article > p {max-width: 33em;
}


不知道你有没有注意到&＃xff0c;上面的效果图中&＃xff0c;三栏中的文本基线已经没有对齐的&＃xff08;对着上图你看&＃xff0c;你细细地看&＃xff09;。这主要是因为标题高度导致的问题。这一问题会一定程度地影响阅读。我们可以通过修改标题的高度&＃xff0c;让其等于段落文本的整数倍&＃xff0c;从而使得各栏文本的基线均对齐&＃xff0c;这种方法叫做垂直律动。

如下&＃xff0c;对标题做如下调整。让两个标题的上下边距加行高等于正文行高的整数倍。如此&＃xff0c;所有栏的文本基线就都能对齐了。

h2 {font-size: 1.75em; /* 28px */line-height: 1.25; /* 28*1.25 &＃61; 35px; */margin-top: 1.036em; /* 29px */margin-bottom: 0.2859em; /* 8px */
}
h3 {font-size: 1.314em; /* 21px */line-height: 1.29; /* 21*1.29 &＃61; 27px; */margin-top: 0.619em; /* 13px */margin-bottom: 0.38em; /* 8px */
}


最后&＃xff0c;h1 的高度是 72px&＃xff0c;h2 的高度是 48px&＃xff0c;刚好是正文行高的整数倍&＃xff0c;如下图所示&＃xff0c;所有栏的正文都对齐了。

4.4 更丰富的字体&＃xff1a;Web 字体

前面介绍的内容中&＃xff0c;多数都是使用系统自带的字体。其实我们也可以使用自定义的字体。

相信大家对于 Web 字体一定不会陌生&＃xff0c;大家一定都用过一些 Icon Font 相关的字体&＃xff0c;如阿里的https://iconfont.cn^[6]&＃xff0c;这类字体也是 Web 自定义字体的一种。

我们可以通过&＃64;font-face规则来声明自定义的字体。它可以指定浏览器下载字体的地址以及如何在样式表中引用字体。

&＃64;font-face {font-family: Vollkorn;src: url(&＃39;fonts/vollkorn/Vollkorn-Bold.woff&＃39;) format(&＃39;woff&＃39;);font-weight: 800;
}


在具体介绍&＃64;font-face规则之前&＃xff0c;我们先了解一下字体的格式。

4.4.1 字体文件格式

目前现代浏览器基本都支持 Web 字体&＃xff0c;但对于文件格式的支持却并不统一。字体格式的问题很复杂&＃xff0c;涉及微软、苹果以及 Adobe 等公司的发展史&＃xff0c;此处我们不做详述。为了保证各个浏览器可用&＃xff0c;我们通常需要补足各种字体文件的格式&＃xff0c;如WOFF、WOFF2、SVG、EOT、TTF。

如下&＃xff1a;

&＃64;font-face {font-family: Vollkorn;src: url(&＃39;fonts/vollkorn/Vollkorn-Bold.eot#?ie&＃39;) format(&＃39;embeded-opentype&＃39;),url(&＃39;fonts/vollkorn/Vollkorn-Bold.woff2&＃39;) format(&＃39;woff2&＃39;),url(&＃39;fonts/vollkorn/Vollkorn-Bold.woff&＃39;) format(&＃39;woff&＃39;),url(&＃39;fonts/vollkorn/Vollkorn-Bold.ttf&＃39;) format(&＃39;truetype&＃39;),url(&＃39;fonts/vollkorn/Vollkorn-Bold.svg&＃39;) format(&＃39;svg&＃39;);font-weight: 800;
}


如果你只有其中一种字体格式&＃xff0c;可以通过Font Squirrel^[7]进行转换。

4.4.2 字体描述符

&＃64;font-face规则中接受以下几个声明&＃xff0c;又称字体描述符&＃xff1a;

• font-family: 必需&＃xff0c;使用该字体时字体族的名称。

• src: 必需&＃xff0c;URL 或 URL 列表&＃xff08;逗号隔开&＃xff09;&＃xff0c;用于下载字体。

• font-weight: 可选&＃xff0c;字体粗细&＃xff0c;默认为normal。

• font-style: 可选&＃xff0c;字体样式&＃xff0c;默认为normal。

浏览器在匹配字体时优先匹配font-family&＃xff0c;如果存在font-family对应的字体则应用。如果对应字体声明了多次&＃xff0c;如font-weight不同&＃xff0c;分别为bold和normal&＃xff0c;那么就会在字重不同的时候应用不同的字体。如果只声明了一次&＃xff0c;则不管什么字重都应用该字体。font-style同理。

4.4.3 性能

Web 字体让网页有了更多的可能性&＃xff0c;但也带来了一些问题。

首先&＃xff0c;浏览器需要下载额外的字体文件&＃xff0c;这会延长用户等待的时间。所以我们一方面要注意不要加载过多字体&＃xff0c;另一方面要对字体文件做缓存&＃xff0c;从而避免不必要的网络开销。

此外&＃xff0c;对于非文档类的网站&＃xff0c;如果字数有限&＃xff0c;可以通过字体截取的功能来减小字体文件的大小。这一点对于中文字体来说尤为重要&＃xff0c;因为中文字体动辄就是几十兆&＃xff0c;通过截取的方式可以大大减小字体文件的大小。大家可以通过字蛛^[8]来进行字体截取&＃xff0c;也有一些根据网页内容动态截取的解决方案&＃xff0c;大家有需要的话可以找一找。

其次&＃xff0c;除了额外的加载&＃xff0c;浏览器在下载字体的时候&＃xff0c;有两种方式处理相应的内容。第一种方式是在下载完成前&＃xff0c;暂缓显示文本&＃xff0c;这就会导致在下载完成之前&＃xff0c;用户什么都看不到&＃xff0c;这种现象叫做FOIT(flash of invisible text)。Safari、Chrome 和 IE 默认采用这种方式&＃xff0c;如果网速很慢的话&＃xff0c;用户体验会很差。

第二种方式&＃xff0c;是在字体下载完成前&＃xff0c;浏览器先用一种后备字体作为替代显示。可以避免网速慢导致的页面空白问题&＃xff0c;但是也会带来新的问题——字体切换时的闪烁&＃xff0c;这种现象叫做FOUT(flash of unstyled text)。这种闪烁会影响用户阅读&＃xff0c;如果内容差距较大还会导致失去焦点&＃xff0c;所以我们尽量选择较为相似的字体作为后备字体。

4.4.4 Javascript 加载字体

CSS Font Loading^[9]规范定义了一个用于加载字体的实验性 Javascript API&＃xff0c;但是尚未得到浏览器的广泛支持。不过 Typekit 维护了一个开源库可以让我们有类似的能力来操作字体&＃xff0c;叫Web Font Loader^[10]。

这里我们简单介绍一下这个库的原理。Web Font Loader 主要暴露了以下三个事件&＃xff1a;

• loading: 开始加载字体

• active: 字体加载完成

• inactive: 字体加载失败

我们可以做的事情就是如果字体成功加载了&＃xff0c;可以给根元素添加一个特殊的类名&＃xff0c;这样就可以给自定义字体和后备字体定义不同的样式了。通过细微的调节&＃xff0c;可以让两种字体切换时的闪烁感降到最低&＃xff0c;如将行高调整一致&＃xff0c;对于 x 高度不一致的字体调整字体大小等。

4.5 高级的排版特性&＃xff1a;OpenType

前面我们知道了如何使用更丰富的字体。那么我们可能会应用一些具有丰富特性的字体。在有些 OpenType 字体格式中支持在字体文件中包含字体的额外设定和特性&＃xff0c;包括连字&＃xff08;ligature&＃xff0c;由字符组合而成的特殊字形&＃xff0c;如“fi”或“ffl” &＃xff09;&＃xff0c;字距&＃xff08;kerning&＃xff0c;调整特定字母组合的间距&＃xff09;&＃xff0c;分数形式&＃xff0c;数字风格等。使用这些特性可以使我们的网站更有用、更易读、更优美。

那么一款 OpenType 的字体到底有哪些特性呢&＃xff1f;我们可能是一脸懵逼的&＃xff0c;我也不是字体的设计者&＃xff0c;我怎么知道某款字体有没有某种特性呢&＃xff1f;好在已经有前人为我们解决了这一麻烦。我们可以通过https://wakamaifondue.com^[11]这一网站来查看字体功能、特性的相关内容。

如下&＃xff0c;我们将书中的示例字体Vollkorn Semibold传入上述网站&＃xff0c;可以看到解析结果中如图中蓝框所示的特性。

CSS 里定义了很多与这些特性相关的属性如连字的font-variant-ligatures、字距font-kerning、数字风格font-variant-numeric等。但这些属性支持度并不好&＃xff0c;不过我们可以使用底层属性font-feature-settings来控制。建议大家两种同事使用。

如下&＃xff0c;我们可以像这样设置字体特性&＃xff08;示例中是开启了常用连字和任意连字&＃xff09;&＃xff1a;

h1, h2, h3 {font-variant-ligatures: discretionary-ligatures;-webkit-font-feature-settings: "liga", "dlig";-moz-font-feature-settings: "liga", "dlig";-moz-font-feature-settings: "liga&＃61;1, dlig&＃61;1";font-feature-settings: "liga", "dlig";
}


连字的效果大概像下面这个样子&＃xff0c;大家应该都能理解。

稍微解释一下font-feature-setting的语法&＃xff0c;其语法格式为font-feature-setting: ;。主要有以下几点细节&＃xff1a;

• 可以通过加引号的 4 个字符的特性代码开启相应的字体特性&＃xff0c;代码后可接关键字on/off&＃xff0c;分别表示开启或关闭&＃xff0c;也可以接一个数字。如果不指定则默认是on。

• 如果只为数字&＃xff0c;0 一般表示关闭特性。如果特性只有开关两个状态&＃xff0c;则 1 为开启&＃xff1b;如果有多个状态&＃xff0c;则根据字体来选择对应的数字。

• 多个特性之间用逗号隔开。

• 不同浏览器的浏览器可能需要加前缀&＃xff08;这个不用手动加&＃xff0c;建议使用 CSS 预处理器&＃xff09;。其中 Mozilla 浏览器的旧语法有一些不同&＃xff0c;多个特性是写在一个引号内的&＃xff0c;如上代码中所示。

下面我们看下数字的效果。文本段落中的“老式”数字风格和小写字母搭配更合适&＃xff1b;“表格数字”在表格里的费用清单里排列得更整齐&＃xff1b;而“线性”数字单独使用或与大写单词搭配使用显得更为统一。分别如下面两图所示。

OpenType 相关的特性有很多&＃xff0c;而且受到字体的影响&＃xff0c;本文就不再做详细的介绍了&＃xff0c;大家对于这一概念有一个整体的了解就好。后续歪马有空会整理一篇完整的 OpenType 特性相关的文章。

另外&＃xff0c;因为中文的特殊性&＃xff0c;中文字体往往也不具备这些特性&＃xff0c;所以不感兴趣的同学可以先行略过。当然数字相关的我们还是会用到的。

4.6 总结

好了到这里&＃xff0c;本章的陪读分享就结束了。

本章主要是逐步带大家对于关于月亮的文档进行了排版&＃xff0c;包括基础的排版、文本特效以及满足宽屏的多栏布局。然后介绍了如何使用 Web 字体以及 OpenType 字体的特性应。

对于这些你都了解了吗&＃xff1f;

你多久没有读完一本技术书了&＃xff1f;你是否列了长长的待读书单&＃xff0c;却迟迟没有行动&＃xff1f;你是否每逢购物节&＃xff0c;就血拼了一堆回来&＃xff1f;又或者你觉得一个人读书太过枯燥&＃xff1f;

如果你是&＃xff0c;那从现在跟歪马一起&＃xff0c;歪马陪你一起云读书。歪马会选一本技术类书籍&＃xff0c;每 2~5 天学习并总结一个章节供大家一起围观&＃xff0c;欢迎大家监督共进&＃xff0c;后期大家可以推荐选材&＃xff0c;内容局限于前端周边 ????。

文内链接

[1]

CodeSandbox: https://codesandbox.io/embed/jingtongcss-l8tye?fontsize&＃61;14&hidenavigation&＃61;1&theme&＃61;dark

https://www.cssfontstack.com: https://www.cssfontstack.com/

CSS Font Modules Level 3: https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/

Can I Use: https://caniuse.com/

Using shades for eye-catching emphasis: https://practice.typekit.com/lesson/using-shades/

https://iconfont.cn: https://www.iconfont.cn/

Font Squirrel: https://www.fontsquirrel.com/

字蛛: http://font-spider.org/

CSS Font Loading: https://www.w3.org/TR/css-font-loading-3/

Web Font Loader: https://github.com/typekit/webfontloader

https://wakamaifondue.com: https://wakamaifondue.com/

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后&＃xff0c;直接发送链接到后台即可给我们投稿。