摘要：字体排印连字符断行在杂志和书籍中，经常可以见到两端对齐效果。原因是会带来糟糕的显示问题。比如大多数衬线字体中的和。在第三版中，引入了属性华丽的符号通过规则实现只对符号应用特殊的字体。
字体排印 连字符断行
在杂志和书籍中，经常可以见到两端对齐效果。但是在网页设计中，两端对齐效果很少被使用。
原因是会带来糟糕的显示问题。
text-align: justufy;
在css第三版中，引入了一个属性hyphens:[none, manual, auto]。
使用hyphens:auto;会让浏览器决定什么时候用换行符。前提是提前设置好网页的HTML标签的lang属性。
在线编辑：dabblet JSFiddle
注：使用chrome浏览器测试均不正常。使用safari浏览器测试正常
考虑如下代码：
想要的效果如图：
由于和都是块级元素，所以在不修改结构的前提下，我们可以使用伪元素实现不破坏语义同时实现此目的
dd + dd::before {
content: ", ";
font-weight: normal;
margin-left: -.25em;
}
文本行的斑马条纹
斑马条纹在UI设计中十分常见。我们可以使用:nth-child()/:nth-of-type()伪类来对奇数行和偶数行设置不同的背景，也可以使用不同的div去包裹奇数行和偶数行。现在我们还有一种简单的方法实现这一目的：对元素设置条纹背景
pre {
padding: .5em;
line-height: 1.5;
background: hsl(20, 50%, 95%);
background-image: linear-gradient(
rgba(120,0,0,.1) 50%, transparent 0);
background-size: auto 3em;//北京高度为line-height的两倍
background-origin: content-box;//设置background-position基准以content box为准
font-family: Consolas, Monaco, monospace;
}
调整tab宽度
在网页中，通常使用或者来显示代码。它们tab会被解析成8个字符。
而我们通常希望将其设置为4或者2。在CSS第三版中，增加了属性tab-size可以用来控制这个属性.
pre {
tab-size: 2
}
连字
某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的f和i。在css第三版中，引入了font-variant-ligatures属性
font-variant-ligatures: comon-ligatures
discretionary-ligatures
historical-ligatures
华丽的&符号
通过@font-face规则实现只对&符号应用特殊的字体。感觉方法不是很通用，先不做深入研究。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111598.html
摘要：连字符断行需要在的属性指定支持的语言尚未支持与结合使用插入换行避免首个前面也加入空行换行符避免逗号前面的空格，不一定为文本行的斑马条纹调整的宽度连字华丽的符号自定义下划线现实中的文字效果发光字效果环形文字 连字符断行 hyphens:auto; *:需要在HTML的lang属性指定支持的语言**：chrome尚未支持*：与word-wrap: break-word结合使用 插入换行 d...
摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...
摘要：案例全套地址案例地址去年买了一本揭秘的专题书，该书揭示了个鲜为人知的技巧，主要内容包括背景与边框形状视觉效果字体排印用户体验结构与布局过渡与动画等。去年买入时，就决定将里面所有案例全部撸一遍，作为自己年学习清单中的首项。 Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书，该书揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边...
摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...
摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...
阅读 1273·2021-11-15 18:14
阅读 3134·2021-08-25 09:38
阅读 2666·2019-08-30 10:55
阅读 2677·2019-08-29 16:39
阅读 1307·2019-08-29 15:07
阅读 2449·2019-08-29 14:14
阅读 811·2019-08-29 12:36
阅读 912·2019-08-29 11:21
