Шрифтомания от fontsquirrel. Рядовая логика работы со шрифтами при верстке сайта / Хабр

. Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?

Стандартные шрифты сразу же приходят на ум как неудобные и сложные для придания уникальности. Большинство из них, как правило, вызывают депрессию и безнадежность у людей, кроме пользователя сайта или веб-дизайнера. Нестандартные шрифты имеют более выразительный вид, и вы можете выбрать подходящий из них.

Кроме того, учитывая, что многие мобильные ОС не поддерживают стандартные шрифты, мы могли бы отказаться от них. К сожалению, индустрия не была готова быстро изменить свои настройки, потому что она руководствовалась экранами с разрешением 96 DPI и шрифтом Georgia-Verdants.

. Что еще влияет на отображение?

Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство –

webkit-font-smoothing

. На Хабре можно попробовать изменить настройки растеризации браузера.

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

Управление цветом и контрастом – еще один способ стереть недостатки. Можно попытаться смягчить тональный контраст, приблизив цвет фона к цвету текста, чтобы уменьшить эффект хроматического контура (ClearType отображает желтые и пурпурные контуры по краям). Не переусердствуйте и помните о слепых пользователях.

Что касается нас

В будущих проектах будет использоваться Fontsquirrel. Мы приняли решение разработать собственный инструмент, который не будет существенно изменять шрифты и позволит задать необходимые параметры конвертации.

Пожалуйста, напишите мне, если у вас есть в наличии дополнительные найденные конвертеры.

Спасибо.

. Что еще можно почитать про веб-шрифты?

Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering

. Как выбрать хороший веб-шрифт?

Шрифт – это не просто набор цифровых букв, которые когда-то были написаны от руки на бумаге или в иллюстраторе. Кроме того, 98% работы – это доработка и тестирование с использованием различных носителей (разных размеров). Этот шрифт имеет приятный внешний вид, точен и характерен, и не вызовет проблем ни у принтера, ни у компьютерной программы. Как вкусно пахнет!

В любом случае, при выборе шрифта главное – необходимость и уместность его использования, а не это. Вы должны знать технологию создания шрифтов, если вы с ними работаете.

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

. Как браузеры отрисовывают шрифты?

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

GDI

или

DirectWrite

Также на iOS и OS X.

CoreText

UickDraw, ранее известный как Green Dog. Две категории компонентов растеризации (рендеринга) шрифтов – монохромные пиксельные и субпиксельные. Субпиксельные устройства используют функцию ЖК- и плазменных дисплеев, которая делит каждый пиксель на три части (красную, зеленую и синюю) для увеличения горизонтального разрешения рендеринга.

Браузеры, однако, имеют выбор в предлагаемых им методах рендеринга. Ч/б и субпиксельный ClearType – два примера. Преимущество последнего заключается в том, что сглаживание происходит только по горизонтали.

Из-за этого у него часто возникают ужасные зубцы на горизонтальных и диагонально-вертикальных штрихах. Microsoft начала постепенно совершенствовать систему, и место GDI занял DirectWrite с вертикальной коррекцией. Сравните:

. В каких форматах должны быть файлы шрифта?

Шрифты, подготовленные для использования (font-face), должны быть сразу в нескольких форматах:

. Можно ли конвертировать веб-шрифты?

. Сколько должны весить веб-шрифты?

Перед отображением страницы файлы шрифтов должны полностью загрузиться в браузере. Возможно, вы видели эффект “вспышки шрифта” (также известный как FOUT), когда обычные шрифты сменяются необычными.

Типичным является OTF (OTE) с WRF 50 и 100 кб. Никогда не загружайте файл шрифта целиком, потому что со временем вам придется заполнить его полностью.

Шрифтовые файлы весят тем меньше, чем больше перфекционизма в дизайне. Идеальные формы имеют мало контраста и представляют собой открытые геометрические гротески. При быстрой загрузке шрифтов может быть полезно

С помощью data:uri.

. Сколько начертаний шрифта можно использовать в вебе?

С точки зрения дизайнера, наличие большого количества надписей – это круто. Полужирный шрифт для заголовка и сверхлегкий для коробки. Это позволит переинкорпорировать лишний текст, добавив настоящую глубину и стилистическое разнообразие.

Однако выясняется, что все загружается на сайт крайне медленно. И лучше всего вообще не пытаться открыть такой сайт с мобильного устройства. Помните, что каждая буква – это расход. Максимальное количество букв для одной или нескольких гарнитур должно быть три-четыре.

. Нужно ли ограничивать набор символов?

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

Использование Basic Latin (или ASCII) – самый простой вариант для тех, кто создает англоязычные сайты. Вам понадобятся наборы ASCII (Basic Latin), если вы используете английские вкрапления только для перевода русских заголовков.

64 символа русского алфавита отсутствуют в 420-символьном расширенном наборе кириллицы. Чтобы избежать неточного представления символов в этой ситуации, необходимо включить все используемые языки.

. Можно ли использовать шрифтовые клоны?

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

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

