Шрифты, шрифты, как сложно оставаться в рамках дозволенного и при этом творить что-то прекрасное. Часто в веб-проектах хочется использовать нестандартные, не предусмотренные системой шрифты. Но тут встаёт вопрос о том, чтобы все видели именно то, что хотим мы.
Я советую в данной ситуаци воспользоваться прекрасным сервисом 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>:
|
1
2
|
<pre><script type="text/javascript" src="js/cufon-yui.js"></script><script type="text/javascript" src="js/имя_файла_сгенерированного_шрифта"></script></pre> |
4. Прописываем далее ещё несколько строк кода, которые показывают какие элементы будут написаны данным шрифтом. Допустим я для подобных целей буду использовать придуманный мной тег <shrift>, тогда нам нужно будет прописать код:
|
1
2
3
|
<pre><script type="text/javascript"> Cufon.replace('shrift');</script></pre> |
И для вывода строчки, написанной этим шрифтом нужно будет написать текст внутри этого тега:
|
1
|
<shrift>Пример текста</shrift> |
Также можно прописать использование для уже существующих тегов, например для h1, чтобы применить шрифт ко всем заголовкам.
Ещё я бы посоветовал вам обратить внимание на Google fonts, так как там есть множество шрифтов, которые можно подключить к вашему сайту прямиком с серверов гугла