Форум программистов, компьютерный форум, киберфорум
SlavAz
Войти
Регистрация
Восстановить пароль

Загадка качественного шрифта в web'е

Запись от SlavAz размещена 29.09.2012 в 11:47
Показов 1662 Комментарии 22

Вступление

Для кого-то данный материал может показаться очевидным и давно известным, для меня же это было маленькое открытие. Столкнувшись с задачей создания собственного шрифта под веб я решил докопаться до истины отображения шрифтов в браузере и вот что из этого вышло:


Интернеты говорят!

Почему некоторые шрифты при размерах меньше 20 пикселей выглядят ужасно в браузере? Этот вопрос волнует многих веб-дизайнеров. Особенно актуальным этот вопрос стал последнее время, когда типографика плотно влилась в web. В интернетах незнающие люди пишут, что все дело в сглаживании браузера, мол браузер решает (опираясь на настройки системы или нет, как IE) и все на этом. И эти мнения первые, которые попадаются. Я же считал, что дело в начертании шрифта, с некоторыми оговорками. Так ли это на самом деле?


Рассуждение

Конечно, качество рендеринга шрифта на прямую зависит от начертания букв. Но! Давайте взглянем на, всем известный, шрифт Arial и конкретно на букву "К"

К

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

А при маленьком: К
Название: K_pix.png
Просмотров: 699

Размер: 3.1 Кб

вдруг "К" становиться пиксельной, и сглаживание пропадает волшебным образом. Но взгляните на её начертание. Та изящная плавная буква "К" стала прямой, такие изгибы не могут так масштабироваться. Все это наталкивает на мысль, что есть какая-то "секретная" опция в самом шрифте.


Разоблачение

Так и есть! И эта чудо-опция называется хинтинг (hinting). Вот, что об этом говорит Википедия:

