html - iOS 上的模糊文本渲染

Question

我正在对我当前的 WIP 模板进行 ios 优化，但我遇到了一个奇怪的字体问题。

如您所见: 死链接

顶部栏/导航栏中的字体非常清晰。 下面的所有字体都是模糊的。带有添加电影按钮的栏未转换或其他内容。封面的内容是绝对定位的，封面本身有透视和 3d 变换。

特别的是，这只影响 ios 的 safari。在 chrome for android 和桌面浏览器上看起来都很好。

我已经尝试了以下方法来修复它:

• 增加字体大小并缩小
• 添加了 webkit-font-smoothing
• 添加了 translateZ(0)
• 增加了前景
• 添加了 preserve-3d

没有任何效果。我不知道如何解决这个问题。有什么想法吗？

编辑:

我对我的字体使用以下@font-face 规则:

@font-face {
    font-family: 'Bariol';
    src: url('fonts/bariol_light-webfont.eot');
    src: url('fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bariol_light-webfont.woff') format('woff'),
         url('fonts/bariol_light-webfont.ttf') format('truetype'),
         url('fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
    font-weight: 300;
    font-style: normal;
}

干杯， 马可

Answer 1

要么考虑使用不同的字体格式，根据我的经验 .woff 工作得很好，我曾经遇到过类似的问题，但我一生都记不起我做了什么来修复它，请考虑以下内容:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

如果您确保每个浏览器都设置了它的字体格式，那么一切都应该没问题，其他任何事情都是奇怪的。

我很确定我的问题一直存在，直到有一天针对各种浏览器推出了一些更新，我特别记得 firefox 与我使用的字体有关，导致闪烁等问题。