Page 165 - css揭秘

空心字效果

在未来，实现文字描边或空心字的效果会非常容易，因为我们只需要使
用 text-shadows 属性的扩张参数就可让投影变大，看起来就像给文字勾边
了一样。这个道理类似于我们用 box-shadow 的扩张效果来模拟块级元素的
外框。不过遗憾的是，目前浏览器对这个参数的支持还极为有限，因此我们
不得不另寻它法来模拟文字描边，这些方法产生的结果也各有优劣。
图 5-31 流传最广的方法就是使用多个 text-shadow，分别为这些投影加上不同
通过 text-shadow 的扩张效果实 方向的少量偏移，就像这样（参见图 5-32）：
现的真正的空心字
background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
1px -1px black, -1px 1px black;

除此以外，还可以重叠多层轻微模糊的投影来模拟描边。这种方法不需
要设置偏移量：
图 5-32
通过重叠多层 text-shadow 实现 text-shadow: 0 0 1px black, 0 0 1px black,
0 0 1px black, 0 0 1px black,
的假的 1px 描边 0 0 1px black, 0 0 1px black;

不过，这种方法并不总是可以得到完美的效果，而且性能消耗较高。没
错，这是因为用了模糊算法。
不幸的是，我们需要的描边越粗，这两种方案产生的结果就越差。举例
来说，我们可以试试 3px 的描边会糟糕到什么程度（参见图 5-33）：

background: deeppink;
color: white;
text-shadow: 3px 3px black, -3px -3px black,
3px -3px black, -3px 3px black;

不过别忘了，我们始终拥有 SVG 这个终极方案，不过它需要在结构代
图 5-33 码中插入很多乱糟糟的东西。比如说，如果我们需要在一级标题中使用空心
由多层少量偏移的 text-shadow 字效果，那 HTML 代码可能是这样的：
生成的（极不自然的）3px 描边
效果 <h1><svg width="2em" height="1.2em"> SVG
<use xlink:href="#css" />
<text id="css" y="1em">CSS</text>
</svg></h1>

然后在 CSS 中，我们需要添加以下代码：

h1 {
font: 500%/1 Rockwell, serif;
图 5-34 background: deeppink;
color: white;
使用 SVG 来实现正常的粗描边效果

134 第 5 章 字体排印

඀ࠡ JOEC