. Как протестировать шрифт?

Дизайнерам не следует привыкать просматривать шрифты только через окна Photoshop, поскольку графические редакторы имеют свои собственные приемы сглаживания текста. для того чтобы понять, как отображаются шрифты в браузерах при их использовании. Убедитесь в отсутствии артефактов рендеринга или ложных сглаживаний, если у вас есть демонстрационная страница. Еще одним таким инструментом является YouTube.

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

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

. У меня на компе есть шрифт, можно ли его использовать на сайте?

Давайте сначала немного поговорим о воровстве. На своих компьютерах многие знакомые мне дизайнеры имеют тысячи компонентов шрифтов. Как правило, основы скачиваются из Интернета. Но почему-то никто не верит, что для создания хороших шрифтов нужны месяцы или годы упорного труда!

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

. Как купить веб-шрифт?

Когда вы получаете лицензию на его использование, “покупка шрифта” больше всего похожа на покупку программного обеспечения. Легально созданный файл шрифта в этом смысле является программным обеспечением. Если лицензия запрещает это, то изменение и переделка его рассматривается как нарушение авторских прав автора.

. Какие бывают лицензии?

Существуют различные лицензии на шрифты, но с момента появления веб-шрифтов их разнообразие только увеличилось. В реальном мире каждая компания устанавливает свои правила и имеет право на лицензию шрифта, которая содержит черты различных других шрифтов. Нас интересуют самые распространенные из них.

Шрифт нельзя использовать на определенном количестве устройств по стандартной коммерческой лицензии. Это могут быть растрированные копии шрифта, которые печатаются в газетах, журналах или листовках. В совокупности их можно назвать оттисками.

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

Свободные лицензии (общественное достояние) – создатель шрифта имеет право свободно распространять свою работу без ограничений, но с указанием или без указания его авторства. За исключением продажи и возмездного распространения, этот тип лицензии даже разрешает коммерческое использование. Примеры:

Opensan Droid, PT Sans. Иногда изменение шрифта разрешено (GPL), но новая версия, которую вы делаете, автоматически принимает ту же лицензию. Любое изображение может быть использовано на любом носителе, включая веб, в соответствии с подразумеваемой свободой.

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

В статье Эмиля Якупова “Практические и юридические аспекты шрифтового бизнеса” содержится более подробная информация о лицензии.

. В чем отличие лицензий для веб-шрифтов?

Мы предпочитаем веб-лицензии, которые можно приобрести как отдельно, так и в дополнение к основной лицензии. Они контролируют уникальную ситуацию – использование шрифтов на веб-сайтах. В любом случае, наиболее существенным является ограничение на количество просмотров страниц. 10 000, 100 000 или 1 000 000 в месяц.

Другими словами, чем выше стоимость лицензии, тем больше посетителей получает ваш сайт. Когда вы покупаете шрифт один раз, возможности выбора также ограничены. Полагаю, кто-то следит за количеством просмотров? Обычно следят.

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

Вы получаете файлы, которые встраиваетесь на сайт (TTAF), OTOD и WOФТ). Некоторые шрифта не разрешают размещать эти файлы у себя в защищенном виде: теоретически третьи лица могут заполучить сами текстовые документы.

. Где взять хорошие веб-шрифты?

— известный конвертер и каталог веб-шрифтов

– магазин с крупным шрифтом и практичным способом оплаты

Bitmap fonts instead of webfonts

Наконец, помните, что вы можете перейти на BitMap Fonts, если вы не можете встроить шрифт из-за его лицензии или по другим причинам. Я предпочитаю использовать для конвертации bmfont64 для простых задач и Littera для более сложных, таких как добавление границ, градиентов и теней.

Официальное руководство по шрифтам Phaser BitMap содержит все необходимые подробности.

——————————————————————————————————————————————————-

Hot to use fontsquirrel to create your own webfont & webfontkit

Благодаря автоматическому созданию всех настроек @font-face для вас, fontSquirrel’s webFontKit сэкономит вам массу времени. Просто загрузите все шрифты, которые вы собираетесь использовать, и инструмент создаст папку, содержащую все шрифты и файл stylesheet.css, готовый к подключению из вашего кода.

Для всех приведенных примеров я использовал fontSquirrel и шрифты Ostric Sans и Junction, которые я скачал с этой страницы.

Использовать fontSquirrel довольно просто:

Вы можете загрузить свой набор, перейдя на страницу генератора, загрузив туда свои шрифты и еще раз убедившись, что шрифт ЛЕГАЛЬНО разрешен для встраивания 🙂 .

Создание вашей настройки @font-face вручную или использование одного из других онлайн-генераторов даст те же результаты, но fontSquirrel является автоматическим и мощным, поэтому я настоятельно рекомендую использовать его. 🙂 .

Improving phaser example:

Как вы можете видеть, код Phaser имеет “странное” обходное решение, в котором он ждет одну секунду, чтобы убедиться, что тексты действительно загружены. Хотя это решение простое, оно кажется неудобным и не удовлетворяет меня.

