Jan 16, 2017

《CSS揭秘》读书笔记7

连字符断行

1	hyphens: auto;

这一行代码的意思是实现连字符断行，在超长单词需要折行的时候用连字符-来将单词折行并连接，也可以手动输入来控制浏览器断词。为了确保生效，需要在html的lang属性中指定合适的语言。但实际上，这效果还是不够完美，对中文排版用处也不大。

插入换行

书中想用以下代码实现键值在一行的效果：

<dl>
    <dt>Name:</dt>
    <dd>someone</dd>
    <dt>Email:</dt>
    <dd>someone@foo.com</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

期望效果像这样：

Name:someone

Email:someone@foo.com

Location:Earth

最后采用的方法是把所有的dd和dt元素改为display: inline;，然后利用伪元素在每个dd后面断一下行，还要处理一下多个dd只断航一次的兼容问题。我们现在有很多种更加轻易的方式实现这种布局，就不赘述了。

斑马条纹

书中想实现文本下每行间隔不同颜色的效果，像斑马线一样。最后采用的方案是利用em单位和线性渐变来进行背景图绘制。但是这个方法我自己认为是有局限性的，视觉效果也没有很美。

tab宽度

在网页我们用<code>和<pre>进行代码展示时，其中的tab会被显示成8个空格，我们可以通过设置元素的tab-size: 4;来将其设置为4个空格。

连字

连字是指字形冲突导致显示效果不佳的情况，比如：

ffi

这个比较故意的把效果还原出来了，ffi之间连在一起，不太好看。font-variant-ligatures是用来设置连字的。但是中文出现连字的情况比较少见，因为中文字本身等宽。

特定字符美化

如果想给文章中某些特定的字符应用美化字体，除了直接给字符套元素应用样式，书中还提供了以下两种方法：

一、我们知道font-family可以应用多个字体，第一个不行时往后顺延。所以我们可以引入一个只包含某些字符的字体，然后作为font-family的第一个选项，其中那些有的字符会被美化，没有的字符显示正常。

二、如果不想单独引入字体，可以利用@font-face的一些技巧来实现：

@font-face {
    font-family: foo;
    src: local('Baskercille'),
         local('Goudy Old Style'),
         local('Palatino'),
         local('Book Antiqua');
    unicode-range: U+26;
}

其中local引用了本地字体，unicode-range将字体生效范围限制到一个范围，这个范围就是后面的字符unicode码，规则是某个字符的16进制码位前面加上一个U+，如果是一个字符区间也是一样，比如U+400-4FF。同时指定多个字符或区间也是可以的，用逗号隔开即可，例如U+26, U+4??, U+2665-2670。如果想继续加入斜体风格，只需要引用本地字体相应版本的PostScript名称，代码最后变成了这样：

@font-face {
    font-family: foo;
    src: local('Baskercille-Italic'),
         local('GoudyOldStyle-Italic'),
         local('Palatino-Italic'),
         local('BookAntiqua-Italic');
    unicode-range: U+26;
}

nervouself