Question

我使用fontsquirrel下载webfonts，但字母间距在iPhone上加倍。我尝试在fontsquirrel设置中启用“删除字距”，但这不起作用。

@font-face {
font-family: 'fjalla_oneregular';
src: url('../../core/texts/fjallaone-regular-webfont.eot');
src: url('../../core/texts/fjallaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../../core/texts/fjallaone-regular-webfont.woff2') format('woff2'),
     url('../../core/texts/fjallaone-regular-webfont.woff') format('woff'),
     url('../../core/texts/fjallaone-regular-webfont.ttf') format('truetype'),
     url('../../core/texts/fjallaone-regular-webfont.svg#fjalla_oneregular') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;

}

.post-header h1 {
    font-family: "fjalla_oneregular", Impact, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #191919;
    letter-spacing: 0px;
}

是否有解决方法使桌面浏览器和移动设备之间的间距匹配？

Answer 1

找到解决方案可能是一个令人困惑和棘手的问题。尝试在EOT URL行之前移动SVG URL行。看来Chrome使用@ font-face工具包中的.svg文件，并且不喜欢最后调用。以下是使用CSS的@ font-face的标准调用：

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

从示例中可以看出，.svg文件位于被叫URL列表的最后。如果我们修改代码以定位webkit浏览器，那么告诉他们仅使用.svg文件。

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {font-family: ‘chunk-webfont’;
  src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);
}

我使用的是FontSquirrel的字体和相同的代码，最近在iOS 10更新后，我的一些网站都被错误的字体间距打破了。

请参阅Font Face Chrome Rendering以供参考（非常感谢Sam Goddard的那篇文章！）

iPhone上的字体 - 字体字体的字母间距加倍

1 个答案: