Сглаживание веб-шрифта при помощи CSS3

http://dribbble.com/shots/186801-Smoothing-webfont-using-CSS3
  • Перевод
7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.

[демонстрационная иллюстрация]

Посмотреть этот фокус.


Примечания переводчика:

  • Речь в этой блогозаписи Mathieu Avons ведёт про известный эффект, связанный с недостаточной сглаженностью шрифтов в Windows XP: «почти вертикальные» линии в них выглядят достаточно гладко (особенно когда в дело вступает ClearType), а вот «почти горизонтальные» состоят из заметных ступенек, вызываемых резкими (несглаженными) однопиксельными рывками линии контура, совершаемыми в вертикальном направлении. Оказывается, эту проблему можно преодолеть!
     
  • Я был очень глубоко удивлён, заметив необычайно действенную силу наблюдаемого эффекта от тени. Изменяется далеко не только гладкость контура букв. Также на ≈1 пиксель изменяется и расстояние между некоторыми буквами, и положение некоторых букв в слове, и даже ширина некоторых букв. Контуры некоторых более мелких букв (в надписи «EA AT E3 2011») начинают выглядеть существенно тоньше.
     
  • По двухкадровой анимации, которую Mathieu Avons прикладывает к своей блогозаписи для наблюдения разницы между шрифтом с тенью и без тени, также можно видеть эти эффекты. Буквы не только превосходно сглаживаются, но и прыгают туда-сюда, меняя ширину и толщину (а курсивные, кажется, ещё и наклон). Они шевелятся! Воистину преудивительно, что всё это достигается несколькими простейшими строчками на языке CSS3:
     
    h1.title {
       text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /* наверх и влево */
       1px 1px 1px rgba(255,255,255,0.2), /* вниз и вправо */
       1px 1px 1px rgba(0,0,0,0.7); /* тёмная тень */
    } 
     
  • Следует заметить, впрочем, что по ссылке «посмотреть этот фокус» происходит переход на пáру скриншотов, подменяющих один другого при наведении мыши, а не на реальный кусок кода сайта EA Games с настоящими текстовыми заголовками. Чтобы живьём наблюдать эффект, придётся, наверное, вооружиться Stylish да отыскать в сети подходящую «жертву» — сайт с заголовками, набранными «аршинными» по размеру буквами.
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 30
  • +2
    Немного мыльно, но в целом отлично.
    • +1
      Обнаружил этот эффект два года назад. Да и неким чудом не считал.
      Интересно, уже запатентовали?
      • +11
        Остаётся лишь сожалеть о том, что два года назад Вас не было на Хабрахабре, что лишило меня и некоторых других читателей удовольствия познакомиться с обнаруженным эффектом на два года ранее.
        • +6
          Сайт я верстал и методом, вынесенным из полиграфии решил свою проблему.
          Я даже не догадался бы даже публиковать. Ибо сравнимо с чудесным открытием эффекта скругления углов на иконках.
          • +2
            Как минимум семеро читателей, а вероятно, и более уже знакомы с этим методом.
            Потому согласен с Urvin.
        • +1
          Мелочь, но приятно.
          • +3
            В Chrome в Windows XP сглаживание мелкого текста менялось, если добавить прозрачность шрифту, буквально:
            opacity: 0.9999;

            Такой приём использовался в Маркете приложений под google chrome. При правильном подборе размеров и гарнитуры можно было получить допольно красивый текст.
            • +2
              Метод с text-shadow тормозит на страницах, где много текста, да и не чень компактен + нужно задавать конкретные цвета.
              Я нашел другой способ:
              -webkit-text-stroke: 0.35px
              • 0
                Не работает в Firefox, очевидно.
                • 0
                  Впрочем, я начинаю мрачно подозревать, что и Mathieu Avons не довелось обнаружить эффект, работающий в Firefox.
              • +2
                Сглаживание шрифта != размытие!!! Верните мне глаза
                • +2
                  Наверное, подобное сглаживание, точнее его отсутствие — одна из тех вещей, что остались со времен Windows 3.
                  • +4
                    Это решение самый натуральный костыль, подойдет скорее для больших заголовков и не всегда работает хорошо.

                    Пока в Windows не исправят проблему с хинтингом на уровне системы — ничего не изменится.
                    • +4
                      Microsoft ужé ничего и никогда не изменит в Windows XP.

                      Я скорее надеялся бы на то, что в браузеры станут внедрять собственную полисистемную инфраструктуру для единообразного и улучшенного отображения текста.
                      • +1
                        Зачем браузерам это делать? Во-первых, это большие затраты с нулевым выхлопом, во-вторых, текст будет выглядеть не так как везде в ОС. Единственный браузер, который имел такую систему: Safari под Windows.
                        • 0
                          > Единственный браузер, который имел такую систему: Safari под Windows.
                          который жутко тормозил (моё субъективное наблюдение, последние версии вроде пошустрее)
                    • 0
                      Ещё раз, gdipp
                      • 0
                        оно работает далеко не везде. Выглядит еще хуже, когда у меню одно сглаживание, а у шрифтов на сайтах другое, а часть программ вообще падает(
                    • +1
                      Такой костыль я видел в блогах маководов несколько лет назад. Кажется даже на хабре была ветка комментариев по поводу уместности такого приема, мол не надо нам ваше мыло на нашем клеартайпе.
                      • 0
                        А Вы не знаете как на QML достичь сглаженности у скругленных углов?) (Прошу прощения за слово «скругленные», использовал для избежания тавтологии)
                        • 0
                          Как я понимаю этот метод работает только с включенным ClearType? ибо я у себя этот эффект не обнаружил.

                          (Скрин из FF 16, но Chrome 22 и Opera 12 дают весьма похожие результаты)
                          И, к слову в новом сайте Е3 этот эффект не используется (специально файербагом просмотрел)

                          В чём подвох?
                          • 0
                            Может этот комент ответит на ваш вопрос: habrahabr.ru/post/154465/#comment_5263649
                            • 0
                              chrome 22.0.1229.94 m


                              ff 16.0.1


                              opera 12.02


                              ie 8.0.6001.18702


                              Так, к слову, в ie всё не так уж и плохо, в отличае от других браузеров
                            • 0
                              Похоже, Файерфоксу поможет только однопиксельное размытие или что-то в этом же роде.

                              На сайте E3 этот эффект не используется, потому что, как я понял, Mathieu Avons ограничился критикою сайта E3 в своём блоге (с точки зрения читателя сайта) и изложил возможный путь решения проблемы, но не отсылал свой рецепт в E3 и не добивался его принятия.
                            • 0
                              Здесь костыль, там костыль.
                              Хотя в последнее время количество инноваций от хрома заставляет верить, что ну ещё через пару лет и мы с радостью забудем про такие трюки.
                              • 0
                                Статья хорошая, но… кого-то и вправду еще волнует, как будут выглядеть шрифты в XP, поддержка которой заканчивается в 2014, да и то по недоразумению?

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.