字体行业不想让你知道的秘密

最近我最喜欢的一个技巧就是用它来currentColor给几乎所有东西调味。这个技巧很久以来都不为人知，但我敢肯定，Lea Verou是第一个用它并把它公之于众的人。

虽然 CSS 变量非常棒，但 1. 并不总是可以使用它们（哦， IE 11）并且 2. 并不总是必要的。

我们举个例子。还记得大家都喜欢图标字体吗？因为它们会自动获取字体的颜色。其实，SVG 也能实现同样的效果，而且控制力更强。

假设你的代码如下所示：

<nav class="menu">
    <a class="item">
        <svg><path d="..."/></svg>
        JavaScript
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Python
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Sass
    </a>
</nav>

您希望文本前面的 SVG 图标随文本颜色变化。您该怎么做？

<svg><path d="..."/></svg>

成为

<svg><path fill="currentColor" d="..."/></svg>

就这样，你的 SVG 无论如何都会保持文本的颜色。这里有一个实例，别忘了鼠标悬停在按钮上！

你有没有注意到，Python 的 logo 在鼠标悬停时并没有完全改变颜色？你不必currentColor在 SVG 的每条路径上都添加 。这比字体自由多了！

这是一个简单的技巧，但我最近确实用了很多次。你呢？你能用它想出什么图案currentColor吗？