css - 手机上的图标字体显示问题

Question

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

图标的正确版本:

这是它在手机上的样子:

为什么会这样？

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

Answer 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 ，希望对你有帮助。