通过 SASS 添加图标时，图标无法在 Firefox 中正确呈现答案

【问题标题】：Icon not rendering properly in Firefox when adding them by SASS通过 SASS 添加图标时，图标无法在 Firefox 中正确呈现
【发布时间】：2020-05-19 08:56:22
【问题描述】：

我正在尝试覆盖我无法控制的 angularjs 组件中的图标。这是一个名为md-steppers 的步进库。我能够更改 chrome 中的当前步骤图标。这是我的做法。

/* ... */
&.md-active md-step-label-wrapper {
    font-weight: bolder;
    display: flex;
    &:before {
        font-family: 'Material Icons';
        content: '\E150';
        color: white;
    }
}
/* ... */

如您所见，我正在通过加载字体Material Icons 然后更改content 来更改图标。

此解决方案在 Chrome 中运行良好。但是，我在 Firefox 中遇到了一些问题。当我以 100%（或更少）缩放时，图标似乎无法正确呈现。上面的一切似乎都很好。

您可以将上面的图片与 Chrome 上的结果进行比较（均为 100% 缩放）

Firefox 上的结果有点模糊，而且格式不正确。

我知道这可能是 Firefox 本身的一个错误，即it has been reported before。我看到了一些围绕mask css 属性的解决方法，但我不确定它是否适用于我，因为我根本没有使用mask。这是假设图标呈现为 SVG。

我已经在主题上查找了 CSS - Using SVG mask not displaying correctly in Firefox 和 Firefox not rendering svg properly，但我无法成功。

我在这里遗漏了什么吗？我能做些什么来纠正这个问题？

Here is a Jsfiddle with the problem occurring。问题接缝出现在 iframe 中，也出现在 chrome 中。

【问题讨论】：

另外，似乎没有涉及任何 SVG。
我已根据您的 cmets 编辑了我的问题。谢谢你指出。 @Rob
如果您设法将有效的样式提取到最小的工作示例中，我们可以为您提供更好的帮助。查看您的代码和 GH 源 github.com/ipiz/md-steppers/blob/master/dist/… 很难猜出发生了什么。
@myf 我创建了一个出现问题的 JSfiddle。谢谢你的建议。
使用最新的 Windows 版本的 Firefox 和最新的 Chrome 开发版本，我在小提琴中的图标看起来像素完美。

标签： css angularjs sass icons material-design

【解决方案1】：

我无法使用您提供的 jsfiddle 重现此问题（所有图标对我来说都不错）。但是我自己对其他字体图标也有类似的问题。

我认为问题来自您添加到代码中的父元素的font-weight: bolder;。浏览器现在也想让图标变粗，但由于没有“加粗”版本的图标，浏览器会尝试自己做，从而使图标看起来很奇怪。

您的小提琴没有font-weight: bolder;，所以我认为您的问题可能与此有关。尝试删除它，看看问题是否仍然存在。

【讨论】：

【解决方案2】：

免责声明：我无法验证我在下面编写的任何解决方案是否有效，因为我无法在您提供的 JSFiddle 中将问题复制到我的设备上。它在 Firefox 和 Chrome 中对我来说很好。 FWIW：我使用的是 Mac 在 MacOS 10.14.6 上使用 4K 显示屏 @ 1920 x 1080（即 HiDPI）的 Mini。相同的浏览器（即 Firefox）可能会以不同的方式处理字体取决于操作系统和硬件设置。

解决方案

md-steppers 的 demo link 在 CSS 中使用 SVG 数据：

.md-step.md-complete md-step-label-wrapper::before {
    content: '\7';
    background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }

See Line 398

如果您认为这是问题所在，我可能会尝试使用相同的方法并避免使用图标字体。如果您在上面的md-steppers 演示链接中的 Firefox 中也有同样的问题，那么我猜这个问题不仅仅是图标字体，而且还会影响 SVG。您可以进一步向下滚动至：其他可能的修复。

可以从here 以 SVG 格式下载 Material Design 图标。使用侧边栏中的搜索过滤器并输入edit 以获取所需的图标，然后按左下角的[Download] SVG 24 按钮。

您下载的图标将是默认的黑色，因此您需要进行一些更改以使其适合您使用。

在代码编辑器中打开下载的 SVG，并参考md-steppers 演示中 SVG 在 CSS 中的格式。更改height 和width 属性，并将fill 属性添加到<svg> 标记，所以它应该如下所示：

<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>

将 SVG 代码复制为一行，并以与 md-steppers 演示 CSS 中类似的方式使用它：

.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
    content: '\7';
    background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}

JSFiddle：https://jsfiddle.net/wx0brdjL/

或者，您可以在将宽度/高度/填充修改为文件后保存 SVG，然后在 CSS 中引用它，例如：

background-image: url('edit-24px.svg');

其他可能的修复：

如果使用上面的 SVG 仍然会导致 Firefox 上的内容变得模糊，或者如果您想坚持使用图标字体，那么可以尝试一些方法来修复图标字体在您的设备上的呈现方式：

选项 1

将transform: translateZ(0) 应用于&.md-active md-step-label-wrapper 或&:before。

选项 2

应用 font-smoothing（请参阅 Firefox 特定供应商前缀）或 text-rendering CSS 属性。请记住，此处的更改可能会影响它在其他人设备上的呈现方式。

选项 3

我刚刚在 Material Design Icons Github 上遇到了this open issue，用户推荐使用这个 CSS hack：transform: rotate(0.03deg)

【讨论】：