手机图标字体显示问题答案

【问题标题】：Icon font display issue on phones手机图标字体显示问题
【发布时间】：2018-02-06 07:35:29
【问题描述】：

在工作中，我们正在开发这个在链接旁边显示图标的组件。 SVG 图标以图标字体存储（正在加载 WOFF2 格式）。在台式电脑上，它们看起来应该是这样，但是在 Android 和 iOS 设备上，一些图标看起来有点奇怪。一些不应该被“填补”的空白正在被“填补”。

图标的正确版本：

这是它在手机上的外观：

为什么会这样？

这不是媒体查询问题，因为它在缩小浏览器窗口时看起来应该是这样，但在 iOS 模拟器中却没有。它似乎特定于移动设备。

【问题讨论】：

这可能是 svg 文件的问题。如果您查看电话图标，它不会像其他人一样填写。我建议你看一下图标中的矢量线，看看这些线是否连接起来。只是一个自发的想法。
是的，但奇怪的是它是特定于设备而不是特定于屏幕的。移动浏览器呈现 SVG 的方式是否不同？

标签： css svg icons

【解决方案1】：

这是目前支持最深入的方法：

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
   url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Have a look at this，希望对你有帮助。

【讨论】：