Вес шрифта становится легче на 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? Какие-нибудь лучшие решения? Может ли мой шрифт быть частью проблемы?

Спасибо.

Ответ 1

Итак, я исправил свою проблему с применением:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Теперь мой шрифт согласован в каждом браузере.

Ответ 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!! Задача решена. На данный момент