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

Question

我使用 fontsquirrel 下载 webfonts，但 iPhone 上的字母间距加倍。我尝试在 fontsquirrel 设置中启用 "remove kerning"，但这不起作用。

@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 post！）

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

Letter spacing doubles for font-face fonts on iPhone

css

iphone

font-face

ios