html - Firefox 中的字形图标是像素化的

Question

我在我的网络应用程序中集成了 Bootstrap 。在 Firefox 中，所有字形图标在任何字体大小下都是像素化的。在 Chrome 中，可以正确呈现。可能是什么问题呢？

图片:

这是从图标所在的 :before 元素中检查收集的 CSS(请注意，其中一些可能被划掉，但复制/粘贴没有保留它)

button.table-btn.view::before {
    content: "\e086";
}
button.table-btn::before {
    font-family: 'Glyphicons Halflings',serif;
    font-size: 18px;
    padding: 6px;
}
*::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button {
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
}
a, a::after, button {
    color: inherit;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    line-height: 1.42857143;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
body {
    color: #666;
    font: 12px/1 Verdana,Geneva,sans-serif;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
}

Answer 1

它与 CSS 无关。这可能是您的浏览器。

---

尝试在 Firefox 中禁用或启用硬件加速。

工具 > 选项 > 高级 > 常规 > 浏览:“可用时使用硬件加速”

• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

• https://hacks.mozilla.org/2010/09/hardware-acceleration/

---

复制自:https://support.mozilla.org/en-US/questions/943289