Подключаем к сайту свой шрифт
Шрифты, шрифты, как сложно оставаться в рамках дозволенного и при этом творить что-то прекрасное. Часто в веб-проектах хочется использовать нестандартные, не предусмотренные системой шрифты. Но тут встаёт вопрос о том, чтобы все видели именно то, что хотим мы.
Я советую в данной ситуаци воспользоваться прекрасным сервисом Cufon, который предлагает вам привязать ваш сторонний шрифт к сайту. Способ основан на создании JavaScript библиотеки с выбранным шрифтом, и последующий рендеринг требуемых надписей.
Самые приятные вещи в cufon — это кроссбраузерность и индексируемость поисковыми ботами текста. То-есть с технической точки зрения подключение шрифта не может повредить вашему сайту. Тем более основная библиотека весит чрезвычайно мало.
Перейдём непосредственно к мануалу по установке:
1. Первым делом нам потребуется скачать библиотеку cufon
2. Отправляемся на их сайт и генерируем файл шрифта.
Постараюсь описать по порядку основные пункты, которые вам стоит учесть при генерации файла шрифтов.
- Изначально нам нужно загрузить оригинальный файл шрифта. Вообще достаточно загрузить его в Regular typeface, если вам от шрифта не требуется специально начертания bold, italic или bold italic.
- Выставляем галки на нужных нам символах из данного шрифта. Допустим вам нужны только латинские символы… Для этого достаточно поставить галку напротив Basic Latin.
- Листаем в самый низ страницы и ставим галку напротив I acknowledge and accept these terms, тем самым соглашаясь с условиями лицензии.
- Жмём на большую синююю кнопку «Let’s do this!»
3. Скидываем библиотеку и файл со шрифтом куда-нибудь в корень сайта, допустим в папку js. Подключаем их к сайту, вставив код до закрывающего тега </head>:
<pre><script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/имя_файла_сгенерированного_шрифта"></script></pre>
4. Прописываем далее ещё несколько строк кода, которые показывают какие элементы будут написаны данным шрифтом. Допустим я для подобных целей буду использовать придуманный мной тег <shrift>, тогда нам нужно будет прописать код:
<pre><script type="text/javascript">
Cufon.replace('shrift');
</script></pre>
И для вывода строчки, написанной этим шрифтом нужно будет написать текст внутри этого тега:
<shrift>Пример текста</shrift>
Также можно прописать использование для уже существующих тегов, например для h1, чтобы применить шрифт ко всем заголовкам.
Ещё я бы посоветовал вам обратить внимание на Google fonts, так как там есть множество шрифтов, которые можно подключить к вашему сайту прямиком с серверов гугла.
Плюсы, минусы, сравнение с аналогами. Гдеее это все? Прально, вот тут — http://habrahabr.ru/blogs/webdev/61033/ =)
Ответить
Cufon это двухлетняя давность, к тому же не будет работать при выключенном js
Эстетствующие гики-самураи во всю используют @font-face
Ответить
1000 очков команде гиков-самураев :D
Ответить