谈谈一些有趣的CSS题目(29)-- text-fill-color 与 color 的异同

@chokcoco 2017-05-25 02:29:38发表于 chokcoco/iCSS 原理

挺有意思的。大部分人都知道 color ,但是只有很少一部分人知道 text-fill-color

那么,text-fill-color 究竟是何方神圣呢?从字面意思理解,直译就是文本填充颜色,其实它与 color 的作用是一样的,为文字设定颜色值。

而且,text-fill-color 会覆盖 color 所定义的字体颜色,也就是前者的优先级更高。可以看看这个 Demo:

CodePen -- Demo

那么,有了 color ,为何还多此一举出现了一个 text-fill-color

text-fill-color 与 color 的差异

关于这个说法,网上大部分文章给出的解释是,text-fill-color 可以设置 transparent 关键字,也就是使文字透明,而 color 无法设置 transparent 关键字。

这个说法是不准确的。

在 CSS3 之前,transparent 关键字不是一个真实的颜色,只能用于 background-color 和 border-color
中,表示一个透明的颜色。而在支持 CSS3 的浏览器中,它被重新定义为一个真实的颜色,transparent 可以用于任何需要 color 值的地方,也就是 color 属性是支持 transparent 的。

text-fill-colorcolor 的最大的差异,我觉得是 text-fill-color 的概念是借鉴了 SVG 图形,从 SVG 引进的,而 color 是传统意义上 CSS 的概念。

在 SVG 中,我们使用 fill 内联属性给 SVG 图形文本上色。

text-fill-color 的兼容性

相比之下,其实 text-fill-color 的兼容性更差,大部分时候,我们使用它需要加上 -webkit- 前缀。

看看 Can i use :

image

配合 text-stroke

说到 text-fill-color, 可以顺便再提一下 text-stroke,它也是 SVG 引进的概念,与 border 类似,不同的是它可以给文字描边。看看下面这个 Demo:

CodePen -- Demo