自定义 Fontello 图标在移动设备上显示不正确

Question

我已经从 Sketch 导出了一组 SVG 图标，并通过 Fontello 处理它们以在我的网站上使用。对于桌面（包括移动视图）来说一切都很好，但内部路径似乎特别在移动设备上“消失”了。

我已经在 iOS 和 Android 上使用默认的 Safari 浏览器、Android 网络浏览器和移动版 google chrome 进行了测试，结果相同。

在 Sketch 中，我使用的是带联合的组合形状 我也尝试过使用 Adob​​e Illustrator，但结果相同。

它在桌面上的显示方式： icons on desktop

它在移动设备上的显示方式 icons on mobile devices

这是我的 Sketch 导出的 SVG 示例。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="113px" height="113px" viewBox="0 0 113 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Introduction" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Facebook" transform="translate(-1.000000, -1.000000)" fill="#000000">
        <path d="M114,57.5 C114,26.2959116 88.7040884,1 57.5,1 C26.2959116,1 1,26.2959116 1,57.5 C1,88.7040884 26.2959116,114 57.5,114 C88.7040884,114 114,88.7040884 114,57.5 L114,57.5 L114,57.5 L114,57.5 L114,57.5 L114,57.5 Z M49.9465,88.7759701 L61.4605,88.7759701 L61.4605,59.8388273 L71.0245,59.8388273 L72.5035,48.5534939 L61.4605,48.5534939 L61.4605,41.3001606 C61.4605,39.5233987 61.8655,38.1550177 62.6065,37.1980654 C63.3475,36.3081606 64.7605,35.8296844 66.9145,35.8296844 L72.7735,35.8296844 L72.7735,25.7725415 C70.7545,25.4312082 67.9255,25.2940654 64.2235,25.2940654 C59.9125,25.2940654 56.4115,26.5923511 53.8525,29.1950177 C51.2275,31.7915892 49.9465,35.4853035 49.9465,40.2060654 L49.9465,48.5534939 L40.3855,48.5534939 L40.3855,59.8388273 L49.9465,59.8388273 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 Z" id="Combined-Shape"></path>
    </g>
</g>
</svg>

Answer 1

仅供参考 Fontello 不支持填充规则或填充。仍在尝试弄清楚如何使用我的图标解决此问题，但这会导致您描述的行为。