iOS上的模糊文本渲染

pbwdgjma 于 2023-05-02 发布在 iOS

关注(0)|答案(2)|浏览(224)

我正在对我当前的WIP模板进行iOS优化，我有一个奇怪的字体问题。
如图所示：* 死链接 *
顶部栏/导航栏中的字体完全清晰。下面的所有字体都是模糊的。带添加电影按钮的栏没有转换或其他东西。具有封面的内容是绝对定位的，并且封面本身具有透视和3D变换。
特别的是，这只影响iOS的Safari。在Android和桌面浏览器的Chrome上看起来都很好。

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

增加字体大小并缩小
添加webkit-font-smoothing
已添加translateZ（0）
附加透视图
添加保存-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;
}

干杯，马可

ios

来源：https://stackoverflow.com/questions/28235063/blurry-text-rendering-on-ios

2条答案

按热度按时间

ctehm74n1#

根据我的经验，要么考虑不同的字体格式。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 */
}

如果你确保每一个浏览器都有它的字体格式设置，一切都应该很好，其他任何事情都是奇怪的。
我很确定我的问题一直持续到有一天，当一些更新推出的各种浏览器，我记得特别是火狐有问题的字体，我正在使用造成 Flink 等。

赞(0）回复(0）举报 2023-05-02

cwdobuhd2#

我修好了！
问题出在透视图上： Package 器本身的像素为1500 px。我不知道为什么当我应用透视图时，iOS上的WebKit会使字体如此模糊。如果有人知道更多，请分享你的知识：）

赞(0）回复(0）举报 2023-05-02