这是《CSS揭秘》第五章内容的总结。
文字排版中，一般会考虑到两端对齐，这样不会让文字整体显得凌乱不堪。即使用 text-align: justify; 实现，但产生的弊端则是为了两端对齐而导致单词之间间距不一。
image.png
这里介绍了CSS3引入的全新属性 hyphens，接受三个值：none、manual 和 auto。初始值是 manual，需要手动设置潜在的断开点（有 hard 和 soft 两种模式，分别使用 &hyphen 和 ­ 表示），如果想省事的话，可以通过设置 auto 来完成，前提需要设置 HTML 标签的 lang 属性，因为连字符判定依赖于 lang。
当然，即使该属性不被支持，也可以做到平稳退化，配合 text-align: justify; 使用效果对比还是很明显的。
image.png
在未来可能的 CSS4 中，还会加入更细粒度的属性，详见 https://drafts.csswg.org/css-text-4/#hyphenation
持续更新中...
这是《CSS揭秘》第五章内容的总结。 连字符断开 文字排版中，一般会考虑到两端对齐，这样不会让文字整体显得凌乱不堪...
连字符断行 CSS 文本（第三版）引入了一个新的属性 hyphens 。它接受三个值：none 、 manual ...
网页字体排印指南[1] 标签（空格分隔）： CSS 排版者应像手艺人一样遵循一条原则：做好自己的工作并隐于无形. ...
排版者应像手艺人一样遵循一条原则：做好自己的工作并隐于无形. 关于 网页上百分之九十五的信息是「文字」，大多数人浏...
1. CSS文本 2.CSS字体 3. CSS链接 4. CSS列表 5. CSS边框 6. CSS表格 CSS如...
字体系列 CSS定义了5中通用字体系列 Serif Sans-serif Monospace，等宽字体 Cursi...
CSS定义了5种通用字体系列 Serif 字体 成比例，有上下短线 Sans-Serif 字体 这些字体成比例，但...
参考《css揭秘》
A今天学了什么 1.css背景: 2.css文本： 3.css字体： 4.css链接: 5.css列表样式(针对u...
今天学了什么 1.css的背景 2.css 文本 3.css字体 4.css链接 5.css列表样式(针对ul) ...
本文标题：CSS揭秘(5)：字体排印
本文链接：https://www.haomeiwen.com/subject/nqfysxtx.html
网友评论