IconFont - 跨浏览器和平台的一致质量

Question

问题

我今天大部分时间都在阅读和学习SVG格式以及用于网络开发的Icon Fonts应用程序。我已将现有图标集（部分）转换为与Adobe Illustrator中32 * 32网格对齐的图标，将这些图标导出为SVG文件并使用IcoMoon将其转换为图标字体。

图标字体在Google Chrome，Edge和Internet Explorer上呈现出色，但拒绝在FireFox上正确呈现。

可能的解决方案

我已经在网上搜索了解为什么会发生这种情况的解决方案，并且我遇到了以下潜在原因：

1. 图标字体缺乏暗示。
2. 不正确的垂直矩阵。
3. 使用ClearType产生的问题。

第一和第二个原因可以（推测）通过与32 * 32网格的正确对齐来排除。第三个原因是我无法做很多事情，因为我不能为用户打开或关闭ClearType，因为他或她必须这样做。然而，在整个网络上我遇到的图标字体为所有浏览器和所有平台呈现清晰和正确。

我遇到的几乎所有StackOverflow和博客文章似乎都没有真正详细地介绍这个问题，这让我感到惊讶，因为它是一个相当大的问题（至少对我而言）。

问题

我正在寻找能够向我解释为什么我遇到这个问题以及我能做些什么来解决它的人。我更愿意接受博客文章或其他阅读材料作为更好地理解问题的手段，因为我现在甚至没有领导。

质量差异

我提供了两个屏幕截图，比较了FireFox与Google Chrome中的质量：

火狐



Google Chrome



Illustrator画板

这就是Adobe Illustrator画板的样子：



编辑：图标的特写：

火狐



Google Chrome



编辑2：摘要图标的SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px"
     height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#444444;}
    .st1{fill:#444445;}
]]>
</style>
<g id="summary">
    <g>
        <path class="st0" d="M54,4h-6V1.827C48,0.817,47.105,0,46.002,0C44.896,0,44,0.817,44,1.827V4H34V1.827
            C34,0.817,33.105,0,32.002,0C30.896,0,30,0.817,30,1.827V4H20V1.827C20,0.817,19.105,0,18.001,0C16.896,0,16,0.817,16,1.827V4h-6
            C8.896,4,8,4.896,8,6v56c0,1.104,0.896,2,2,2h44c1.104,0,2-0.896,2-2V6C56,4.896,55.104,4,54,4z M52,60H12V8h4v2.174
            C16,11.183,16.896,12,18.001,12C19.105,12,20,11.183,20,10.174V8h10v2.174C30,11.183,30.896,12,32.002,12
            C33.105,12,34,11.183,34,10.174V8h10v2.174C44,11.183,44.896,12,46.002,12C47.105,12,48,11.183,48,10.174V8h4V60z"/>
        <path class="st0" d="M45.859,46H18.141C16.959,46,16,46.896,16,48c0,1.104,0.959,2,2.141,2h27.719C47.042,50,48,49.104,48,48
            C48,46.896,47.042,46,45.859,46z"/>
        <path class="st0" d="M45.859,34H18.141C16.959,34,16,34.896,16,36c0,1.104,0.959,2,2.141,2h27.719C47.042,38,48,37.104,48,36
            C48,34.896,47.042,34,45.859,34z"/>
        <path class="st0" d="M45.859,22H18.141C16.959,22,16,22.896,16,24c0,1.104,0.959,2,2.141,2h27.719C47.042,26,48,25.104,48,24
            C48,22.896,47.042,22,45.859,22z"/>
    </g>
</g>
<g id="login">
</g>
<g id="mail">
</g>
<g id="download">
</g>
<g id="check_x5F_enabled">
</g>
</svg>