text-stroke

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您的每个旅程阶段提供云产品。立即开始使用 $200 免费信用额度!

text-stroke 是一种实验性属性,它提供类似于 Adobe Illustrator 或其他矢量绘图应用程序中的文本装饰选项。它目前未包含在任何 W3CWHATWG 规范中。截至 2013 年 6 月,它仅在 -webkit 供应商前缀后实现,尽管 Firefox 和 Internet Explorer 的未来版本可能会支持该属性(可能在其自己的前缀下)。

mark {
  text-stroke: 2px red;
}

text-stroke 属性实际上是另外两个属性的简写:

  1. text-stroke-width,它接受单位值(1px、0.125em、4in 等)并描述描边效果的厚度。
  2. text-stroke-color,它接受颜色值(十六进制、rgb/rgba、hsl/hsla 等)。

text-stroke 还有一个配套属性 text-fill-color,它将覆盖 color 属性,允许在不支持 text-stroke 的浏览器中优雅地回退到不同的文本颜色。

关注点

  • text-stroke 绘制的描边与文本形状的中心对齐(与 Adobe Illustrator 中的默认设置相同),目前没有选项可以将对齐方式设置为形状的内部或外部。不幸的是,这使得它变得不太好用,因为无论现在如何,描边都会干扰字母的形状,破坏了原始字体设计师的意图。设置将是理想的,但如果我们必须选择一个,外部描边会更有用。
  • 在 Webkit 中,text-stroke 可以使用 CSS 过渡和动画进行动画化 - 但仅限于描边颜色,而不是描边宽度。
  • text-stroke 效果的更兼容浏览器(并且可以说更健壮)的替代方案是使用 text-shadow,这在 这篇文章中 有所概述。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4*49*15*3.1*

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
127*127*2.1*4.0-4.1*

更多信息