Чтобы найти дополнительную информацию, я набрал в Google “Google Webfont Loader” и его “активное” событие. Добавив слово “Phaser” в качестве ключевого слова, я также обнаружил учебник Кейси Леонарда по пользовательским шрифтам Phaser. Пожалуйста, уделите время и прочитайте статью Кейси в его блоге.

Поэтому решение Кейси простое и эффективное. Мы ждем запуска игры и настраиваем весь движок Phaser только ПОСЛЕ того, как убедимся, что шрифты загружены, или после события “active”.

Вот инструмент, который будет играть на нем.

Как видите, между этим примером и предыдущим есть еще одно отличие: WebFontLoader должен быть включен в html. Вы можете найти его здесь.

Вот и все. Теперь вы можете загружать свои собственные пользовательские шрифты с любого локального или удаленного адреса. Однако для локального url у нас есть другой вариант.

Я благодарен Кейси за то, что он улучшил пример Фазера 🙂 .

——————————————————————————————————————————————————-

Loading local fonts when offline

Конечно, мы можем загрузить локальную копию скрипта Google WebFont и распространить его вместе с нашим проектом, чтобы придерживаться приведенных выше примеров. Но поскольку мы работаем локально, есть другой способ, который позволит нам отказаться от использования Google WebFont Loader. Приведенные выше примеры работают только потому, что мы используем Google WebFont Loader. Но, очевидно, он не будет работать, если мы находимся в автономном режиме. Он не загрузится в первом случае, и его нельзя будет включить во втором.

USING CSS

Если вы посмотрите на другие онлайн-руководства, например, это общее руководство или это руководство, более приспособленное для Phaser,

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

Таблица стилей, которую мы загрузили из fontSquirrel, сначала должна быть связана, и это просто.

Non-english languages

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

Да, скорее всего, он не отображается должным образом, потому что ваш файл javascript НЕ UNICODE! Измените его на кодировку unicode, и все будет работать как надо. Scheffgames рассказал об этом в своем последнем сообщении, которое я жалею, что не прочитал, когда впервые столкнулся с этой проблемой год назад.

Phaser example:

В официальном примере Phaser для загрузки веб-шрифтов используется Google Webfont Loader, и это здорово. Но как загрузить шрифты, отличные от шрифтов Google? Просто добавьте следующие строки.

Using the improved phaser example

Тот же код, который используется для удаленной загрузки, можно использовать для загрузки веб-шрифта с локального URL. Я создал репозиторий на github специально для этого, чтобы вы могли увидеть его в действии.

Как вы видите, если вы используете fontSquirrel (для получения дополнительной информации см. руководство ниже), все, что вам нужно сделать, это поместить все из их “webfontkit” в папку “fonts” и загрузить “stylesheet.css”.

custom: { families: [‘junctionregular’,’ostrich_sansmedium’], urls: [“fonts/stylesheet.css”] }

Теперь все готово. Укажите семейства из таблицы стилей в families, и все готово. Процесс такой же, как и при удаленной загрузке.

Кегль 16пк

Вопиющих ошибок. Заполнение мелких деталей шрифта видно в жирном начертании, создавая пятна в желтых линиях и сколы на краях страницы. В этом конвертере Font2web придает блеск контурам символов.

Кегль 20пк

Как вы можете видеть, Fontsquirrel получил большой урон от обычного, но в целом справился с ним достаточно хорошо. Очертания символов Font2web все еще нечеткие. Online-font converter и ECA справились с ним достаточно хорошо.

Следующий пункт — юзабилити и возможности самих конвертеров

Я намеревался составить подробную таблицу, но оказалось, что ни у одного из Fontsquirrels нет никаких настроек. Сравнение будет проводиться между эмоциями.

Шрифтомания от fontsquirrel. рядовая логика работы со шрифтами при верстке сайта

Final notes

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

Итого

Если вы знаете о возможностях конвертеров, вы можете прокомментировать.

Самый популярный из них портит шрифты, но является хорошим способом настроить результат (включая уменьшение веса файла)! Но в отличие от других пинов, в данном случае.

Font2Web никогда не следует использовать. Она часто вызывает проблемы со шрифтами. Кроме того, за один раз можно конвертировать только один файл.

Компания Everything Fonts зарекомендовала себя как мастер, умеющий воспроизводить текст, близко похожий на оригинал. Поскольку шрифты на изображении ничем не отличаются от оригинала, размер файла со шрифтами, вероятно, был оптимизирован.

Оказалось, что использовать онлайновый конвертер шрифтов очень сложно. Для каждого формата доступны свои архивы. Для одного шрифта будет три архива: woff, ttf и другие. Но при хорошем рендеринге все осветлилось.

Похожее:

«Изменение размера шрифта для устройств Nokia по сравнению с изменением общего масштаба шрифта приложения на Android с использованием Configuration.fontScale»? Как скачать шрифт на телефон Samsung? (Maggalia S3S) Как изменить шрифт на телефоне. Собрали все способы Как изменить шрифт темы