介绍 Text-Stroke

WebKit 现在支持通过 CSS 对文本进行描边。在现有网页中，绘制文本的字形始终填充单一颜色，由 color CSS 属性指定。有时作者可能希望用一种颜色描边字形的边缘，并用另一种颜色填充。通过描边文本而不填充内部，您可以实现轮廓效果（此选项在 TextEdit 和 OS X 文本字段上下文菜单中均存在）。

我为 CSS 引入了四个新属性来支持文本描边：

text-fill-color – 此属性允许您为文本指定填充颜色。如果未设置，则使用 color 属性进行填充。
text-stroke-color – 此属性允许您为文本指定描边颜色。如果未设置，则使用 color 属性进行描边。
text-stroke-width – 此属性允许您指定描边的宽度。它默认为0，表示只执行填充。您可以为此值指定长度，此外还可以使用 thin、medium 和 thick 值（其中“thin”最类似于 OS X 的轮廓行为）。
text-stroke – 此属性是两个描边属性的简写。

这是一个示例（下载最新的 WebKit 每夜版即可查看）：

此示例的代码如下：

<div style="font-size:64px; -webkit-text-stroke: 3px black; color: purple;">
This text has a black 3px stroke and a purple fill.
</div>

这些新属性可以与::selection伪元素一起使用，因此您可以对选定的文本应用不同的描边和填充。

下划线和上划线等文本装饰如果设置了描边颜色（除非它是透明的），将优先使用描边颜色。否则，它们将使用填充颜色。

Text-shadow 会同时为文本的描边和填充创建阴影，因此您可以获得像带阴影轮廓这样精妙的效果，如下面的示例所示：

这是第二个示例的代码：

<div style="font-size:64px; text-shadow: 5px 5px 5px black; -webkit-text-fill-color: transparent; -webkit-text-stroke:3px red">
Red stroked text with a hollow interior and a black stroked shadow.
</div>

此效果也适用于::first-letter和::first-line伪元素。

一如既往，请将您发现的任何与此功能相关的错误报告到 bugs.webkit.org。尽情享受吧！