Хинтинг (хинтование) (англ. hinting, от hint «намёк, совет») — изменение контура шрифта при его растеризации при помощи специальных программных инструкций, заложенных в шрифтовой файл. Используется для обеспечения более чёткой формы букв на устройствах с низким разрешением экрана или при отображении текста в мелком кегле.
Ну а как пользоваться ей - совсем другая история. Будет интересно - напишу.
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 22
Комментарии
  1. Старый комментарий
    при помощи специальных программных инструкций, заложенных в шрифтовой файл
    интересно было бы узнать при помощи каких инструкций
    Запись от za5 размещена 29.09.2012 в 13:49 za5 вне форума
  2. Старый комментарий
    Аватар для SlavAz
    интересно было бы узнать при помощи каких инструкций
    Сейчас, как рас разбираюсь во всем этом. Тонкостей уйма, но результата стоит того. Будет резонанс - напишу и сюда.
    Запись от SlavAz размещена 29.09.2012 в 14:52 SlavAz вне форума
  3. Старый комментарий
    Аватар для Evg
    Цитата Сообщение от SlavAz
    Будет резонанс - напишу и сюда.
    Напиши, а то статья получается незаконченная
    Запись от Evg размещена 03.10.2012 в 09:01 Evg вне форума
  4. Старый комментарий
    Аватар для Илья Федин
    Ну а как пользоваться ей - совсем другая история. Будет интересно - напишу.
    Очень интересно как же сделать её плавненькой!
    А может есть шрифт в котором всё плавненькое???
    Запись от Илья Федин размещена 27.10.2012 в 18:23 Илья Федин вне форума
  5. Старый комментарий
    Аватар для programina
    Цитата Сообщение от za5
    при помощи каких инструкций
    Мне кажется они запатентованы и просто так не получится посмотреть инструкции.
    Запись от programina размещена 27.10.2012 в 22:57 programina вне форума
  6. Старый комментарий
    Аватар для SlavAz
    Мне кажется они запатентованы и просто так не получится посмотреть инструкции.
    Нет, на самом деле проблема в софте. Я нашол только одну вменяемую программу способную редактировать хинтинг. Но создавать в ней шрифт - мука. Собственно статья на подходе. Выкрою ещё пару часиков, доделаю и выложу.
    Запись от SlavAz размещена 28.10.2012 в 00:20 SlavAz вне форума
  7. Старый комментарий
    Аватар для Илья Федин
    SlavAz, так когда же статья выйдет?
    Запись от Илья Федин размещена 05.12.2012 в 00:35 Илья Федин вне форума
  8. Старый комментарий
    Аватар для Илья Федин
    А скоро эти пару часиков пройдут?
    Запись от Илья Федин размещена 02.01.2013 в 15:33 Илья Федин вне форума
  9. Старый комментарий
    Аватар для SlavAz
    Илья Федин, научись читать, что бы задавать правильные вопросы. Впрочем тебе этого никогда не узнать.
    Запись от SlavAz размещена 02.01.2013 в 20:52 SlavAz вне форума
  10. Старый комментарий
    Аватар для Илья Федин
    SlavAz, ???
    Запись от Илья Федин размещена 05.01.2013 в 17:35 Илья Федин вне форума
  11. Старый комментарий
    Аватар для Илья Федин
    Я жду
    Запись от Илья Федин размещена 12.01.2013 в 15:49 Илья Федин вне форума
  12. Старый комментарий
    Аватар для SlavAz
    А мне плевать на тебя. Брысь с моего блога.
    Запись от SlavAz размещена 12.01.2013 в 15:51 SlavAz вне форума
  13. Старый комментарий
    Нет, на самом деле проблема в софте. Я нашол только одну вменяемую программу способную редактировать хинтинг. Но создавать в ней шрифт - мука. Собственно статья на подходе. Выкрою ещё пару часиков, доделаю и выложу.
    а зачем тогда про пару часиков упоминать было
    Запись от za5 размещена 12.01.2013 в 15:58 za5 вне форума
  14. Старый комментарий
    Аватар для SlavAz
    а зачем тогда про пару часиков упоминать было
    глупый вопрос. Очевидно я ещё не выкроил пару часиков, чтобы закончить. Я же не писал, что через 2 часа выложу.
    Запись от SlavAz размещена 12.01.2013 в 15:59 SlavAz вне форума
  15. Старый комментарий
    ладно, напомним через год)
    Запись от za5 размещена 12.01.2013 в 16:09 za5 вне форума
  16. Старый комментарий
    Аватар для SlavAz
    ладно, напомним через год)
    О, можете не утруждать себя.
    Запись от SlavAz размещена 12.01.2013 в 16:14 SlavAz вне форума
  17. Старый комментарий
    Цитата Сообщение от SlavAz
    О, можете не утруждать себя.
    Ничего, выкрою 2 минуты.
    Запись от za5 размещена 12.01.2013 в 16:17 za5 вне форума
  18. Старый комментарий
    Интересная информация. Впервые сталкиваюсь. Надеюсь на продолжение.

    Кстати, бытует мнение, что нечетные значения шрифтов для кириллицы, к примеру 11, 13, 15 px смотрятся лучше, чем четные - может, имеет отношение к этим управляющим инструкциям и алгоритмам сглаживания? Или это просто миф?
    Запись от Taatshi размещена 12.01.2013 в 22:22 Taatshi вне форума
  19. Старый комментарий
    Аватар для SlavAz
    Кстати, бытует мнение, что нечетные значения шрифтов для кириллицы, к примеру 11, 13, 15 px смотрятся лучше, чем четные - может, имеет отношение к этим управляющим инструкциям и алгоритмам сглаживания? Или это просто миф?
    Миф. Все зависит от векторного начертания символа (вдруг канделябры всякие) ну и конечно же сам хинтинг.
    Запись от SlavAz размещена 12.01.2013 в 22:24 SlavAz вне форума
  20. Старый комментарий
    Аватар для Илья Федин
    Всё понятно, пойду тогда в поиск
    Запись от Илья Федин размещена 12.01.2013 в 23:29 Илья Федин вне форума
 
Новые блоги и статьи
Программа опроса у.з. расходомера SLS-720F
Argus19 02.09.2026
Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0.
Maks 31.08.2026
При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм
anaschu 30.08.2026
Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы.
russiannick 30.08.2026
Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .
мат медиц модель 30. презентация проекта
anaschu 27.08.2026
хоп хоп хоп хидахоп, а я кладую))
Как у меня протекала болезнь
zorxor 27.08.2026
Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .
Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему
kumehtar 26.08.2026
ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .
[EasyBuilder Pro] Памятка по разработке для панелей Weintek
ФедосеевПавел 26.08.2026
Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru