字体排印
连字符断行
在杂志和书籍中,经常可以见到两端对齐效果。但是在网页设计中,两端对齐效果很少被使用。
原因是会带来糟糕的显示问题。text-align: justufy;
在css第三版中,引入了一个属性hyphens:\[none, manual, auto\]
。
使用hyphens:auto;
会让浏览器决定什么时候用换行符。前提是提前设置好网页的HTML标签的lang属性。
在线编辑:dabblet JSFiddle
注:使用chrome浏览器测试均不正常。使用safari浏览器测试正常
插入换行
考虑如下代码:
<dl>
<dt>Name:</dt>
<dd>Versdf</dd>
<dt>Email:</dt>
<dd>hfd@fas.me</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>
想要的效果如图:
由于<dt>
和<dd>
都是块级元素,所以在不修改结构的前提下,我们可以使用伪元素实现不破坏语义同时实现此目的
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宽度
在网页中,通常使用<pre>
或者<code>
来显示代码。它们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规则实现只对&符号应用特殊的字体。感觉方法不是很通用,先不做深入研究。