CSS中的字体与排版

1.连字符断行

问题：两端对齐的效果的时候，折行效果有的时候真的很丑。
解决：使用hyphens属性。

hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。
它接受三个值：none，manual和auto。它的初始值是manual，以匹配现有的行为：我们可以用软连字符手动断字。

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;

2.插入换行

问题：对于表格元素，如何使多个<dd>元素在同一行，如何在最后一个<dd>元素后面插入换行符
解决方案：使用伪元素，在<dd><dt>中间插入换行符“\A”.
在<dd><dd>中间插入“，” 使用white-space: pre;保留源代码中的空格和换行重点代码：

dd + dt::before {//使用伪元素，在<dd><dt>中间插入换行符“\A”.content: "\A";white-space: pre;
}dd + dd::before {//在<dd><dd>中间插入“，”content: ', ';font-weight: normal;margin-left: -.25em;
}

HTML：

<dl><dt>Name:</dt><dd>Lea Verou</dd><dt>Email:</dt><dd>lea@verou.me</dd><dd>leaverou@mit.edu</dd><dt>Location:</dt><dd>Earth</dd>
</dl>

CSS：

dt, dd {display: inline;margin: 0;
}dd {font-weight: 600;
}dd + dt::before {//使用伪元素，在<dd><dt>中间插入换行符“\A”.content: "\A";white-space: pre;
}dd + dd::before {//在<dd><dd>中间插入“，”content: ', ';font-weight: normal;margin-left: -.25em;
}body {font: 150%/1.6 Baskerville, Palatino, serif;
}

3.文本行的斑马条纹

解决：利用linear-gradient创建条纹背景，使其的宽度与行高相符
注意：padding会使元素与条纹背景出现错位，所以要对背景设置background-origin:content-box，消除影响

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; //两行background-origin: content-box;font-family: Consolas, Monaco, monospace;
}
code { font: inherit }

4.调整`tab`的宽度

-问题：tab在浏览器中的宽度为8个字符，我们一般会调整成我们习惯的宽度4或2.

tab-size: 2

5.连字

问题：某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的f和i。在css第三版中，引入了font-variant-ligatures属性。

font-variant-ligatures: comon-ligaturesdiscretionary-ligatureshistorical-ligatures

6.自定义下划线

用background-image及其相关属性来形成下划线

a {background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 .9em;text-shadow: .05em 0 white, -.05em 0 white;
}

a {background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;background-size: .2em 2px;background-position: 0 .9em;
}

7.现实中的文字效果

凹进去的字体效果

思路：底部加上浅色投影或者顶部加深色投影

底部加上浅色投影

p {padding: .8em 1em;background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
}

顶部加上深色投影

p + p {background: hsl(210, 13%, 30%); color: hsl(210, 13%, 60%);text-shadow: 0 -1px 1px black;
}

文字凸起效果
思路：使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底层加上一层强烈模糊的暗投影，从而实现效果

body {background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),//亮度l逐渐变暗0 5px 10px black; //底层加上一层强烈模糊的暗投影font: bold 500%/1 Rockwell, serif;
}

空心字
思路：使用SVG描边方法

<h1>CSS</h1><h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></h1>

h1 {margin: 0;color: white;
}h1:first-child { text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }h1 text { fill: currentColor }
h1 use {stroke: black; stroke-width: 6;stroke-linejoin: round;
}body {background: deeppink;font: bold 200%/1 Rockwell, serif;
}

字体外发光
思路：准备几层重叠的text-shadow，不考虑偏移量，颜色保持跟字体一样。
可以加上过渡效果，使得鼠标悬停时出现效果，transition:1s.

        a {padding: .5em;line-height:1.5;background: #203;color: white;transition: 1s;}a:hover {text-shadow: 0 0 .1em, 0 0 .3em;}

如果在hover的时候把字体本身的颜色变成透明，则出现模糊效果

    a:hover {color: transparent;text-shadow: 0 0 .1em white, 0 0 .3em white;}

用滤镜来实现模糊效果

a:hover {filter: blur(.1em);}

本文整理自《CSS揭秘》