Шрифты на сайт – руководство

Шрифты – типы, виды и использование

Что такое шрифт?

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

Шрифт (например, Hebar Bold) представляет собой стилистически однородный набор символов, а стилистически похожие шрифты группируются в семейства шрифтов – например, Hebar Bold, Hebar Italic, Hebar Bold Italic и другие. являются частью семейства шрифтов Hebar.

Типы шрифта

Шрифты обычно делятся на три группы:

• Serif: это шрифты, в которых некоторые символы имеют засечки; В следующем примере обратите внимание на основные T, S и G:
  Это текст, написанный с засечками шрифтом – Georgia
• Sans-Serif: В отличие от Serif, символы в этих шрифтах не имеют четких линий:
  Это текст, написанный шрифтом без засечек – Verdana
• Monospace: в отличие от других шрифтов, где некоторые символы (например, u) занимают больше места, чем другие (например, a), в моноширинных шрифтах все символы занимают одинаковую ширину:
  Это текст, написанный шрифтом моноширинного типа – Monospace Courier

Когда предпочтительны шрифты?

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

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

Вот пример:

Следующие две строки написаны шрифтом Verdana. Хотя они содержат одинаковое количество символов (12), длина строк различна:

SFSFSFSFSFSF
TITITITITITI

Те же две строки со шрифтом Monospace Courier идеально выровнены:

SFSFSFSFSFSF
TITITITITITI

Некоторые распространенные шрифты

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

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

Вот некоторые Unicode-кодированные кириллические шрифты, поддерживаемые Windows XP:

Разработка сайтов и мобильных приложений. Вы можете заказать у нас:

• 

  Создание интернет-магазина

  50 000руб.
• 

  Создание мобильного приложения

  80 000руб.
• 

  Создание агрегатора, маркетплейса

  80 000руб.
• 

  Готовый агрегатор доставки еды, тариф «Базовый»

  49 000руб.
• 

  Создание корпоративного сайта

  35 000руб.
• 

  Создание лендинга

  20 000руб.

Установка шрифтов

Информация о шрифтах хранится в файлах, которые обычно имеют расширение .ttf. Вы можете загрузить такие файлы с нескольких сайтов, например, www.1001freefonts.com, www.dafont.com, www.fonts.google.com.

Если вы хотите установить новые загруженные шрифты, как это, откройте окно «Выполнить» (доступное из главного меню, которое появляется при нажатии «Пуск») и введите %windir% \ fonts в командной строке. Эта команда откроет папку, содержащую шрифты, установленные в настоящее время в вашей операционной системе Windows.

В меню «Файл» выберите «Установить новый шрифт» и в открывшемся окне выберите драйвер и папку, в которую вы загрузили новые шрифты. Появится список доступных файлов, из которого вы можете выбрать, какие из них установить (множественный выбор возможен, если вы удерживаете клавишу Ctrl при щелчке по отдельным именам файлов; в качестве альтернативы выберите только начальное и конечное имя целой группы, удерживая клавишу Shift).

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

Как использовать неуниверсальные шрифты?

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

Использование графики вместо текста

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

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

Использование технологии sIFR (Scalable Inman Flash Replacement)

Используя CSS, JavaScript и Flash, выделенный текст заменяется эквивалентом Flash. Таким образом, дизайн выбранного вами текста останется неизменным для пользователя, независимо от того, установил ли он используемые вами шрифты.

Недостатком sIFR является то, что пользователям необходимо установить подключаемый модуль Flash и разрешить браузеру использовать JavaScript. Если оба условия не будут выполнены, ваш текст будет представлен так, как если бы вы не использовали специальные шрифты – просто.

Другим существенным недостатком sIFR является медленная загрузка страницы из-за большой нагрузки на компьютер.

Применение технологии FLIR (Facelift Image Replacement)

FLIR похож на sIFR, заменяя текст его графическим эквивалентом, но отличается следующими моментами:

• Текст, который будет представлен определенным шрифтом, загружается как остальная часть текста – в отличие от элемента Flash, используемого sIFR, этот текст видим для поисковых систем.
• Помеченный как текст FLIR распознается JavaScript в браузере, и запрос отправляется обратно на сервер, который создает необходимые файлы изображений и отправляет их обратно. Процесс намного быстрее, чем обработка sIFR.
• FLIR намного проще установить, чем sIFR.

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