Хотите использовать особенный шрифт в заголовках сайта? Не факт что его увидят другие. Наличие тех или иных шрифтов в браузере пользователя обусловлено такими факторами как операционная система и некоторыми другими. Так что же делать?
Снова нам на помощь приходит CSS. Есть такое правило @font-face, позволяющее нам использовать свой шрифт вне зависимости от браузера/операционной системы пользователя. И так, что нам нужно для этого сделать? Для начала нам нужен сам файл, отвечающий за шрифт. На пример, мой любимый шрифт, Bitstream Vera Sans, если он установлен в системе, то он находится по адресу:
C:\Windows\Fonts\Vera.ttf. Его нужно поместить на сервер. Затем в файле стилей нам нужно описать соответствующее правило:
@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-шрифты несмотря на внешний безобидный вид могут содержать внутри секции исполнимого кода. Так что по сути нужно за эту ругань ещё и спасибо говорить.
to enternet
Проблема то не в этом :)
Проблема в том что до сих пор по сути нет полноценного решения, позволяющего использовать оригинальные шрифты в вэбе.
Ты сам пробовал это решение?
Шрифты ttf невозможно грузить из Web’a, про это куча статей написана.
Попробуй открыть этот http://site/ на машине где НЕ установлен этот шрифт.
2 codexx
Я пробовал это решение. И если бы ты внимательно смотрел код, то увидел бы вот эту строку:
Здесь CSS тянет файл шрифта с твоего же сервера.
Чуть ниже есть еще такая ремарка:
Попробуй и посмотри что получится.
Я внимательно читал код сделал всё так.
CSS не тянет TTF.
Раз написал статью сделай пример чтобы все могли зайти и действительно увидеть что у них фонт загрузился и выглядит так как задумано.
Было бы замечательно если бы TTF можно было загружать, причём во всех браузерах!
Могу дать ссылки на сайты где шрифты реально подгружаются, но не ttf, как я уже написал ни один из популярных броузеров ttf не подгружает, если только этот ttf не установлен у пользователя локально, но смысла в этом мало.
Есть решение только для IE, которое работает до сих пор.
И есть решение для Netscape версии до 4.7 что вообще не актуально никак уже лет 5…
to codexx .[quote post="56"]Могу дать ссылки на сайты где шрифты реально подгружаются, но не ttf[/quote]
Можешь привести ссылка на сайты
— 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
EOT шрифты подгружаются в Internet Explorer 4.0 и выше без проблем.
Удается подгружать в Firefox с помощью плагина. Проверьте http://irq.kaznpu.kz
А вот для Opera и Mozilla не нашелся способ:(((((((((((((((((((
Ха, я уж думал спам какой-то – сайт открываю а там всё на казахском, потом пригляделся, увидел что к чему.
Просто замечательно, спасибо за решение!
Кстати, у меня в Мозилла это тоже заработало, т.к. ядро то с Файрфоксом одно и тоже.
Но есть и минус – плагин этот работает это только в Mozilla Firefox под Windows, и, например, под Linux не работает.
http://www.thebrightlines.com/2009/11/01/the-trouble-with-font-face/
тут тоже описаны траблы с font-face
Ребят, что паникуем то, за эту проблему взялся сам Google и уже выпустил в бета-тестирование свое решение a href=http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html rel=nofollowчитайте тут/a