ios - iPhone 上的 font-face 字体的字母间距加倍

Question

我使用 fontsquirrel 下载网络字体，但在 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

这可能是一个令人困惑且难以找到解决方案的问题。尝试将 SVG URL 行移到 EOT 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 的这篇文章!)