带有 CSS 和 PNG 的假字体图标答案

【问题标题】：Fake Font-Icon with CSS and a PNG带有 CSS 和 PNG 的假字体图标
【发布时间】：2014-08-06 02:55:36
【问题描述】：

我有一个透明的灰度 PNG 图标。我希望能够像字体图标一样改变它的颜色。

更多细节：PNG 具有用于实际“图标”的外部透明度和内部白色区域，加上一个小的灰度渐变，因此它们具有好看的“模糊”边缘。我拥有 Image Magic，所以我不介意在任何解决方案之前是否必须采用底片/否则对 PNG 进行转换。

为什么我不能只使用字体图标集：我们正在使用一些自定义的专有图标，我花了几个小时试图将它们转换为字体图标集，但没有成功。所以我不太可能在外面找到 我们的 图标，而且我无法将我们的图标放入字体图标集中。我可能做错了，或者我找不到合适的工具。

所以我的下一个最佳选择是使用 CSS “Masking”，但我无法完成这项工作。我们的想法是将 div 的背景设置为正确的颜色，然后屏蔽掉 div，这样只有与图标对应的部分可见......但我也无法让它工作。

我对任何想法都持开放态度，但我的直觉认为 CSS 是“必经之路”，除非有一些 PNG->我还没有找到的字体工具。

所以重申一下：我有一个具有透明度的灰度 PNG，我需要在一个网站上显示它，并使用 CSS 设置的“字体颜色”。

有什么想法吗？（谢谢！）

【问题讨论】：

评论你的反对票。
This Web Designer Depot Tutorial 如果您能够导出 SVG，那么创建字体图标似乎非常简单。老实说，我不认为 CSS 会是一条出路，因为我觉得它会很快变得毛茸茸。我建议使用Inkscape 之类的编辑器与a tutorial like this 结合使用来制作SVG，然后将它们转换为字体。希望我能提供更多帮助，但这不是我的强项。
您将图标转换为图标字体的过程是什么？
我们尝试使用一种工具将它们转换为 SVG，以便我们可以使用 Icomoon，但生成的 SVG 看起来不正确（缺少视觉元素，线条更粗糙）

标签： css png font-face mask

【解决方案1】：

为此使用遮罩并不难：

.filtered {
    width:200px;
    height:200px;
    position:relative;
    background-color: red;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: url(http://i35.tinypic.com/2091450.png); 
    mask-size: 100% 100%;
    mask-image: url(http://i35.tinypic.com/2091450.png); 
}

但是你不会得到对旧浏览器的太多支持

fiddle

【讨论】：

我需要一两天的时间来确认。
我不确定为什么我所做的事情以前不起作用，但现在肯定起作用了。谢谢！
仅供未来人们参考：使用 imagemagick，反转颜色很容易：convert image1.png -negate image1_mask.png - 因为面具是黑色的，所以你的“下方”图像会显示出来。
很高兴它帮助了你！