谈谈一些有趣的CSS题目（29）-- text-fill-color 与 color 的异同 #17

挺有意思的。大部分人都知道 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-color 与 color 的最大的差异，我觉得是 text-fill-color 的概念是借鉴了 SVG 图形，从 SVG 引进的，而 color 是传统意义上 CSS 的概念。

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

text-fill-color 的兼容性

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

看看 Can i use :

配合 text-stroke

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

CodePen -- Demo