Тень рендеринга текста в Google Chrome

Question

Google Chrome имеет чрезвычайно неприятный дефект в реализации CSS3 text-shadow.Субпиксельное сглаживание отключается при применении тени текста.Никакое количество -webkit-font-smoothing не убедит его в обратном.Грубый сглаживание альфа-канала приводит к смешиванию теней с буквами, и это вместе с пиксельным текстом в итоге создает очень уродливый видЭто становится еще более очевидным, если используются шрифты для рукописного ввода, такие как Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130

Одно из мест, где вы можете четко это увидеть, находится в Twitter - http://dev.twitter.com/pages/auth. Текстовая тень используется длятам есть текстовый контур: посмотрите страницу в Chrome, сравните с FF или IE, вы увидите, насколько она плоха.

Эффект становится еще хуже с уменьшенным текстом, пока он не станет полностью нечитаемым.Техническое обсуждение проблемы доступно здесь: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

В проекте Chromium имеется ошибка (выпуск 23440).Эта ошибка существует более года и до сих пор никому не назначена.Разработчики Google увидели это, решили, что это не так важно, и оставили это стареть.Оказывается, они исправляют только «популярные» ошибки, настолько отстойная практика, что выглядит впечатляюще!Я очень разочарован Chrome!Каждый день все больше и больше людей используют веб-типографику и CSS3, чтобы сделать Интернет намного красивее!Обидно, что такая проблема существует, чтобы замедлить это.

Итак, общественные усилия необходимы, чтобы исправить это.Расскажите об этом другим, пишите в своих блогах.Вы можете перейти на http://code.google.com/p/chromium/issues/detail?id=23440 и проголосовать за вопрос.Вы можете сделать это, нажав на звездочку, расположенную в верхней левой части страницы (требуется определенный тип учетной записи Google - gmail и т. Д.).

Чтобы было яснее, у моего вопроса две цели:

1. Найдите технический обходной путь.
2. Заставьте Google исправить проблему в Chrome.

Я буду голосовать за каждую ссылку, опубликованную в статье о проблеме, и отмечать ее как принятую.лучшее техническое решение или общественные усилия.

Answer 1

@ sebastian's fix может не работать для старых версий Chrome.
Снимок экрана: Железный браузер (Chromium fork) v3.0.197.0:

Все те, кому была назначена тень, выглядят одинаково, и -webkit-font-smoothing не имеет никакого эффекта, также как и -webkit-text-stroke.

Вместо этого я экспериментировал, пока не придумал это исправление: http://jsbin.com/acalu4

tldr: добавьте безобидный 0 0 0 transparent, перед вашими другими тенями.

Известные проблемы: некоторые браузеры могут обрабатывать только 1 text-shadow. Чтобы не повлиять на них (убить их единственные тени), это должно быть применено через JavaScript только к Chrome.

Answer 2

первая часть (технический обходной путь): добавление текста тонким штрихом.

попробуйте этот CSS, возможно, вам придется настроить значения, чтобы получить желаемый эффект.

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

только веб-браузеры (Chrome, Safari) читают его, поэтому это не повлияет на FF или IE.

Воспроизведите пример здесь: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

Answer 3

Я нашел решение для этого. Кажется, он работает в Safari 4+, Chrome (протестирован на 8.0x) и Firefox 3.5.

Попробуйте:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
             0px 1px rgba(0,0,0,0.75), 
             1px 0px rgba(0,0,0,0.75), 
             0px 0px rgba(0,0,0,0.75);