Войти
RSS-подписка
Читать в ЖЖ
Яndex-Лента
В Google Reader
Хотите использовать особенный шрифт в заголовках сайта? Не факт что его увидят другие. Наличие тех или иных шрифтов в браузере пользователя обусловлено такими факторами как операционная система и некоторыми другими. Так что же делать?
Снова нам на помощь приходит CSS. Есть такое правило @font-face, позволяющее нам использовать свой шрифт вне зависимости от браузера/операционной системы пользователя. И так, что нам нужно для этого сделать? Для начала нам нужен сам файл, отвечающий за шрифт. На пример, мой любимый шрифт, Bitstream Vera Sans, если он установлен в системе, то он находится по адресу:
C:\Windows\Fonts\Vera.ttf. Его нужно поместить на сервер. Затем в файле стилей .css нам нужно описать соответствующее правило:
@font-face {
font-family: “Bitstream Vera Sans”; - здесь мы указываем название шрифта
src: url(”http://site/fonts/Vera.ttf”); - здесь путь к описывающему его файлу
font-size: 1.5 em; - здесь же можно указать другие типичные свойства шрифта.
}
h1 { font-family: “Bitstream Vera Sans” } - ну а здесь мы его уже используем.
* Не рекомендую злоупотреблять этим правилом, так как файлы шрифтов как правило “весят” довольно много и время загрузки сайта соответственно увеличивается. Да и разнообразие шрифтов на странице режет глаз и отвлекает от сути. Мера нужна во всем 
Кроме того, семейство Internet Explorer перед загрузкой страницы предупреждает, что сайт пытается загрузить шрифт в систему, что многим может не понравиться. Целесообразность - вот ключевое слово.
Загрузка ...
А знаешь почему IE ругается? Потому что ttf-шрифты несмотря на внешний безобидный вид могут содержать внутри секции исполнимого кода. Так что по сути нужно за эту ругань ещё и спасибо говорить.
Комментарий by enternet — Февраль 11, 2007 @ 2:35 pm | Цитировать
to enternet
Проблема то не в этом
Проблема в том что до сих пор по сути нет полноценного решения, позволяющего использовать оригинальные шрифты в вэбе.
Комментарий by neutrino — Февраль 11, 2007 @ 2:55 pm | Цитировать
Ты сам пробовал это решение?
Шрифты ttf невозможно грузить из Web’a, про это куча статей написана.
Попробуй открыть этот http://site/ на машине где НЕ установлен этот шрифт.
Комментарий by codexx — Июнь 5, 2007 @ 11:25 am | Цитировать
2 codexx
Я пробовал это решение. И если бы ты внимательно смотрел код, то увидел бы вот эту строку:
Здесь CSS тянет файл шрифта с твоего же сервера.
Чуть ниже есть еще такая ремарка:
Попробуй и посмотри что получится.
Комментарий by neutrino — Июнь 5, 2007 @ 11:42 am | Цитировать
Я внимательно читал код сделал всё так.
CSS не тянет TTF.
Раз написал статью сделай пример чтобы все могли зайти и действительно увидеть что у них фонт загрузился и выглядит так как задумано.
Было бы замечательно если бы TTF можно было загружать, причём во всех браузерах!
Комментарий by codexx — Июнь 16, 2007 @ 1:05 pm | Цитировать
Могу дать ссылки на сайты где шрифты реально подгружаются, но не ttf, как я уже написал ни один из популярных броузеров ttf не подгружает, если только этот ttf не установлен у пользователя локально, но смысла в этом мало.
Есть решение только для IE, которое работает до сих пор.
И есть решение для Netscape версии до 4.7 что вообще не актуально никак уже лет 5…
Комментарий by codexx — Июль 15, 2007 @ 4:29 pm | Цитировать
to codexx .
Можешь привести ссылка на сайты
Комментарий by DM — Июль 31, 2007 @ 2:19 pm | Цитировать
— EOT —
Да, конечно, я сделал один сайт с использованием шрифтов .eot, технология Embedded Open Type, подробнее посмотреть можно здесь
http://www.microsoft.com/typography/web/embedding/default.aspx
ссылку на на свой сайт (если нужно) дам позже, так как он ещё в разработке, но там в принципе всё как в примерах от MS на упомянутой странице, вот очень наглядный пример
http://www.microsoft.com/typography/web/embedding/demos/5/demo5.htm
тут можно надпись написать и по кнопке она рисуется подгруженным шрифтом.
Шрифты здесь реально внедрённые в web-страницу, т.е. они НЕ установлены у пользователя.
Технология EOT работает только в MS Internet Explorer (начиная с 4.0 по 6.0 точно, в 7.0 не проверял)
Программа WEFT (Web Embedding Font Toold) для конвертации из ttf в уще доступна там же.
— PFR —
А вот пример умершей технологии - шрифты .pfr, Portable Font Resource
Вот тут большой пример использования почти 15-ти подгружаемых шрифтов на одной странице:
http://www.fontware.co.uk/pages/show_fonts.html
А теперь почему умершей: в некоторых источниках пишется, что PFR используется в Netscape Navigator, но ведь Netscape и Mozilla используют один и тот же движок? Логично предположить что это работает в Firefox и мы имеем реальную альтернативу? Логично, но это не так. Я загружал эту страницу в Firefox 1-2, Mozilla 1.7, Netscape 9,8,7,6 - ничего! Всё выводится ариалом и таймсом. В одном из источников доказывалась точная работа данной технологии в более старых браузерах. Так и есть в Netscape Communicator 4.79 страница открылась со всей красотой внедрённых шрифтов! Попробуйте, данный браузер должен быть доступен в архиве netscape.com, по крайней мере познавательно…
А вот программ для конвертации в PFR мне найти не удалось, буду рад если кто-нибудь поделится.
Надеюсь теперь понятно что PFR имеет только историческую ценность…
— Resume —
Не то что единого для всех современных браузеров, а даже просто решения именно ПОДГРУЖАЕМЫХ шрифтов для браузеров отличных от IE - нет, не считая конечно вывод шрифтов картинкой, флэшем и т.д…
codexx
Комментарий by codexx — Июль 31, 2007 @ 3:55 pm | Цитировать
EOT шрифты подгружаются в Internet Explorer 4.0 и выше без проблем.
Удается подгружать в Firefox с помощью плагина. Проверьте http://irq.kaznpu.kz
А вот для Opera и Mozilla не нашелся способ:(((((((((((((((((((
Комментарий by irq — Март 27, 2008 @ 9:17 am | Цитировать
Ха, я уж думал спам какой-то - сайт открываю а там всё на казахском, потом пригляделся, увидел что к чему.
Просто замечательно, спасибо за решение!
Кстати, у меня в Мозилла это тоже заработало, т.к. ядро то с Файрфоксом одно и тоже.
Но есть и минус - плагин этот работает это только в Mozilla Firefox под Windows, и, например, под Linux не работает.
Комментарий by codexx — Март 28, 2008 @ 10:11 pm | Цитировать