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

Question

我试图覆盖我无法控制的 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。

我已经查找了 and 的主题，但我无法使其工作。

我是不是遗漏了什么，我该怎么做才能更正它？

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

Answer 1

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

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

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

Answer 2

Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided. It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac Mini on MacOS 10.14.6 with a 4K display @ 1920 x 1080 (i.e. HiDPI). The same browser (i.e. Firefox) may handle fonts differently on depending on operating system and hardware setup.

解决方案

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

.md-step.md-complete md-step-label-wrapper::before {
    content: '';
    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 演示 link 中的 Firefox 中也有同样的问题，那么我猜这个问题不仅仅是图标字体，而且还会影响 SVG。您可以进一步向下滚动到：其他可能的修复.

可以从 here 下载 SVG 格式的 Material 设计图标。使用边栏中的搜索过滤器并输入 edit 作为您想要的图标，然后按左下角的 [Download] SVG 24 按钮。

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

在代码编辑器中打开下载的 SVG，并参考 CSS 中 SVG 的格式化方式以获取 md-steppers 演示。更改 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: '';
    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/

或者，您可以在将 width/height/fill 修改为文件后保存 SVG，然后在您的 CSS 中引用它，例如：

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

其他可能的修复：

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

选项 1

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

选项 2

正在应用 font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS 属性。请记住，此处的更改可能会影响它在其他人设备上的呈现方式。

选项 3

我刚刚在 Material 设计图标 Github 上看到 this open issue 用户推荐使用这个 CSS hack：transform: rotate(0.03deg)

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

Icon not rendering properly in Firefox when adding them by SASS

css

icons

sass

angularjs

material-design

解决方案

其他可能的修复：