Вес шрифта становится меньше на Mac/Safari

Question

На моем последнем веб-сайте текст идеально подходит для Chrome и Firefox, не затрагивая сглаживание шрифтов или что-либо еще.
Но на Mac / Safari 7 текст выглядит хорошо, а затем сразу становится тоньше (слишком много тоньше / плохо читается).

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

Благодарю.

Answer 1

Поэтому я исправил проблему с применением:

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

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

Answer 2

Попробуйте оба

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

Answer 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"

проблема решена для меня таким образом!

Answer 4

С помощью -webkit-font-smoothing: subpixel-antialiased работал немного, но между Safari, Chrome и Firefox все еще было слишком много различий. Я понял, что попытка сделать шрифт в Safari толще не получится, поэтому вместо этого я сделал шрифт светлее в других браузерах, а затем использовал немного более толстый шрифт. Для меня нормализация веса шрифтов в браузерах закончилась так:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Answer 5

Попробуй это:

transform: translateZ(0.1px);

Браузеры Webkit на Mac по-разному сталкиваются с проблемой сглаживания 2d и 3d текстовых элементов. Присвоение свойства 3d элементу обычно решает проблему.

Answer 6

Правда в том, что решение этой проблемы (пока Apple не исправит это) очень простое. Создайте файл CSS (example.css) и вставьте его внутрь:

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

Затем перейдите в Safari> "Настройки"> "Дополнительно"> "Таблица стилей", щелкните его и выберите файл CSS, который мы только что создали. Перезапустите Safari.

TADA!! Задача решена. Теперь