Отправка теневого текста Google Chrome

У Google Chrome есть очень неприятный недостаток в реализации текстовой тени CSS3. Сглаживание субпикселя отключается при применении теневой тени. Никакое количество -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 и т.д.).

Чтобы сделать вещи более ясными - мой вопрос состоит из двух целей:

  • Найдите техническое решение.
  • Сделайте Google исправление проблемы в Chrome.

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

Ответы

Ответ 1

@sebastian fix может не работать для старых версий Chrome.
Снимок экрана под Iron Browser (Chromium fork) v3.0.197.0:
                                                         
Все те, кому была назначена тень, выглядят одинаково, а -webkit-font-smoothing не имеет никакого эффекта, а также -webkit-text-stroke.

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

TL;DR: добавьте безобидный 0 0 0 transparent, перед другими тэгами.

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

Ответ 2

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

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

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

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

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

Ответ 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);