Question

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

你可以在这里看到： http://www.minddraft.com/anytain/htmltemplates/font-issue.html

顶栏/导航栏中的字体非常清晰。以下所有字体都很模糊。添加电影按钮的栏没有转换或其他东西。封面内容绝对定位，封面本身具有透视和三维变换。

特别之处在于，这仅影响ios的safari。在用于Android和桌面浏览器的Chrome上看起来都很好。

我尝试了以下内容来修复它：

增加了字体大小并将其缩小
添加了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遇到了我使用的字体问题导致闪烁等问题。

Answer 2

Oke我修好了！

问题是透视：包装器本身的1500px。我不知道为什么当我应用透视时，ios上的webkit会使字体变得如此模糊。如果有人了解更多信息，请分享您的知识：）

在iOS上模糊文本渲染

2 个答案: