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

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

图标字体在Google Chrome、Edge和Internet Explorer上呈现效果很好，但在FireFox上无法正确呈现

可能的解决方案 我在互联网上搜寻了一个解决方案，以了解为什么会发生这种情况，我发现了以下潜在原因：

图标字体中缺少提示

垂直矩阵不正确

由于使用ClearType而产生的问题

第一个和第二个原因（大概）可以通过与32*32网格的正确对齐来排除。第三个原因是我不能做太多的事情，因为我不能为用户打开或关闭ClearType，因为用户必须自己打开或关闭ClearType。然而，在整个网络上，我都会遇到图标字体，它们在所有浏览器和平台上都呈现出清晰和正确的效果

我遇到的几乎所有StackOverflow和博客帖子似乎都没有足够详细地讨论这个问题，这让我感到惊讶，因为这是一个相当大的问题（至少对我来说）

问题: 我正在寻找一个人谁是能够解释给我足够深入，为什么我遇到这个问题，我可以做什么来解决它。我非常愿意接受博客帖子或其他阅读材料，作为更好地理解问题的一种手段，因为我现在甚至没有线索

质量差异 我提供了两个截图，比较FireFox和Google Chrome的质量：

火狐

谷歌浏览器

插画艺术板 这就是Adobe Illustrator artboard的外观：

编辑：图标特写： 火狐

谷歌浏览器

编辑2：摘要图标的SVG：

您的屏幕截图看起来与我非常相似。嗨，罗伯特-如果您仔细查看icon-ic_summary one，您会发现质量上有很大差异。我仔细查看，我看不出有什么不同。我为Chrome和FireFox添加了一个有问题的图标特写。该图标的SVG标记是什么？您的屏幕截图看起来与我非常相似。嗨，罗伯特-如果您仔细查看例如icon-ic_summary one，您将看到质量上的巨大差异。我仔细查看，我看不出有什么不同。我为Chrome和FireFox添加了一个有问题的图标特写。该图标的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>