Данная статья навеяна недавним топиком frujo о библиотеке typeface.js, позволяющей отображать текст на web-страницах, используя произвольный шрифт, не присутствующий в системе у конечного пользователя.
Естественно, возникло желание сравнить новый метод с уже давно известным — sIFR &hellip
sIFR для подстановки шрифта использует Flash. Используя fla-файл, в Flash-редакторе в него внедряется шрифт, генерируется Flash-movie, затем при отображении страницы с помощью JavaScript на место заменяемого элемента внедряется Flash-ролик, занимающий то же самое место и имеющий те же размеры, что и замененный текст. Внутри внедренного ролика отображается замененный текст, но уже используя требуемый, нестандартный шрифт.
Таким образом, для использования sIFR требуется установленный Flash-plugin в браузере и включенный JavaScript. Для применения sIFR при разработке требуется установленный Flash-редактор.
Новый метод работает похожим образом, но несколько иначе. Вместо сгенерированного Flash-movie используется описание каждого символа шрифта в формате JSON. Далее, JavaScript-библиотека использует canvas (в FF, Opera и Safari) или VML (IE) для отрисовки заменяемого элемента.
Таким образом, для использования данной технологии на клиентской стороне требуется только включенный JavaScript. Для разработчика не требуется никаких дополнительных инструментов — конвертацию можно осуществить на сайте проекта.
Для сравнения технологий я создал простую страницу с тремя заголовками и тремя параграфами текста. Один заголовок и параграф был оставлен нетронутым, остальные же были заменены — один с помощью sIFR, второй с помощью typeface.js. Так же в первом параграфе были выбраны два слова и каждое из которых было заменено с использованием одного из методов. Для тестирования использовался шрифт Ariac, у меня он отсутствовал в наборе шрифтов ОС, если он присутствует у вас — результаты могут отличаться.
Таким образом я протестировал замену блочных элементов и inline-элементов в разметке. Результат можно видеть на странице elifantiev.ru/sifr-and-typeface-compare
Можно видеть что sIFR и typeface.js рисуют по разному. sIFR рисует более жирный текст.При включенном ClearType антиалиасинг шрифтов отличается. Здесь я допустил серьезную ошибку… Я использовал для замены один из стандартных шрифтов ОС… Именно по этому внешний вид при включенном и выключенном антиалиасинге отличался…
Также, при замене inline-элемента sIFR допускает ошибку. Замененный текст находится выше остального (см. слово «велосипеде» в примере). Для корректировки приходится добавлять «offsetTop=5» в sFlashVars при инициализации замены.
Впрочем, typeface.js также допускает аналогичную ошибку… И кроссбраузерных способов ее изменения я пока не нашел, поиски продолжаются… В тоже время результат отрисовки typeface.js более адекватен по занимаемой ширине, но при этом замененный текст в inline-элементе выглядит более крупным.
Разница отображения также становится заметна при изменении масштаба страницы после ее отрисовки. sIFR не пересчитывает изменившийся масштаб страницы и размер шрифта не меняется. При использовании typeface.js размер шрифта в замененном блок меняется вместе с масштабом всей страницы.
Одним из недостатков typeface является невозможность выделить кусок замененного текста. Впрочем, текст выделяется и копируется при выделении всего текста страницы по Ctrl-A
typeface.js к сожалению более ресурсоемок. Это заметно на глаз в старых браузерах (я проверял в IE6 и Opera8). Также, typeface.js больше в объеме. Общий размер файлов typeface.js в моем примере составил 83 Кб (из которых 67 Кб занимает шрифт), в то время как размер файлов sIFR составил всего 31 Кб (из которых шрифт — 17 Кб.). В обоих случаях в файлы шрифтов был «внедрен» одинаковый набор символов.
В целом typeface.js представляется более удобным для разработчика. Не требуется установки лишнего ПО для конвертации шрифтов, вся работа по внедрению технологии заключается в подключении 2-x JavaScript файлов — библиотеки и файла шрифта. typeface.js более гибко и «нативно» настраивается — для изменения параметров его отображения не требуется задания дополнительный параметров где либо, кроме CSS. Активация замены для какого-либо блока выполняется только лишь установкой класса на объект.
sIFR имеет преимущества в плане юзабилити. Невозможность выделить текст и скопировать в буфер при замене с помощью typeface.js ИМХО очень досадна и может существенно мешать работе пользователя с сайтом
UPD: Текст статьи модифицирован с учетом допущенной ошибки — изначально был использован шрифт, присутствующий в ОС.
UPD2: arestov прав — в Opera 9.61 не работает — текст не отображается вообще. В Opera 8 — текст отображается но стандартным шрифтом.
Естественно, возникло желание сравнить новый метод с уже давно известным — sIFR &hellip
Описание методов
sIFR
sIFR для подстановки шрифта использует Flash. Используя fla-файл, в Flash-редакторе в него внедряется шрифт, генерируется Flash-movie, затем при отображении страницы с помощью JavaScript на место заменяемого элемента внедряется Flash-ролик, занимающий то же самое место и имеющий те же размеры, что и замененный текст. Внутри внедренного ролика отображается замененный текст, но уже используя требуемый, нестандартный шрифт.
Таким образом, для использования sIFR требуется установленный Flash-plugin в браузере и включенный JavaScript. Для применения sIFR при разработке требуется установленный Flash-редактор.
typeface.js
Новый метод работает похожим образом, но несколько иначе. Вместо сгенерированного Flash-movie используется описание каждого символа шрифта в формате JSON. Далее, JavaScript-библиотека использует canvas (в FF, Opera и Safari) или VML (IE) для отрисовки заменяемого элемента.
Таким образом, для использования данной технологии на клиентской стороне требуется только включенный JavaScript. Для разработчика не требуется никаких дополнительных инструментов — конвертацию можно осуществить на сайте проекта.
Сравнение технологий в действии
Для сравнения технологий я создал простую страницу с тремя заголовками и тремя параграфами текста. Один заголовок и параграф был оставлен нетронутым, остальные же были заменены — один с помощью sIFR, второй с помощью typeface.js. Так же в первом параграфе были выбраны два слова и каждое из которых было заменено с использованием одного из методов. Для тестирования использовался шрифт Ariac, у меня он отсутствовал в наборе шрифтов ОС, если он присутствует у вас — результаты могут отличаться.
Таким образом я протестировал замену блочных элементов и inline-элементов в разметке. Результат можно видеть на странице elifantiev.ru/sifr-and-typeface-compare
Визуальные различия
Можно видеть что sIFR и typeface.js рисуют по разному. sIFR рисует более жирный текст.
Также, при замене inline-элемента sIFR допускает ошибку. Замененный текст находится выше остального (см. слово «велосипеде» в примере). Для корректировки приходится добавлять «offsetTop=5» в sFlashVars при инициализации замены.
Впрочем, typeface.js также допускает аналогичную ошибку… И кроссбраузерных способов ее изменения я пока не нашел, поиски продолжаются… В тоже время результат отрисовки typeface.js более адекватен по занимаемой ширине, но при этом замененный текст в inline-элементе выглядит более крупным.
Разница отображения также становится заметна при изменении масштаба страницы после ее отрисовки. sIFR не пересчитывает изменившийся масштаб страницы и размер шрифта не меняется. При использовании typeface.js размер шрифта в замененном блок меняется вместе с масштабом всей страницы.
Одним из недостатков typeface является невозможность выделить кусок замененного текста. Впрочем, текст выделяется и копируется при выделении всего текста страницы по Ctrl-A
Производительность
typeface.js к сожалению более ресурсоемок. Это заметно на глаз в старых браузерах (я проверял в IE6 и Opera8). Также, typeface.js больше в объеме. Общий размер файлов typeface.js в моем примере составил 83 Кб (из которых 67 Кб занимает шрифт), в то время как размер файлов sIFR составил всего 31 Кб (из которых шрифт — 17 Кб.). В обоих случаях в файлы шрифтов был «внедрен» одинаковый набор символов.
Удобство использования
В целом typeface.js представляется более удобным для разработчика. Не требуется установки лишнего ПО для конвертации шрифтов, вся работа по внедрению технологии заключается в подключении 2-x JavaScript файлов — библиотеки и файла шрифта. typeface.js более гибко и «нативно» настраивается — для изменения параметров его отображения не требуется задания дополнительный параметров где либо, кроме CSS. Активация замены для какого-либо блока выполняется только лишь установкой класса на объект.
sIFR имеет преимущества в плане юзабилити. Невозможность выделить текст и скопировать в буфер при замене с помощью typeface.js ИМХО очень досадна и может существенно мешать работе пользователя с сайтом
Что еще почитать?
UPD: Текст статьи модифицирован с учетом допущенной ошибки — изначально был использован шрифт, присутствующий в ОС.
UPD2: arestov прав — в Opera 9.61 не работает — текст не отображается вообще. В Opera 8 — текст отображается но стандартным шрифтом.
