Html iOS上的模糊文本渲染

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

正如你在这里看到的：

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

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

我尝试了以下方法来修复它：

增加字体大小并缩小它 添加了webkit字体平滑 添加了translateZ0 附加预见 添加了preserve-3d 什么都没用。我不知道如何解决这个问题。有什么想法吗

编辑：

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

@字体{ 字体系列：“Bariol”； src:url'font/bariol_light-webfont.eot'； src:url'font/bariol_light-webfont.eot？iefix'格式'embedded-opentype'， url'font/bariol\u light-webfont.woff'格式'woff'， url'fonts/bariol_light-webfont.ttf'格式'truetype'， url'font/bariol_light-webfont.svgbariol_lightlight'格式为'svg'； 字体大小：300； 字体风格：普通；

---

从我的经验中考虑不同的字体格式。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在我使用的字体上出现了问题，导致了闪烁等等。

我修复了它

---

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

我编辑了我的问题并添加了我当前的@font-face代码。我已经使用了woff和truetype，以及eot和svg。您是否删除了透视线来解决此问题？据我记忆所及，是的。或者只是将透视图直接添加到transform语句本身中。转换：translateX40px translateZ20px透视图1000px；