Сколько «весит» подгружаемый шрифт?
Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!
Я воспользовался инструментом WEFT и поэкспериментировал со шрифтом Arial нормального стиля начертания без разложения шрифта по каким-либо признакам. Исходный размер arial.ttf составляет 766 килобайт, а уже сформированный arial.eot стал весить 308 килобайт. Контейнер EOT сжал файл в 2,5 раза. Хороший результат. Для примера, максимальное ZIP-сжатие того же шрифта — 423 килобайта, RAR — 370 килобайт. Что касается gzip, то Владимир Левантовский из Monotype подметил, что “EOT-компрессия лучше компрессии gzip на 20-30% для западных шрифтов”.
Разложение шрифта (font subsetting)
Разложение позволяет разбить шрифт на заранее определённое количество знаков. Такой подход значительно уменьшает объём файла. Как показывает предыдущий пример кода, необходимо использовать разные файлы для каждого из начертаний шрифта. Это своего рода разложение по стилю. Есть также другие признаки. Например, разложение шрифта только по языковому набору знаков. Если заранее известно, что на странице будет использоваться только русский язык, то можно ограничить шрифт набором только кириллических знаков, что существенно сократит размер шрифта.
Ещё WEFT может анализировать страницы сайта, и при создании EOT-контейнера использовать лишь те знаки шрифта, которые находятся на анализируемой странице. Такой подход очень сильно сокращает размер шрифта. Пользоваться этим методом удобно в том случае, если заранее известно, что в будущем текст редактироваться не будет, иначе придётся заново обрабатывать шрифт. Например, если есть вероятность того, что в будущем текст страницы будет изменён, но язык текста останется русским, то лучше ограничивать шрифт кириллическим набором.
Оригинал всё того же шрифта arial.ttf (766 килобайт) после разложения на кириллицу с помощью WEFT стал весить 77 килобайт. Разница очевидна.
В большинстве случаев на российских сайтах одновременно используются кириллические и латинские наборы символов. Для это можно создать два разложенных на кириллицу и латиницу шрифтовых файла, и затем прописать два CSS-правила @font-face для каждого EOT-шрифта.
Есть ещё один, на мой взгляд самый удобный метод — позволяет использовать диапазон unicode. При разложении нет необходимости разбивать шрифт на несколько файлов. Вместо этого можно указать диапазон символов.
Лёд тронулся
На сегодняшний день все основные браузеры поддерживают внедрение и использование шрифтов на сайте. Идёт активное обсуждение возможных решений возникших задач. На мой взгляд необходимо решить три задачи: механизм лицензирования, метод сжатия и, естественно, сама технология внедрения. С каждой из этих задач уже справляется EOT. Но мнения пока расходятся.
По сей день спорят, что использование технологии от Майкрософта является политически некорректным, и что в ходе “войны браузеров” у компании появляются преимущества. Лично я полностью согласен с тем мнением, что оптимальным вариантом будет внести изменения и доработать EOT, который отдан в руки сообщества разработчиков. А уже потом можно работать над форматами TTF и OTF, чтобы в конечном итоге рынок сам определял, что для него лучше.
У Майкрософта твёрдая позиция — ради производителей шрифтов, компания хочет поддерживать и развивать EOT. Эту позицию также твёрдо поддерживает Adobe и одобряет Monotype — крупный производитель шрифтов. Однако сообщество разработчиков видит возможные пути внедрения специальных веб-таблиц в шрифты форматов OTF и TTF, что запрещает использование шрифта на компьютере, но разрешает его использование в интернете. Но пока это только разговоры.
Представитель Майкрософта Майк Чемпион (Mike Champion) заявил, что “внедрение оригинальных файлов наносит существенный ущерб независимой индустрии шрифтов”. Свои слова Майк подкрепил тем, что “в Microsoft на высоком уровне принято решение о том, что мы не будем использовать подобный метод внедрения шрифтов”.
В примере я использовал бесплатную версию шрифта Euro Sans Pro компании Linotype. Лицензия на этот шрифт разрешает использовать его в интернете, но только при услови, что этот шрифт не будет использоваться где-либо ещё. А на данный момент это означает EOT.
В любом случае, при желании использовать какой-либо шрифт, большинство официальных сайтов и крупных порталов будут приобретать соответствующие лицензии. Особенно на Западе им некуда деваться — позовут в суд. А для тех, кто не хочет платить сотни баксов за шрифт, есть возможность использовать бесплатные варианты. Благо, такие уже начинают появляться в интернете. Но действительно качественные работы — всё ещё очень большая редкость.
Бесплатные креативные шрифты (кириллица + латиница)
1. Рукописный шрифт Celestina
Бесплатный романтичный шрифт, который автор (Antonina Zhulkova) ассоциирует с зимой. Отлично подойдет для новогодних открыток и поздравлений, а так же приглашений на свадьбу или романтическую вечеринку.
Шрифт отлично смотрится, как в заголовках так и небольших отрывках основного текста.
2. Каллиграфический шрифт Elowen
Имитирует толстую сухую кисть и подойдет для проектов детской или женской тематики. Шрифт распространяется бесплатно для коммерческого использования. Автор Katsia Jazwinska.
3. Воздушный Airfool typeface
Округлые буквы и символы этого бесплатного шрифта имитируют воздушные шары. Подойдет для оформления обложек, открыток, полиграфии детской, поздравительной, мультипликационной тематик.
Яркие цвета сделают надпись, созданную с помощью шрифта Airfool еще более креативной.
4. Сказочный Wizland
Этот шрифт привел меня в полный восторг. Его буквы выполнены, как-будто, из песка или снега. Есть как русские, так и латинские буквы. Шрифт доступен для личного и коммерческого использования и подойдет для фэнтезийной тематики, тем Нового года и рождества. Так же ассоциируется с древними письменами.
Спасибо автору (Tim XEZ) за действительно уникальный дизайнерский шрифт. Кстати, он отлично смотрится не только в заголовке, но и тексте.
Волшебный шрифт Wizland
5. Сладкий или воздушный JazzBall
Еще один шрифт, буквы которого похожи на воздушные шарики или карамель. Так же подойдет для детской или сказочной тематики или оформления упаковки для кондитерских изделий.
В наборе предусмотрены, как русские, так и английские буквы, а так же цифры и спецсимволы.
6. Древнерусский Pertsov type
Дизайнерский шрифт в векторном виде, вдохновленный работами художника-оформителя В. В. Перцова. Естественно, вы не найдете для него латинских букв.
7. Природный шрифт «Березки»
Креативный шрифт, навеянный русской природой. Буквы имеют тонкое начертание с чуть волнистыми линиями, имитирующими изгиб веток. В гарнитуре есть, как русские, так и английские буквы и специальные символы.
Шрифт подойдет для оформления афиш, постеров и других макетов экологической и природной тематик в стиле кантри, бохо, скандинавском стиле.
8. Космический шрифт «Галактика»
Дизайнерский гравитационный шрифт, имитирующий астрономические и звездные знаки. Подойдет для работ космической, фантастической и научной тематик. В набор входит кириллица и латиница, а так же специальные символы.
9. Пугающий Spooky Witchy
Мимо этого бесплатного шрифта я не могла пройти мимо. Хоть в нем и предусмотрены только латинские буквы, сама тематика может быть полезна. Дизайн вдохновлен праздников Хэллуин. Следовательно шрифт подойдет для оформления материалов, буклетов и афиш по теме ужасов, монстров и страшилок.
10. Романтичный Magnolia Script
Изящный рукописный шрифт подойдет для свадебных и поздравительных приглашений, открыток, женской тематики, оформления меню кафе и ресторанов, и много другого. Шрифт распространяется бесплатно для личного и коммерческого использования.
11. Болотистый Swampty Grungy Font
Очень интересный дизайнерский шрифт, который подойдет для создания креатива природной тематики, постеров и афиш в стиле гранж. С его помощью можно создавать действительно оригинальные работы. В набор входят русские, английские буквы и специальные символы. Шрифт доступен для личного и коммерческого использования.
12. Легкий Yarin free font
Шрифт вдохновлен летом и свободой, напоминает печатные буквы с засечками, написанные от руки. Может использоваться для оформления логотипов, заголовков, брендинга. презентаций и много другого. Его можно назвать универсальным дизайнерским шрифтом для личного и коммерческого использования. Есть кириллица и латиница.
Форматы файлов шрифтов
1]TTF (шрифт True Type)
Это основные типы шрифтов, созданные Microsoft и Apple, и поэтому они предустановлены как на компьютерах Windows, так и на iOS. Он состоит из одного двоичного файла, поэтому им легко управлять. Это наиболее часто используемые форматы для файлов шрифтов, и все основные браузеры поддерживают его, но единственная проблема с этим форматом заключается в том, что шрифты TTF не сжимаются, а размер файла довольно велик по сравнению с другими форматами.
2]OTF (шрифт открытого типа)
Можно назвать это улучшенной версией TTF. Этот формат, разработанный Microsoft и Adobe, имеет расширенный набор символов и поддерживается на нескольких платформах. Кроме того, он содержит данные шрифта принтера и данные экранного шрифта в одном компоненте. Вы можете использовать OTF как на Windows, так и на Mac. Формат OTF имеет дополнительное пространство и, таким образом, позволяет хранить до 65 000 символов. Эта функция особенно полезна для дизайнеров.
Читать: Загрузка бесплатных шрифтов для логотипов и коммерческого использования.
3]Шрифты SVG
SVG (масштабируемая векторная графика) — это новая версия OTF. Его также называют цветными шрифтами, и он полезен для дизайнеров, которые склонны использовать шрифты, вдохновленные кистью. При разработке шрифтов SVG можно использовать несколько цветов и прозрачностей. SVG — единственный формат файлов, поддерживаемый iPhone и iPad с Safari версии 4.1 или ниже. SVG, однако, не подходит для основного текста, а также в нем отсутствуют подсказки для шрифтов.
4]WOFF (формат открытого веб-шрифта)
WOFF — это в основном OTF или TTF с метаданными и сжатием, поддерживаемыми всеми основными браузерами. Он был создан, чтобы жить в сети. Это результат сотрудничества Mozilla Foundation, Microsoft и Opera Software. Поскольку шрифты сжаты, они загружаются быстрее. Метаданные позволяют включать данные о лицензии в файл шрифта для решения проблем с авторским правом. Это рекомендация консорциума World Wide Web, которая, несомненно, является будущим форматов шрифтов.
Читать: Как установить шрифты в Windows 10.
5]WOFF2
Очевидно, это следующая версия WOFF с улучшенным сжатием. WOFF2 поддерживает почти все популярные веб-браузеры и широко используется веб-разработчиками. Кроме того, он поддерживает спецификации OTF и TTF, а также коллекции шрифтов и вариативные шрифты.
6]EOT (встроенный формат файла OpenType)
Формат файла EOT, разработанный Microsoft, имеет единую структуру EMBEDDEDFONT, которая включает в себя все основные сведения об имени шрифта и поддерживаемых символах, поэтому вам не нужно распаковывать, устанавливать или распаковывать шрифт, если он уже установлен в вашем система.
Это были одни из наиболее часто используемых форматов файлов шрифтов. Сообщите нам, если вы хотите, чтобы мы добавили больше в список.
EOT — Embedded OpenType
Технология Embedded OpenType (встраиваемый формат OpenType) появилась в 1997 году. То есть возможность полноценно использовать любой шрифт на сайте существовала все эти годы, начиная с Internet Explorer 4! Но монополия Microsoft препятствовала популяризации этой технологии. Также свою роль сыграл единственный на то время конкурент Internet Explorer — Netscape, который продвигал другую технологию внедрения шрифтов — TrueDoc.
Технология EOT сжимает и конвертирует шрифты форматов TrueType и OpenType (кроме OpenType PS) в формат EOT. Во время конвертации, в корневую строку (RootString) шрифта прописываются адреса сайтов (или локальные адреса), в рамках которых будет использоваться шрифт. Если адрес сайта не совпадёт с адресом в корневой строке, то шрифт отображаться не будет. Этот механизм защиты от нелегального использования зарекомендовал себя среди известных производителей шрифтов.
До недавнего времени одним из недостатков EOT являлось то, что конвертировать шрифт можно было только с помощью эксклюзивного инструмента от Майкрософта — WEFT (Web Embedding Fonts Tool), который работает только на операционных системах Windows. Вторым, менее значимым недостатком считались “Технические средства защиты авторских прав” — ТСЗАП, задача которых — препятствовать неправомерному копированию файлов.
Устранить эти недостатки удалось благодаря заявлению Microsoft сделать открытыми формат EOT и спецификацию MTX (MicroType Express).
Майкрософт проявила эту инициативу в начале 2008 года, и несколько месяцев спустя, в конце этого же года, было организованно небольшое собрание в W3C с предложением создать Рабочую группу по шрифтам (Fonts WG). На собрании присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers.
В ходе дискуссии был выдвинут альтернативный вариант — вместо того, чтобы создавать новый контейнер с так называемой “корневой строкой”, как это делает EOT, можно добавлять эту строку непосредственно в форматы TrueType и OpenType. Ещё один вариант — “закрывать” начальные 100 битов информации, что будет препятствовать использованию интернет-шрифта локально на компьютере.
Сторонники альтернативы считают, что эти действия устранят необходимость в XOR-закрытии, дублировании информации, и компрессии шрифта с помощью технологии MicroType Express. Даже прозвучало возможное расширение нового контейнера — TTW (TrueType-W). Недостаток возможной альтернативы — создание с нуля механизма работы предложенного формата. Но полагается, что для новых приложений, внедрить предложенную схему будет легче, чем внедрить уже существующий EOT.
Зачем вообще использовать EOT или TTW?
Ответ на этот вопрос достаточно очевиден — данные механизмы защищают шрифты от нелегального использования. Цена за лицензию на шрифт может достигать несколько сотен, а то и тысяч долларов. А период разработки только одного шрифта с поддержкой разных языков может достигать нескольких лет! Поэтому производители очень трепетно относятся к использованию своих шрифтов в интернете, так как при просмотре страницы шрифт скачивается локально на компьютер, и становится доступным.
Начертания шрифтов (font styles) #
У шрифтов может быть несколько начертаний. Не все шрифты имеют все возможные
начертания. Если у шрифта есть жирный и есть курсив, то жирного курсива может и
не быть
Также обратите внимание, что курсив и наклонный шрифт — разные вещи.
Двухбуквенные команды (, и т.д.) считаются устаревшими, их
использование не рекомендуется. Не следует путать с , хоть в
большинстве ситуаций они и дают одинаковый результат
Пример:
12345678910111213141516171819 |
\documentclass{article}\usepackage{fontenc}\usepackage{inputenc}\usepackage{babel}\begin{document}\noindent\textnormal{(Default) Основной шрифт документа}\\\textrm{(Roman) С засечками}\\\textit{(Italic) Курсив — не наклонный!}\\\textsl{(Slanted) Наклонный — не курсив!}\\\textbf{(Bold) Жирный}\\\textbf{\textit{(Bold italic) Жирный курсив}}\\\textbf{\textsl{(Bold slanted) Жирный наклонный}}\\\texttt{(Monospace) Моноширинный}\\\textsc{(Small caps) «Малые заглавные»}\\\textbf{ \textsc{(Bold Small caps) Жирный «Малые заглавные» }}\textsf{(Sans serif) без засечек}\end{document}
|
Результат (font-styles.pdf):
Переключение шрифтов #
Во всём документе
Поменять шрифты для всего документа можно в преамбуле командой
. Например, поставленные в
преамбулу команды
123 |
\renewcommand{\rmdefault}{cmr}\renewcommand{\sfdefault}{cmss}\renewcommand{\ttdefault}{cmtt}
|
установят стандартные шрифты cmr для , cmss для и cmtt
для . Приведённые команды никак не изменят внешний вид документа,
потому что в них указаны стандартные значения. Если же добавить в преамбулу к
последнему примеру
12 |
\renewcommand{\rmdefault}{cmss}\renewcommand{\ttdefault}{cmss}
|
то весь текст будет написан одним и тем же шрифтом Computer Sans Serif.
можно не указывать, потому что Computer Sans Serif — и так его
стандартное значение. Таким образом, для семейства шрифтов можно
использовать любой шрифт — необязательно с засечками.
Временно
Временно сменить шрифт в документе можно так:
\usefont{<encoding>}{<font name>}{<font type>}{<font shape>}
|
Например, чтобы применить ко всему тексту после команды:
\usefont{T2A}{cmtt}{m}{n} текст...
|
Либо так, чтобы изменить шрифт только между :
{\usefont{T2A}{cmtt}{m}{n} текст ... }
|
Временно переключить шрифты можно и другой командой:
{\fontfamily{<font name>} <текст ... >}
|
Например:
{\fontfamily{cmss} <текст ... >}
|
Любой шрифт в xelatex/lualatex #
Что делать, если нам нужен какой-то другой шрифт, не входящий в стандартную поставку LaTeX, но установленный в системе?
Быстрее всего будет использование XeLaTeX или LuaLaTeX вместо LaTeX. Если
команды и системе неизвестны, поставьте пакет
texlive-full. В Debian/Ubuntu это можно сделать так: .
Такой код позволят задавать русские шрифты при компиляции или (LaTeX такое не скомпилирует):
xelatex-lualatex.tex
123456789101112131415161718192021 |
\documentclass{article}\usepackage{fontspec}\setmainfont{Georgia} \setsansfont{Verdana} \setmonofont{Lucida Console} \begin{document}Просто текст будет таким, каким указан \textbackslash{setmainfont}.В нашем случае это Georgia.\textrm{Это тоже Georgia. Это шрифт семейства \textbackslash{rmfamily},оно же Roman font или serif font, то есть шрифт с засечками.}\textsf{Это шрифт семейства \textbackslash{sffamily}, оно же sans serifили шрифт без засечек (sans serif в переводе с французского означает«без засечек»). В нашем случае это шрифт Verdana.}\texttt{Это шрифт семейства \textbackslash{ttfamily}, оно же typewriterили monospace. В нашем случае это шрифт Lucida Console. Все буквы исимволы здесь занимают одинаковую ширину.}\end{document}
|
Результат будет таким (xelatex-lualatex.pdf):
Обратите внимание, что если не уточнять, каким семейством печатать шрифт, по умолчанию будет использоваться шрифт, установленный для семейства , то есть то, что было указано в преамбуле командой
Процесс работы с Font Squirrel
Рассмотрим все действия на примере шрифта Source Sans Pro, остальные подключаются аналогично.
Шаг 1. Поиск и скачивание нужных шрифтов
Вбиваем в окошко название, жмём «Enter» и скачиваем то, что нашлось.
Скачанные архивы открываем и переходим к следующему шагу.
Шаг 2. Генерация ресурсов
Итак, в разархивированной папке мы видим вот что.
Отсюда нам нужны только 4 файла. («It» в конце файла означает «Italic» или курсив, в нашем проекте не используется):
- SourceSansPro-Regular.otf
- SourceSansPro-Light.otf
- SourceSansPro-Semibold.otf
- SourceSansPro-Bold.otf
Переходим на сайт в раздел «Generator».
Отмечаем галочку, что у нас есть разрешение на использование шрифта для веб-разработки и выбираем опцию «Эксперт». Теперь жмём на большую фиолетовую кнопку и подгружаем нужные файлы.
Сайт работает реально медленно, поэтому запасаемся чаем, терпением, не пытаемся ничего перезагружать и мирно дожидаемся результата. Файлы загружаем один за другим, а не все кучкой, чтобы не подвесить сервис.
По завершению процесса должно быть примерно вот это:
Теперь нужно правильно расставить настройки.
Верхнюю часть оставляем по умолчанию, добавляем только галочки в нужных форматах, как указано на скрине.
Нажимаем кнопку с языковыми настройками (по умолчанию скрыты). Указываем нужные нам алфавиты – кириллица и английский, отмечаем все дополнительные начертания. Могут пригодиться.
Внизу будет таблица символов, в которой можно посмотреть что и в каком виде будет отображаться. Движемся дальше.
Оставляем имя css-файла по умолчанию stylesheet.css – потом, если понадобится, заменим на то, что нам нужно. И запоминаем настройки. Сервис хранит их в куках браузера, так что при следующих сеансах таблица заполнится сама. Иногда рекомендуют включать функцию встроенного CSS с помощью Base64 Encode, однако, на практике она работает очень нестабильно.
Всё готово, жмём кнопку, наливаем вторую чашку чая, терпеливо допиваем и скачиваем результат в zip-архиве.
Шаг 3. Проверка результата
В итоговом архиве мы видим, во-первых, все заказанные шрифты, во-вторых, запрошенный файл stylesheet.css, в третьих конфигурационные файлы, в четвёртых демонстрационные html-файлы.
Открываем один из последних, идём в раздел «Glyphs & languages» и проматываем вниз, чтобы посмотреть, как отображается кириллица.
Если всё нормально, результат можно использовать в проекте. Кстати, в этих же файлах можно посмотреть и подробную шпаргалку по подключению.
Шаг 4. Подключение шрифтов
В папке «Fonts» создаём отдельную папку для этого шрифта «source-sans-pro» и кидаем туда файл stylesheet.css, кидаем туда же и все файлы с расширениями eot, ttf, woff и woff2 – это и есть ресурсы для наших шрифтов.
Далее мы просто подключаем файл в шапке index.html.
<link rel="stylesheet" href="fonts/source-sans-pro/stylesheet.css">
Чтобы использовать шрифт, в css для нужного блока просто нужно будет добавить:
font-family: 'source_sans_prolight', sans-serif;
Конкретный тип шрифта, который нам понадобится, подсматриваем в файле stylesheet.css. Для жирного – source_sans_probold, для полужирного – source_sans_prosemibold, в общем, логика понятна.
