Подключаемые шрифты

Введение

Шрифты в Windows-системах принято классифицировать как

По начертанию шрифты подразделяют на прямые (roman) и курсивные (italic); начертания составляют гарнитуру; а по насыщенности на обычные (normal) и полужирные (bold). Размер шрифта (например, в пикселах) называют кеглем.

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

 

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

 

Сравните графические и текстовые варианты стандартных гарнитур

 

Создание внедренных шрифтов

Подключаемые шрифты - это надстройка над каскадными стилями, разработанная Microsoft. Позволяет использовать на веб-странице любой шрифт, а не только одно из семейств (serif, sans-serif, monospace). С помощью специального приложения Microsoft WEFT из обычного файла True Type шрифта ttf получают файл внедренного шрифта eot.

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

 

Обратите внимание на значок слева от шрифта. Он означает, что шрифт допустим для внедрения, что случается не всегда. Затем выберем команду Tools- Create Font Objects:

Первое поле указывает, где будет сохранен файл eot. Второе поле самое важное. Здесь необходимо перечислить все URL (или доменные адреса), с которых позволительно загружать шрифт. Если разместить файл на сервере, чей доменный адрес не включен в список, Internet Explorer не будет отображать шрифт. Кроме того, при работе с сервером Apache необходимо в файле .htaccess отключать поддержку русской перекодировки.

Нажимая на кнопку "Create fonts", мы запускаем процедуру преобразования. Затем полученный файл загружается на сервер. Чтобы использовать его на веб-странице, необходимо создать таблицу стилей, связывающую файл с конкретным именем:

@font-face {font-family: имя_шрифта; 	src:url(его_файл.eot)}

Эту таблицу логично разместить в общем для всех страниц файле стилей.

Далее, чтобы какой-либо элемент начал отображаться с помощью этого шрифта, просто указываем в его таблице стилей: font-family: имя_шрифта

 

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

<style>
@font-face {font-family: nt; 	src:url(NLife.eot)}
h1 {font-family:nt}
</style>

На данной странице мы подключим шрифт непосредственно к следующему абзацу:

You can see an example of embedded fonts

Шрифт оказался без кириллических символов. Как показывает практика, многие доступные шрифты либо не имеют кириллической поддержки, либо она реализована проблематично (например, вне UNICODE), и тогда внедрение будет неуспешным. Отсюда есть два выхода: преобразование имеющегося кириллического шрифта (Font TTF Converter) и редактирование оригинального шрифта с помощью соответствующего программного обеспечения. Второй путь трудоемок хотя бы потому, что приходится вручную создавать символы (хотя большую часть можно просто скопировать из основного набора - А, В, Е и т.д.). Однако шрифт, используемый в верхнем фрейме данного веб-сайта был получен автором из бесплатно распространяемого шрифта NiteLife именно таким способом. При редактировании использовалась shareware-версия (загруженная на download.ru) программы Font Creator Program 1.2.1.181 (http://www.high-logic.com/fcp.html).

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

 

Hosted by uCoz