Ставим нестандартные шрифты

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

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

EOT - Embedded OpenType Embedded OpenType — компактный формат внедряемых в веб страницы OpenType шрифтов разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение «.eot». Компактность файлов достигается путем использования подмножества символов (в шрифт включаются только необходимые) и использованием сжатия данных (LZ компрессия — часть технологии MicroType Express компании Agfa Typographic Systems).

Простота внедрения шрифтов в веб страницы может способствовать неконтролируемому распространению защищенных авторским правом шрифтов. Формат EOT предоставляет функции предотвращающие это. Использование подмножеств символов снижает стоимость копии шрифта, так как такие шрифты обычно содержат менее половины символов оригинального шрифта. Другие используемые методы защиты это шифрование данных и список «trusted roots» на сервере, и проприетарная дешифрующая DLL на клиенте. Если внедряемый шрифт недоступен по какой-либо причине (файл шрифта не найден, в шрифте нет нужных символов), то будет использоваться другой шрифт, тем самым страница будет гарантированно читаемая.

OTF - OpenType OpenType — формат файла шрифтов, поддерживающий Unicode-кодировку, разработанный совместно Microsoft и Adobe для применения в различных операционных системах. OpenType обладает большими по сравнению с TrueType возможностями до печатной подготовки и поддерживает больший набор символов при меньшем размере файла. Файлы шрифтов имеют расширение .ttf (шрифты, основанные на TrueType) или .otf (шрифты, основанные на PostScript). Впервые этот формат был анонсирован в 1996 году. Компания Adobe представила законченную версию своего пакета OpenType-шрифтов в конце 2002 года. К 2005 году количество .otf шрифтов достигло 10 тысяч.

SVG - Scalable Vector Graphics Масштабируемая векторная графика — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как HTML и XHTML. Разрабатывается с 1999 года, в 2001 году вышла 1.1 версия, которая остается актуальной до сегодняшнего дня, в активной разработке версия 1.2. В основу SVG легли языки разметки VML и PGML.

TTF - TrueType TrueType (ТруТайп) — формат компьютерных шрифтов, разработанный фирмой Apple в конце 1980-х годов. Шрифты в данном формате используются во многих современных операционных системах. Файлы с такими шрифтами имеют расширение имени «ttf». В зависимости от версии формата, максимальное количество хранимых символов может ограничиваться значениями 2-8, 2-16 или 2-32.

WOFF - Web Open Font Format Web Open Font Format (WOFF) — формат сжатого шрифта OpenType или TrueType и полностью совпадает с оригиналом, что позволяет оставить неизменным механизм рендеринга. Также формат включает дополнительные метаданные, в которые производитель шрифта может включить информацию об использовании шрифта. Эта информация не влияет на то как этот шрифт будет загружен, но позволяет определить происхождение этого шрифта, так заинтересовавшийся шрифтом использованным на веб-странице может проследить какой шрифт использован. Шрифты в WOFF сжаты, но не зашифрованы, этот формат не создавался как защищённый формат для желающих жёстко контролировать использование шрифта.

  Internet Explorer Chrome Opera Safari Firefox Android iOS
EOT 6.0+            
WOFF 9.0+ 6.0+ 11+ 5.1+ 3.6+    
TTF и OTF   4.0+ 10+ 3.2+ 3.5+ 2.2+ 4.2+
SVG   4.0+ 9+ 3.2+ 3.5+    

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

@font-face { 
font-family: 'Conv_ALGER';
src: url('fonts/ALGER.eot');
src: local('O'), url('fonts/ALGER.ttf') format('truetype'),
url('fonts/ALGER.woff') format('woff'),
url('fonts/ALGER.svg') format('svg');
font-weight: normal;
font-style: normal;}

.demo {
font-family: 'Conv_ALGER',Sans-Serif;

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

Удачных экспериментов!

Печать

Добавить комментарий

Защитный код
Обновить