Приветствую всех! Меня зовут Семичев Олег, и на этой неделе я буду вашим проводником в мир веб в контексте работы с шрифтами и текстом, расскажу вам, с какими проблемами вы можете столкнуться и как их решить. В сегодняшнем видео вы узнаете о том, что такое шрифт, чем отличается шрифт из реальной жизни и компьютерный шрифт, а также познакомитесь с несколькими понятиями, которые помогут нам в будущем. Поехали! Что же такое шрифт? «Википедия» нам подсказывает, что шрифт — это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. Данное определение справедливо для типографики. Что же важно для нас? А для нас важно, что компьютерный шрифт — не более чем файл, который содержит в себе набор символов и соответствующих им кодов. Символы же сами по себе могут быть различными по назначению. Это могут быть языковые знаки, цифровые символы, графические либо специальные. Но шрифт, как и любая другая технология, не стоит на месте, и с чего-то все начиналось. Так вот, самым главным различием между старыми и новыми шрифтами является характеристика их вывода, а именно: изначально были растровые шрифты, затем появились векторные. Поговорим о растровых шрифтах. Данные шрифты были распространены в эпоху матричных принтеров и экранов с очень маленьким разрешением и представляли собой просто набор растровых изображений каждого символа в виде битмапа. То есть такие картинки с черными и белыми пикселями, которые вырисовывали символ. Самый наглядный пример — это игры, особенно старые. На скриншоте видно, что в данной игре символы шрифта состоят из белых пикселей, и это очень хорошо заметно. Но сейчас эпоха векторных шрифтов. Вообще, векторная графика основана на математических формулах геометрических объектов. То есть всё в векторной графике описывается математикой. То же самое применяется и к шрифтам. Современные шрифты описывают символы с помощью этих самых формул, математических формул, которые позволяют их масштабировать без какой-либо потери качества, как и любое, в принципе, другое векторное изображение. Хочу задать вам вопрос: сделана ли данная презентация с использованием векторного шрифта? Вообще, дам подсказку — презентация сделана в браузере. В современных браузерах используются векторные шрифты. Поэтому ответ: да. И как вы видите, после масштабирования не появилось никаких пикселей, никаких зазубрин и ничего, что выдавало бы этот шрифт как растровый. Вообще, шрифты — это обширная тема, и рассматривать ее можно со многих сторон. Но я возьму себе в помощь определение гарнитуры шрифта из типографики. Данное определение выглядит так. Из всего этого определения для нас в контексте веба очень важны три параметра: размер, начертание и плотность, наличие или отсутствие засечек на концах линий, пропорциям символов. Прежде чем мы перейдем к каждому из этих пунктов, я бы хотел вам рассказать о некоторых понятиях из типографики. Назовем это «Анатомия шрифта для чайников». Первое важное понятие — базовая линия. Это такая воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учета свисаний и нижних выносных элементов, таких как у буквы g в английском алфавите или у буквы «у» в русском алфавите. Следующими двумя важными понятиями являются высота прописных знаков и высота строчных знаков. Первое — это расстояние от базовой линии до верхней линии прописных, а второе — от базовой линии до верхней линии строчных, то есть это просто высота маленьких и заглавных букв. Следующим понятием является интерлиньяж, или межстрочный интервал. Это просто расстояние между двумя базовыми линиями двух строк. В вебе данный термин чаще всего называют высотой строки. Так мы и будем ее называть далее. И, пожалуй, самое важное понятие — это кегельная площадка: верхняя прямоугольная часть ножки литеры, на которой расположено выпуклое изображение знака. Но не нужно бояться этого определения, ведь каждый знает, как выглядит пишущая машинка и как она работает. Так вот, у пишущей машинки каждая буква находится на своей маленькой площадке, ударом которой символ переносится на бумагу. В цифровом шрифте кегельная площадка важна как прямоугольник, в который вписывается изображение знака. На картинке вы можете заметить, что два разных шрифта находятся в одной и той же кегельной площадке, и несмотря на разницу их размеров, ничего страшного не происходит. Но если сравнить два других шрифта, можно заметить, что одна и та же кегельная площадка может родить некоторые проблемы, и размер шрифта может отличаться значительно, так же, как и расстояние между буквами. Итак, в этом видео вы узнали, что такое шрифт с точки зрения типографики и что такое компьютерный шрифт, а также понятия, которые их объединяют. В следующем видео я расскажу вам о том, как с помощью веб-технологий можно менять параметры шрифта, а если быть точным — его размер.
