Пользователь
0,0
рейтинг
12 сентября 2009 в 22:36

Сглаживание шрифтов, анти-алиасинг, и субпиксельный рендеринг перевод

От переводчика: недавно у меня с товарищем был небольшой спор относительно того, как рендерит сайты Сафари. Мол, текст там выглядит гораздо «вкуснее» :) В попытках обрести истину (хотя все это безусловно дело вкуса) была найдена эта статья Джоэла Спольски, которая отчасти прояснила, почему все именно так. Не уверен точно, что пишу в тот блог, однако, статья (UPD. Которая, как оказалось, уже была переведена. По совету хабраюзеров не прячу в черновики, ибо многие не видели, да и оформление и перевод, как мне кажется, здесь лучше):

Мнения Apple и Microsoft всегда расходились в вопросе отображения шрифтов на экране компьютера. Сегодня обе компании используют субпиксельный рендеринг, чтобы добиться приемлемого отображения несглаженных шрифтов на низких разрешениях экрана. В чем они до сих пор имеют разногласия, так это в философии.
  • Apple верит, что алгоритм должен максимально сохранять дизайн начертания, даже если ради этого придется пожертвовать небольшим размытием.
  • Microsoft верит, что форма каждой буквы должна быть жестко вписанной в границы пикселя, чтобы избежать размытия и увеличить читаемость, даже если ради этого придется пожертвовать искажением начертания.
Поскольку Safari теперь доступен и для Windows, использование алгоритмов Apple привело к серьезным проблемам. Можно сравнить разницу в подходах на одном мониторе, вы увидите, что я имею ввиду. Я думаю, вы заметите разницу — шрифты Apple на самом деле нечеткие, с размытыми краями, но на маленьких размерах видно гораздо больше различий между различными начертаниями, потому что их отрисовка гораздо больше похожа на то, как должен выглядеть шрифт на самом деле, если использовать его с высоким разрешением.

(Примечание: Данная картинка будет отображаться правильно, если у вас LCD-монитор с порядком следования пикселей R-G-B.
Прим. переводчика:
1. Цитата из википедии: Отдельный пиксель на цветном LCD состоит из трех цветных элементов, которые (в разных дисплеях) следуют в порядке blue, green, and red (BGR), или red, green, and blue (RGB). Для человеческого глаза эти компоненты пикселей, иногда называемые субпикселями, имеют один цвет из-за оптического размытия и пространственной интеграции нервных ячеек. При желании можно разглядеть их при помощи увеличительного стекла.
2. Мониторов с B-G-R-порядком гораздо меньше, чем с RGB.

В противном случае она будут выглядеть по-другому и неверно.)


(Прим. переводчика: что-то случилось с моими графическими редакторами, поэтому комментарии на картинке предоставлю текстом, в порядке следования «сверху вниз»)
  1. разница между жирным и нежирным более незаметна, так будет на печати
  2. хорошо скругленный низ у «g»
  3. размытая «i»...
  4. … и «e»
  5. нежирный текст ярче, чем должен выглядеть на печати
  6. завитушка у «g» вписана в ровную линию
  7. «i» четкая
  8. полоска в середине «e» сдвинулась вверх
Разница берет начало из программ Apple для полиграфии и графического дизайна. Преимуществом алгоритма Apple является то, что вы можете подготовить страницу текста для публикации, и на экране увидите почти то же самое, что и при печати. Это особенно важно, когда вы прикидываете, насколько темным выглядит текст. Механизм Microsoft, жестко вписывающий шрифты в пиксели, означает, что они не возражают против тонких линий, которые избавляют от размытых краев, даже если из-за этого целый абзац текста будет выглядет светлей, чем на печати.

Преимущество метода Microsoft в том, что он лучше для тех, кто читает с экрана. Microsoft прагматично решила, что начертание шрифта это не святыня, а резкость текста для удобного чтения важней, чем дизайнерская задумка относительно его яркости. На самом деле, шрифты, выпущенные Microsoft (например, Georgia и Verdana) хороши на дисплее, но не ахти на печати.

