HTML « Cufón vs. @font-faсe

Когда дизайнер дает макет на верстку, а там (например, в заголовках) используются нестандартные шрифты, то есть несколько вариантов их отобразить на нашем сайте:
  • сделать заголовки картинками — давно устаревший допотопный вариант (особенно когда многоязычный сайт)
  • использовать флеш+яваскрипт (проекты вроде sIFR'а) — ну, флеш, типа, считается некошерным, так что этот вариант пролетает (хотя шИФР очень добротно работает и текст там можно выделять)
  • использовать Cufón, typeface.js (второй хуже, вообще фигня) и прочее, что работает через Canvas, VML, SVG — огромный минус в том, что нельзя выделить текст (и это только один минус из 73-х)
  • подключить нестандартные шрифты через @font-face
Вопрос — почему вы используете Cufón… хотя нет, перефразирую вопрос — почему вы не используете @font-face в ваших проектах, но используете всякие Cufón'ы и прочий ад? 300 КБ яваскрипта это нормально? А потом еще куча Cufon.replace(…); это нормально?

Напротив, текст из @font-face можно выделять, ховеры нормально работают, браузер скачивает только килобайтов 60–80, стили можно изменять/задавать динамически и так далее.
UPD. @font-face можно выровнять по-вертикали в ячейке таблицы (vertical-align:middle;), Cufón — фиг с два.

Есть только одна причина не использовать @font-face — когда у нас серьезный сайт и нельзя так просто на нем использовать ворованый шрифт, юзаем Куфон и не надо покупать шрифт (хотя это тоже спорно). Но раз у нас серьезный сайт, то, наверное, заказчику будет не жалко 16 долларов на шрифтик.

Так почему же до сих пор используют Cufón? Я поражаюсь.

1 ответов


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

И кстати уже не обязательно подключать все 4 формата шрифтов (eot, ttf, woff, svg).
А можно подключить для всех основных браузеров TTF, а для ие EOT (через отдельный файл стилей, например).


не работает font-face. точнее работает 5 минут и меняет на дефолтный

хочу поменять шрифт на сайте на cms joomla

прописываю в template.css и print.css параметр @font-face

вместо


{
font-family: Arial, Helvetica, Sans-Serif;
}
 

вот это


{
font-family: PT Sans, Verdana, Arial, Helvetica, Sans-Serif;
src: url("fonts/pts55f-webfont.ttf"),url("fonts/pts55f-webfont.eot?") format("eot"),url("fonts/pts55f-webfont.woff") format("woff"),url("fonts/pts55f-webfont.svg#PTSansRegular");

}
 

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

я перерыл весь интернет. тупо перешерстил. уже по разному пробовал всё. работает только с этим кодом.

естественно в сети предложений очень много. итп


{
font-family: PT Sans, Verdana, Arial, Helvetica, Sans-Serif;
src: url("fonts/pts55f-webfont.ttf"),
url("fonts/pts55f-webfont.eot?") format("eot"),
url("fonts/pts55f-webfont.woff") format("woff"),
url("fonts/pts55f-webfont.svg#PTSansRegular");

}
 

но работает ровно 5 минут или до перезагрузки компьютера.
шрифта на компе нету. то есть он его не тянет с компьютера. то есть как то же считываеться. и пропадает.

пробовал на другой машине . выдает ариал или вердану.

тупо бьюсь головой об стол.

МЕНЯЕТ ЖЕ!! И ПРОПАДАЕТ.

на шрифтах и на папке фонтс на сервере права повыставлял 777. та же песня...

ПОДСКАЖИТЕ ЛЮДИ ДОБРЫЕ!!!

Я пробовал font-face - но в ie жутко глючит, то нормально открывается страничка и все шрифты нормально отображаются, то страница загружается, но ничего не видно, либо всё смазывается при прокрутке. Решение так и не нашёл - использовал в итоге. Cufon


font-face почему-то в браузере и в Фотошопе выглядит по-разному, а вот Cufon - совпадает в точности. Так что font-face еще нормально прокатывает для простого текста, но абсолютно не годится для логотипов.
Лучше комбинировать:
Используем font-face и Cufon вместе, если у пользователя отключен JS, то он увидит шрифты через font-face.

Насчет 300k JS - шрифт с поддержкой многоязычности будет не намного меньше. К примеру, простой Arial (правда с полной Unicode-таблицей) весит 600k. А вот если в генераторе Cufon не выбирать все символы, а выбрать только те, что точно потребуются, то его размер будет гораздо меньше. В моем случае: 41.1k. Кроме того, JS отлично сжимается (41.1k -> 10.5k). Да, и еще, не забываем, что чуть ли не для каждого браузера потребуется свой файл шрифта. Во всяком случае белка-шрифтелка генерирует 4 различных формата.