Влад Мержевич

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

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову - это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

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

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

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

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

Современный элемент политического процесса

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

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

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

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

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

• Шрифты свободны для использования, вам не нужно за них платить.
• Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
• Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.

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

Как выбрать

Прежде чем рассказать, как в Windows 7 установить шрифты, хотелось бы дать несколько советов по их выбору.

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

Следующее, на что следует обратить внимание: многие шрифты для Windows 7 предназначены только для написания большинству же русскоговорящих пользователей не обойтись без кириллицы. Иногда указание на поддержку русского алфавита содержится прямо в названии ("rus", "kyr" - это слова-маркеры), но далеко не всегда. Точно определиться с доступностью родного языка поможет опять-таки предварительный просмотр по двойному щелчку.

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

Общие указания

Файлы шрифтов имеют, как правило, расширение.ttf, реже.otf или.fnt. Но они часто доступны в заархивированном виде (расширение.zip, .rar, .7z и пр.) Любой из описанных ниже способов предполагает, что вы уже распаковали архив и извлекли из него шрифты. Windows 7 умеет распаковывать архивы формата.zip. Для других типов файлов потребуется специальная программа-архиватор.

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

Установка через контекстное меню

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

Если есть желание просмотреть шрифт перед установкой, то следует дважды щелкнуть по нему. В открывшемся окне будет представлено начертание всех букв. Там же в верхней части окна будет кнопка "Установить". Понравилось написание - жмите кнопку.

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

Копирование шрифтов в системную папку

Этот вариант следует признать наиболее универсальным. Папка Windows\Fonts существует в операционных системах от Microsoft с незапамятных времен, поэтому таким способом легко воспользоваться в ХР или Windows 8 так же, как в Windows 7.

Установить шрифты можно с помощью простого перенесения соответствующих файлов в папку Fonts (или скопировать их, а потом вставить). Можно даже не копировать файлы, а просто создать на них ярлыки.

При этом надо помнить, что папка Fonts имеет атрибуты "скрытая" и "системная". Чтобы попасть в нее, потребуется либо сделать системные папки видимыми через настройки в Панели управления, либо воспользоваться файловым менеджером, который показывает все объекты на компьютере независимо от их атрибутов, в отличие от Проводника.

Установка через "Панель управления"

Рекомендации по поводу того, как в Windows 7 установить шрифты, будут неполными, если не упомянуть специальный инструмент для работы с ними в Windows. Чтобы им воспользоваться, заходим в меню "Пуск", там нажимаем кнопку "Панель управления". Дальше выбираем пункт "Шрифты", а если панель имеет представление "По категориям", то сначала нажимаем "Оформление и персонализация", и уже потом - "Шрифты".

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

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

Установив себе на компьютер операционную систему (ОС), она уже обладает целым арсеналом шрифтов. В основном это те, которые использует сама ОС для своего оформления, а также ряд стандартных, ставших общепринятыми, такие как: Times New Roman и Arial. Если вы использовали какой-либо продукт от компании Adobe, то тогда будет автоматически установлен большой набор шрифтов от этой компании. Любые другие приложения для компьютера также могут полнить вашу библиотеку шрифтов.

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

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

Инструкция по установке шрифтов

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

Предположим, что вы нашли подходящий. Он должен быть в формате otf или ttf и имеет вот такое оформление:

Обратите внимание, если он поддерживает кириллицу, то тогда на превью будут изображены три русские буквы «Абф». Также по буквам можно понять, как выглядит его начертание.

Итак, вот как нужно устанавливать:

1 ШАГ

Нажмите правой кнопкой по файлу и в выпадающем меню выберите Копировать .

2 ШАГ

Открываем библиотеку шрифтов. Она находится в папке Windows — Fonts . Обычно адресная строка имеет такой вид: C:\Windows\Fonts.

3 ШАГ

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

ГОТОВО!

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

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

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

Эта коллекция намного богаче: в ней можно найти больше 36 000 бесплатных шрифтов. Их можно сортировать по категориям, выбирая, например, стиль ретро, футуристические или с национальным колоритом.

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

Несмотря на название, в этой коллекции порядка 10 000 шрифтов. Их можно сортировать по стилю, названию и новизне.

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

Большинство шрифтов здесь бесплатны для личного и коммерческого использования. Если их не хватает, зайдите в раздел скидок. Цены там очень низкие.

Фильтрация в Font Squirrel очень удобна. Можно сортировать шрифты по стилю, языкам, популярности и новизне.

Кроме того, Font Squirrel предоставляет пару удобных и полезных инструментов: Webfont Generator для создания собственных веб-шрифтов и Font Identifier, который может распознавать шрифты на загруженных вами картинках и находить идентичные в библиотеке Font Squirrel.

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

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

Большинство представленных здесь шрифтов весьма экстраваганты.

Ещё одна популярная коллекция из 3 500 бесплатных шрифтов. Большинство из них рассчитаны только на личное использование.

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

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

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

Система сортировки на Urban Fonts довольно гибкая и удобная.

Библиотека с простым и чистым интерфейсом и примерно 14 000 шрифтов. Коллекция постоянно обновляется, так что вам будет из чего выбрать.

Единственный минус - найти во всём этом многообразии шрифты с кириллическими буквами не так-то просто. А всё потому, что здесь отсутствует фильтрация по языкам.

На Fontspring торгуют дорогими шрифтами для коммерческого использования. Но практически в любом семействе есть 1–2 бесплатных шрифта, которые можно использовать в личных целях. Кроме того, здесь есть отдельный раздел с бесплатными шрифтами.

Коллекция очень богатая. Но вам придётся внимательно изучать информацию о лицензии на тот или иной шрифт перед загрузкой.

Беглый поиск по Behance по запросу free font приносит много крутых авторских шрифтов. Большинство из них можно скачать бесплатно.

Подборка из 7 500 шрифтов с необычными начертаниями. Как и следует из названия сайта, выглядят они кислотно.

К сожалению, коллекция очень давно не обновлялась. Но возможно, здесь вы найдёте то, что вам нужно.

На этом сайте размещено около 9 000 бесплатных и свыше 125 000 платных шрифтов от 400 дизайнеров. За 9 долларов можно скачать архив с 5 000 шрифтов.

Правда, интерфейс, конечно, пришёл из прошлого.

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

Но каждую неделю Creative Market предлагает загрузить часть товаров бесплатно. И среди них один шрифт.

Здесь собрано больше 1 000 бесплатных шрифтов. Правда, кириллических среди них маловато.

У Fontasy удобный интерфейс и довольно большой выбор стилей. Если захотите использовать размещённые здесь шрифты в коммерческих целях, спросите разрешения у их авторов.

Небольшая, но красивая коллекция шрифтов, размещённая на GitHub. Все шрифты можно использовать как в личных, так и в коммерческих целях.