Blurry Text Rendering on iOS

Question

Я работаю над оптимизацией iOS моего текущего шаблона WIP, и у меня странная проблема с шрифтом.

, как вы можете увидеть здесь: http://www.minddraft.com/anytain/htmltemplates/font-issue.html

шрифты в topbar/навигационной панели совершенно четкие. Все шрифты ниже размыты. панель с кнопкой добавления фильмов не трансформируется или что-то еще. контент с обложками является абсолютным, а сами обложки имеют перспективные и 3D-преобразования.

особая вещь, что это влияет только на сафари для ios. на хром для Android и настольных браузеров все выглядит отлично.

я попытался следующий материал, чтобы исправить:

• увеличил размер шрифта и масштабировать его вниз
• добавил WebKit-купели сглаживания
• добавил translateZ (0)
• добавил prespective
• добавил сохранить-3d

ничего не работало. У меня больше нет идей, как решить эту проблему. есть идеи?

Edit:

Я использую следующие правила @ шрифт лицу для моих шрифтов:

@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; 
 
}

Приветствия, Marco

Answer 1

Либо рассмотрим другой формат шрифта, по моему опыту .woff works очень хорошо, у меня была аналогичная проблема раз и для жизни меня я не могу вспомнить, что я сделал, чтобы исправить это, рассмотреть что-то вроде следующего:

@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

Оке я исправил его!

Проблема была перспектива: 1500px на самой обертке. я не знаю, почему webkit на ios делает шрифты настолько размытыми, когда я применяю перспективу. если кто-нибудь знает об этом, пожалуйста, поделитесь своими знаниями :)