手机

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，希望它可以帮到你。