Ответ 1
Итак, я исправил свою проблему с применением:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Теперь мой шрифт согласован в каждом браузере.
Вес шрифта становится легче на Mac/Safari
На моем последнем веб-сайте текст идеально подходит для chrome и firefox, не затрагивая сглаживание шрифтов или что-то еще.
Но на Mac/Safari 7 текст появляется хорошо, а затем сразу становится тоньше (слишком тоньше/нехорошо читать).
После некоторого исследования [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
и некоторые тесты, играющие с
-webkit-font-smoothing
Похоже, Safari отображает текст сначала с помощью
-webkit-font-smoothing: subpixel-antialiased;
Затем сразу после того, как вы получите мерцающий эффект, когда он поворачивает шрифт, чтобы:
-webkit-font-smoothing: antialiased;
Итак, мне кажется, что у меня не было выбора, кроме как заставить
-webkit-font-smoothing: subpixel-antialiased;
чтобы сделать мой сайт совместимым во всех браузерах.
Я использую шрифт Avenir Std Roman.
Некоторые объяснения этой проблемы Safari? Какие-нибудь лучшие решения? Может ли мой шрифт быть частью проблемы?
Спасибо.
Ответы
Ответ 2
попробуйте оба
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
Ответ 3
Просто используйте это: link href= "https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel= "stylesheet"
Вместо этого: link href= "https://fonts.googleapis.com/css?family=Lato" rel= "stylesheet"
проблема решена для меня таким образом!
Ответ 4
Использование -webkit-font-smoothing: subpixel-antialiased немного поработало, но между Safari, Chrome и Firefox все еще была большая разница. Я понял, что попытка сделать шрифт толще в Safari не будет работать, поэтому вместо этого я сделал шрифт более легким в других браузерах, а затем использовал немного более толстый вес шрифта. То, что в конечном итоге нормализует размер шрифта для браузеров для меня, таково:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Ответ 5
Попробуйте следующее:
transform: translateZ(0.1px);
В браузерах Webkit на Mac обнаружена проблема с сглаживанием 2d и 3d текстовых элементов по-разному. Предоставление свойства 3d элементу обычно устраняет проблему.
Ответ 6
правда состоит в том, что решение этой проблемы (до тех пор, пока яблоко не исправит это) очень просто. Создайте файл css (example.css) и внутри вставьте это:
* {-webkit-font-smoothing:subpixel-antialiased;}
Затем перейдите в Safari > "Настройки" > "Дополнительно" > "Таблица стилей", щелкните его и выберите только что созданный файл css. Перезапустите Safari.
TADA!! Задача решена. На данный момент