CSS揭秘(5)：字体排印

这是《CSS揭秘》第五章内容的总结。

连字符断开

文字排版中，一般会考虑到两端对齐，这样不会让文字整体显得凌乱不堪。即使用 text-align: justify; 实现，但产生的弊端则是为了两端对齐而导致单词之间间距不一。

image.png

这里介绍了CSS3引入的全新属性 hyphens，接受三个值：none、manual 和 auto。初始值是 manual，需要手动设置潜在的断开点（有 hard 和 soft 两种模式，分别使用 &hyphen 和 &shy 表示），如果想省事的话，可以通过设置 auto 来完成，前提需要设置 HTML 标签的 lang 属性，因为连字符判定依赖于 lang。

当然，即使该属性不被支持，也可以做到平稳退化，配合 text-align: justify; 使用效果对比还是很明显的。

image.png

在未来可能的 CSS4 中，还会加入更细粒度的属性，详见 https://drafts.csswg.org/css-text-4/#hyphenation

持续更新中...