Напротив, Apple, как обычно пошла по пути стиля, поставив искусство выше практичности, потому что у Стива Джобса есть вкус; в то же время, Microsoft избрала путь удобства, измеримый прагматичный путь создания вещей, которым абсолютно не хватает щегольства. Иными словами, если Apple это Target, то Microsoft — Wal-Mart (прим. переводчика: сети магазинов розничной торговли, подруга с экономическим образованием подсказала, что вполне уместным адаптированным сопоставлением было бы «Азбука вкуса» — «Перекресток»).

Теперь, что по поводу человеческих предпочтений. Вчерашний пост Джеффа Этвуда про сравнения двух шрифтовых технологий вызвал ожидаемые горячие споры: Apple-юзеры предпочитают систему Apple, Windows-юзеры предпочитают систему Microsoft. Это не просто обычный фэнбоизм; это отражение того факта, что когда вы просите неподготовленных людей выбрать конкретный стиль или дизайн, они предпочтут то, что им уже знакомо. И так во всем: до тех пор, пока они не будут точно знать, что им нужно, они будут выбирать то, что уже видели.

Очевидно поэтому инженеры Apple наверняка чувствуют, что делают огромную услугу Windows-сообществу, предоставляя «превосходную» технологию рендеринга шрифтов «язычникам»; это же объясняет, почему Windows-юзеры в основном думают, что шрифты в Safari размыты и выглядят странно, не знают почему, но им это не нравится. Они думают «Ого! Это что-то другое. Мне это не нравится. Хм, в чем же дело? Надо присмотреться… Ааа, шрифт какой-то нечеткий. Наверно поэтому.»
Перевод: Joel Spolsky
Максим @waitekk
карма
168,3
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (94)

  • +3
    статья старая, скажите разве сейчас Safari не использует родной для Windows рендеринг?
    • 0
      * в версии для Windows, конечно
    • +4
      Вроде настраивается через выпадающее меню в конфиге.
    • +5
      В версии под Windows можно выбирать, какой рендеринг использовать — из Windows или от Apple. Кстати, удобно сравнивать :-)
      • 0
        Выбирать-то можно, но нет в жизни счастья…

        Для заголовков я бы выбрал сглаживание от Apple.
        Для обычных абзацев — сглаживание от Microsoft.

        В общем, мне бы хотелось способ сглаживания, объединяющий достоинства и нивелирующий недостатки обоих подходов. Гибко настраиваемый для различных шрифтов, различных размеров одного и того же шрифта, для различных начертаний (жирных, наклонных), вариантов масштабирования, даже для отдельных программ.

        И чтобы где-то можно было скачать настройки этого гибкого алгоритма «от лучших шрифтоводов» с хорошим вкусом и глубоким пониманием юзабилити. Чтобы не нужно было несколько лет ждать новую операционку, чтобы убедиться, что и в ней сглаживание слишком далеко от идеала, поскольку мониторостроение шагает быстрее разработки ОС, и шагает не в ногу — много разных технологий отображения присутствуют на рынке одновременно.
        • 0
          Вам пора уже написать в майкрософт и эпл письма, где в ультимативной форме выразить свои требования и пригрозить больше не пользоваться их продуктами, до реализации оных ^_^
          • +1
            И где ж вы углядели в мягком «мне бы хотелось» резкий ультиматум? В чужом доме ультиматом не выражаюсь :)

            К тому же все разумные люди рано или поздно приходят к тем же выводам, что и я несколько лет назад (шутю я так, шутю). Я верю в разумность обеих корпораций, прогресс, закон Мура, теорию Дарвина, заботу о ближнем и в торжество справедливости (да, вот такой я наивный) :)
        • +6
          Пример из файла /etc/fonts/local.conf (fontconfig, linux).
                  <match target="font">
                          <edit name="hinting" mode="assign">
                                  <bool>true</bool>
                          </edit>
                          <edit name="hintstyle" mode="assign">
                                  <const>hintmedium</const>
                          </edit>
                          <edit name="autohint" mode="assign">
                                  <bool>false</bool>
                          </edit>
                  </match>
                  <match target="font">
                          <test name="weight" compare="more">
                                  <const>medium</const>
                          </test>
                          <edit name="hintstyle" mode="assign">
                                  <const>hintslight</const>
                          </edit>
                  </match>
                  <match target="font">
                          <edit name="antialias" mode="assign">
                                  <bool>true</bool>
                          </edit>
                  </match>
                  <match target="font">
                          <test qual="any" name="family" compare="eq">
                                  <string>Verdana</string>
                          </test>
                          <test qual="any" name="pixelsize" compare="more">
                                  <double>8</double>
                          </test>
                          <edit name="antialias" mode="assign">
                                  <bool>false</bool>
                          </edit>
                  </match>
          

          Пояснение:
          По умолчанию, устанавливается хинтинг hintmedium, чуть более сглажено, чем это делается в решении от Microsoft.
          Для всех жирных начертаний устанавливается хинтинг hintslight, примерно как у Apple.
          А для шрифтов Verdana, размер которых больше 8 пикселов, сглаживание отключается полностью.

          При желании можно хоть для каждой гарнитуры в разном начертании и размере установить свои настройки хинтинга от hintnone до hintfull.
          • 0
            А зачем автохинтинг намеренно отключать?
            • 0
              Ну, лично мне, просто не нравится как он работает в общем случае.
  • +1
    а, кстати, на хабре давным давно что-то подобное было. жаль, что всё хорошее тонет на хабре во времени
    • +2
      • +1
        вот ведь. ну, значит прячу в черновики
        • 0
          ЗАчем, давно же было. Многие и не видели. ПРосто добавь upd к топику, чтоб «олдфаги» не минусовали.
  • 0
    А как обстоит дело с рендрингом шрифтов в Linux?
    • –1
      довольно неплохо, насколько я знаю :) хотя это зависит от самого шрифта
    • 0
      В фаерфоксе очень четкие, в хроме более размытые.
      Мое мнение — на экране шрифты должны быть более четкие, на печати более правильные. От размытых шрифтов больше устают глаза. А «правильность» — это ерунда, все равно при таком разрешении в серьез говорить про правильное отображение не приходится.
      • +3
        В chrome вообще полутона, на сколько я помню.
