🔤 Почему буквы, которые вы читаете прямо сейчас — это код, и причём здесь кривые
В любом тексте на экране мы видим буквы. Но что видит компьютер? Как появились современные шрифты и почему буквы — это на самом деле код?
До 1980-х годов компьютерные шрифты были наборами картинок. Каждой букве соответствовал битмап — пиксельная картинка определённого размера. Нужно десять размеров букв? Держи десять файлов. Такая система была тяжёлой и плохо масштабируемой.
Революция началась с векторных шрифтов. В них каждая буква — не изображение, а инструкция, как её построить. А контуры символов описываются кривыми — чаще всего квадратичными или кубическими кривыми Безье. Прорывом стал и формат TrueType, появившийся в 1991 году: там каждая линия в букве задаётся квадратичной кривой Безье. Это всего три точки: начальная, конечная и одна управляющая. Этого достаточно, чтобы задать элегантную плавную форму.
Благодаря такому подходу буквы легко масштабируются, компактно хранятся и выглядят чётко на экранах разных размеров — от часов до 8K-мониторов.
🖥 Как буквы становятся пикселями
Компьютерный экран — сетка пикселей, и чтобы отобразить векторную букву, нужно превратить кривые в пиксели. Этот процесс называется растеризацией. Работает он так:
➡️Контур буквы задаётся кривыми Безье. Как на гифке к посту.
➡️Для каждого пикселя выясняется, где он находится: внутри буквы или снаружи.
➡️Алгоритм проводит через пиксель горизонтальную линию и считает, сколько раз она пересекает контур. Нечётное число — пиксель закрашивается. Чётное — остаётся фоном. Получается буква!
Благодаря кривым Безье шрифты адаптируются к контексту: это не просто форма, а гибкий алгоритм. И всё ради того, чтобы буквы выглядели идеально на любом экране (а дизайнеры спорили, какой шрифт лучше). А в честь Пьера Безье, кстати, до сих пор называют шрифты и даже дизайнерские компании 🤩
#как_устроено
В любом тексте на экране мы видим буквы. Но что видит компьютер? Как появились современные шрифты и почему буквы — это на самом деле код?
До 1980-х годов компьютерные шрифты были наборами картинок. Каждой букве соответствовал битмап — пиксельная картинка определённого размера. Нужно десять размеров букв? Держи десять файлов. Такая система была тяжёлой и плохо масштабируемой.
Революция началась с векторных шрифтов. В них каждая буква — не изображение, а инструкция, как её построить. А контуры символов описываются кривыми — чаще всего квадратичными или кубическими кривыми Безье. Прорывом стал и формат TrueType, появившийся в 1991 году: там каждая линия в букве задаётся квадратичной кривой Безье. Это всего три точки: начальная, конечная и одна управляющая. Этого достаточно, чтобы задать элегантную плавную форму.
Благодаря такому подходу буквы легко масштабируются, компактно хранятся и выглядят чётко на экранах разных размеров — от часов до 8K-мониторов.
🖥 Как буквы становятся пикселями
Компьютерный экран — сетка пикселей, и чтобы отобразить векторную букву, нужно превратить кривые в пиксели. Этот процесс называется растеризацией. Работает он так:
➡️Контур буквы задаётся кривыми Безье. Как на гифке к посту.
➡️Для каждого пикселя выясняется, где он находится: внутри буквы или снаружи.
➡️Алгоритм проводит через пиксель горизонтальную линию и считает, сколько раз она пересекает контур. Нечётное число — пиксель закрашивается. Чётное — остаётся фоном. Получается буква!
Благодаря кривым Безье шрифты адаптируются к контексту: это не просто форма, а гибкий алгоритм. И всё ради того, чтобы буквы выглядели идеально на любом экране (а дизайнеры спорили, какой шрифт лучше). А в честь Пьера Безье, кстати, до сих пор называют шрифты и даже дизайнерские компании 🤩
#как_устроено