В gnome можно выбрать сглаживание на свой вкус, я предпочитаю максимальное уточнение, не смотря на «кернинг пиздец».
        • +1
          А ещё можно включить автохинтинг для пущего счастья.
          • 0
            Подкажите, где его можно включить?
            • 0
              В убунте:

              sudo ln -sf /etc/fonts/conf.avail/10-autohint.conf /etc/fonts/conf.d/
        • 0
          Увы, 404 :(
          Не могли бы выложить на другой картинко-хостинг?
      • +1
        Когда мне случается загрузить Windows на своём компе, постоянно напрягают замыленные шрифты после Линукса. По этой статье выходит, что Apple всё ещё хуже.
    • +2
      в SuSE 11.1 хорошо, даже отлично но на шрифтах с винды. Родные шрифты не очень
    • +1
      В Убунте 9.04 — великолепно, прямо как на Маках ;) Но надо включить Subpixel rendering и установить msttcorefonts, Tahoma, Helvetica и для полного счастья каких-нибудь Lucida Grande и Monaco.
      • 0
        В убунте с субпиксельным сглаживанием и полным уточнением действительно выглядит великолепно, очень гладко и четко, а не размыто и толсто как на маках, без цветного ореола как в винде с клеартайпом.
        • 0
          ОупенТайп, если не ошибаюсь, можно и к виндам прикрутить.
          • 0
            offset.skew.org/wiki/User:Mjb/GDI%2B%2B
            можно, но через… потом у контролов жеско заданы размеры, при изменении шрифтов может выйти очень некрасиво.
    • +1
      В то же время, отключив сглаживание и установив всё те же msttcorefonts, Tahoma, Helvetica, можно получить эффект идентичный Win95—XP.
    • 0
      В Linux каждый настраивает так, как ему больше нравится. Но иногда эти операции очень нетривиальны (пересборка некоторых компонентов системы) и требуют глубокого понимания сути вопроса.
    • 0
      Общий механизм как у Apple.
    • 0
      Настроить можно как угодно, все равно выглядит плохо. Зато есть приятный сериф (которые в размазанном виде выглядят лучше,22 чем с хинтингом), Deja Vu Serif вроде.
  • 0
    Free Image Hosting at www.ImageShack.us

    Виста, Опера 10 и Сафари 4. Разницы не вижу, видимо это верно только для старых версий браузеров.
    • 0
      Полазил в настройках Сафари, выставил «Наилучшее для CRT» (лучше всего читать мелкий шрифт).

      Free Image Hosting at www.ImageShack.us

      Разница действительно есть, но не критичная.
      • +1
        Ну, чтобы окончательно добить:

        Free Image Hosting at www.ImageShack.us

        font: bold/normal/italic 12pt Arial
        • +1
          «Наилучшее для CRT» не использует субпиксельный антиалиасинг (что впрочем логично, судя по названию) — это можно проверить, если посмотреть эту картинку при увеличении
      • 0
        Рендеринг Safari мне нравится больше. Он как-то теплее, что ли.
        • +3
          Теплый, ламповый звук рендеринг =)
          • 0
            Ага, типа того. У самого в убунте почти так шрифты выглядят. А на скрине виндовые шрифты выглядят (на моём мониторе) какого-то синего оттенка, потому и кажутся холодными. Ну и формы в целом порезче чем в Safari.
    • 0
      да, видимо так.
  • +11
    что вполне уместным адаптированным сопоставлением было бы «Азбука вкуса» — «Перекресток»
    Для жителей не-дефаулт-сити эти названия тоже ничего не говорят.
    • +1
      Можно написать «Пятёрочка» :)
      • 0
        как просто магазин и магазин самообслуживания.
  • +5
    инженеры Apple наверняка чувствуют, что делают огромную услугу Windows-сообществу
    Уверен, именно это они и чувствовали :) Но вот вопрос, нужно ли это Windows-сообществу. Как мы видим теперь, даже они признали, что нет. В чужой монастырь со своим уставом не ходят.
  • +1
    Одной из причин перехода на mac os у меня было как раз сглаживание шрифтов на экране.
    Лично меня как-то резкие шрифты windows на экране только напрягают читать…
  • +1
    О «вписывании в пикселы» шрифтов говорилось, когда в Виндоус не было ClearType-сглаживания (ну или оно было отключено, как в XP). А то что сейчас в Висте и Виндоус 7 — это шрифт вписанный в пикселы и размытый по краям. Т.е. и не передающий форму букв и размытый.
    • 0
      Зависит от монитора на самом деле. Почти всегда Клиртайп можно настроить так, что с ним в итоге лучше.
      Ну и субпиксельное сглаживание позволяет позиционировать надписи с шагом 1/256-я пиксела.
      • 0
        Если можно настроить. Согласитесь, мало кто будет ставить дополнительный софт для этих целей в Виндоус (да и на Маке).

        Кстати, возможностей настройщика сглаживния в GNOME тоже, похоже, не хватает, чтобы привести Клиртайп в гармонию с монитором, во всяком случае я остановился на субпиксельном.
        • 0
          В Windows7 настройщий cleartype встроен прямо в систему и очень быстро обнаруживается в control panel.
          • 0
            Я его и имел ввиду, когда говорил о размытых буквах (имеющих радужный ореол) предварительно вписанных в пикселы. Статья очень стара и сейчас уже не совсем актуальна.
            • 0
              Я имел в виду не «настоящий», а «настройщик» :) тот, что для xp приходилось скачивать
  • +2
    В обоих осях не помешал бы выбор режима сглаживания.

    Есть такая штука — GDI++ (к сожалению, сейчас ее разработку забросили). Служит для того, чтобы включить эпловский рендеринг шрифтов в винде (висты и x64 поддерживаются) (работает в FF, Опере, Ворде, Notepad++ и многих других приложениях).
    Достаточно распаковать и запустить gditray.exe.

    Брать отсюда: www.sendspace.com/file/ugit9x (статья целиком: reader.feedshow.com/show_items-feed=564adcd671df3df6e0af4f39972ff59a)
    • 0
      GDI++ это все наше. Использую уже 2 года и мои глаза мне благодарны — работать с текстом, писать код — одно удовольствие! Я пришел к нему, как попробовал сглаживание шрифтов в Сафари и озадачился сглаживанием во всей системе.

      Насчет поддержки. Оно до сих пор поддерживается, но не автором. Не все сборки одинаково хороши, для windows 7 хороша 8.1.2008.0808
      • +1
        Сорри, подсчитал — 1 год пользуюсь.
      • 0
        А можете залить куда-нибудь эту версию, или подскажите где скачать. А то поиск выдаёт только японские сайты.
  • 0
    а еще в 2009 году макось не умеет менять размер шрифта глобально, космические технологии же
    • 0
      Ты что?! Хочешь оставить программистов Яблока без работы? В следующей версии Мак ОС это будет преподноситься КАК ФИЧА!!!
      • 0
        29.99 или 99 за 5 компов!
    • +2
      А что это значит?
      • 0
        это значит, что я не могу как в винде поставить галочку «шрифты 120%», потому что на 13" экране все мелкое до безобразия. Приходится еще ставить какие-то левые программы для этого, и то не везде поменяется.
        • –2
          Ясно. Видимо, отсутствует по той простой причине, что в Windows при «шрифтах 120%» UI layout-ы начинают разваливаться: то текст перестаёт влезать, то картинки съезжают и т.п. Не думаю, что подобное когда либо будет в Mac OS X.
          • 0
            в 7 проблема только в картинках, и очень старых приложениях, все остальное просто замечательно работает. И даже так, я бы хотел иметь выбор
    • 0
      В макос есть resolution independent UI еще с тигры, вот только недоделнный и криво работающий.
  • +1
    А что удивительно в реакции Windows-пользователей, если в браузере с трудом отличишь полужирную надпись от обычной, например, подзаголовок от короткого абзаца — конечно прагматизм побеждает. Привычки тут играют не такую ведущую роль.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    нежирный текст ярче, чем должен выглядеть на печати
    Мне кажется lighter здесь используется в значении легче (тоньше), а не ярче, так как по-моему микрософтовская надпись не ярче нифига :)
  • –1
    Самый прикол в том что сейчас постепенно все экраны имеют все больше DPI и то как рисует Apple становится предпочтительнее :)
  • 0
    Работаю уже год в основном под MacOS и… да, как же меня, чёрт возьми, раздражают эти полу-жирные «сглаженные» буковки!!! Моё любимое сочетание {font:14px «Trebuchet MS» 180%;}, которое так замечательно выглядело в Windows, на Маках смотрится не просто отвратительно – ужасно! Если я хочу что-то напечатать — у меня есть Print Preview, я же не издаю книги на домашнем Маке каждый день, чёрт возьми! Мак давно перестал быть машинкой «только для дизайнеров», в конце концов.

    Господи, дай же уже Стиву хоть капельку мозгов и прагматичности, хотя бы здесь…
    В Microsoft, хотя бы, сделали tool для настройки сглаживания, а тут даже настроить ничего нельзя. Блин, даже хака системного нет никакого! Тьфу.

    И вот так весь год… плююсь, ругаюсь, а сидеть приходится…
    • 0
      defaults -currentHost write -globalDomain AppleFontSmoothing -int 2
      Поиграйтесь со значениями, может быть что-то понравится, в барсе работает, на леопарде не пробовал.
      • 0
        О, спасибо, мил человек. А дефолтное значение какое? На всякий случай
        • 0
          Да хз =) просто в Барсе свели настройку сглаживания до двух состояний — вкл/выкл, вот и приходится вертеться, если захочется по умолчанию сделать — то просто отмечаешь еще раз галочку и все. Но особо надеяться не стоит, шрифты как были размытыми, так и останутся.
  • 0
    Действительно, кто к чему привык, мне сглаживание в сафари не нравится очень сильно, выглядит просто ужасно размыто, читать неудобно. Кстати, видел недавно, что можно вместо clearType поставить маковское сглаживание во всей системе на винде — кому интересно погуглите
  • 0
    Все закономерно. Apple ориентируется на пользователей с дорогими и качественными мониторами, MS — на любое железо. Поэтому на среднем офисном мониторе за $150 мелкие шрифты без антиальясинаг смотрятся вполне нормально, а с антиальясингом убиают глаза в два счета.
    • 0
      Что за ложь, я всегда вклюючал сглаживание, без него у букв края аж светятся от контраста. И даже на отвратительном экране ноутбука сглаженный шрифт лучше смотрится.
      • 0
        >И даже на отвратительном экране ноутбука
        юноша, даже на дешевых ноутбуках не самые плохие мониторы. Самые плохие — ЭЛТ. Если брать дешевый ряд, буквы там размыты без всякого антиальясинга. А с антиальясингом там просто жопа.
        • 0
          Сами вы юноша. Отвратительный экран дешевого ноутбука перед моими глазами, стоит повернуть голову, чтобы он ушел либо в белый цвет, либо наоборот потемнел. Про цветопередачу я вообще молчу, такие цвета я не видел даже в кошмарных снах. После нормальной матрицы PVA смотреть на этот ужас даже неприятно.

          А ЭЛТ хотя бы (если он не прожжен насквозь) обеспечивает нормальную контрастность и цветопередачу, даже самые плохие. Хотя глазам, по субъективным ощущениям, с LCD как то легче. Может устает от высокой яркости, или мерцает что-то, не знаю. А то, что там пиксел размывается, имхо, особо не важно, т к реальные буквы все равно не квадратной формы, ничего страшного.
          • 0
            Видите ли юноша, политика о котороцй здесь говорится закладывалась, когда вам было 8 лет и вы писались в кровать. В массовом ходу тогда были только ЭЛТ. Служили они подолгу и качеством были отвратительным. Но даже если в вашем колледже сохранились старые мониторы подойдите к ним посмотрите как размываются буквы на ЭЛТ. Я это наблюдаю каждый день.
        • 0
          И кстати, у меня был насквозь убитый 15" ЭЛТ-монитор — все равно я там включал антиалиасинг, вроде как -то аккуратнее.
  • –1
    MS, Apple… Есть еще Adobe со своим видением антиалиасинга.
    Поэтому если готовить макет в Photoshop или Illustrator, то мелкие надписи будут похожи на рендеринг браузеров в Win, а более крупные хрен подберешь :( Похоже да не то же, и это заметно, особенно если в макет скриншотишь какие-то части.

    Нет ли какого плагина рендерящего похоже на требуемый браузер.
  • 0
    Думаю что все дело привычки!

    Меня лично жутко бесили первое время шрифты в Mac OS X. Потом привык. Потом включил в Windows'е ClearType (хотя раньше сглаживание не нравилось). А сейчас шрифты без сглаживания, глазом воспринимаются чужеродно. И больше нравится как выглядит в Mac OS X.
  • +1
    А еще в продолжение, всем интересующемся: www.antigrain.com/research/font_rasterization/index.html
    • 0
      Вот что, кстати, было бы здорово перевести.
      • 0
        я бы с удовольствием, но не раньше октября, пожалуй
        • 0
          Таки перевёл. Оставлю ссылку для интересующихся: habrahabr.ru/post/112401/
  • +1
    А Gnome предлагает пользователю настроить под себя, однако настройки по умолчанию вполне ничего.
    P.S. Люто, бешено ненавижу острые и угловатые шрифты Windows XP без Cleartype.
  • 0
    В сафари прикольно и как-то тепло смотритя шрифт типа Таймс Нью Роман, а вот sans-serif шрифты, ообьенно небольшого размера, честно говоря выглядят фигово и размазанно.
  • 0
    Рендеринг — дело привычки. Сначала жирные шрифты Safari казались слишком уж жирными. Но потом вдруг как-то стало удобно и красивенько. Зато после этого шрифты Windows казались проволочными и несерьезными. Субъективно маковский текст читается проще и меньше напрягает глаз.
  • 0
    Как-то забыли все про то, что выбор алгоритма сглаживания зависит ещё и от монитора, его качества настроек. Например, белая точка визуально больше размывается при большей яркости, даже на ЖК. На ЭЛТ минимальный размер шрифта, при котором сглаживание оправдано, существенно больше, чем на ЖК. Кроме того, на разных типах матриц ЖК должно быть немножко разное смешивание цветов, что тоже в теории должно влиять на субпиксельное сглаживание. А на ЭЛТ на высоких разрешениях сглаживание скорее вредно, чем бесполезно.

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