AntiSlaed CMS
Вход
Логин: Пароль:Забыли пароль?
Запомнить вас на этом компьютере?
Войти скрытым?

Здравствуйте, Гость ( Вход | Регистрация )

> Внимание!

Адрес нашего форума изменился, теперь мы доступны по адресу antislaed.net. Обновите ссылки и закладки, он больше не изменится.


> Добавляем уникальный шрифт на сайт
rAmantiK
сообщение Jun 15 2012, 09:22
Сообщение #1


Живу на АС
Иконка группы

Группа: Пользователи

Сообщений: 462
Регистрация:
23.5.2008
Из: Aktobe Kazahstan
Пользователь №: 3,888
Спасибо сказали: 51

Вставить ник




Здравствуйте. Сегодня речь пойдет о нестандартных шрифтах на сайтах. Наверняка вы не раз сталкивались с этой задачей, но не знали как её реализовать.
Это можно сделать несколькими способами:
1. Картинками. Нарезать маленькие картинки, объединить их в одно большое изображение (спрайт) и вставлять эти картинки вместо текста. Но этот способ не совсем подходит и им не желательно пользоваться.
2. Метод от W3C. Простой метод без заморочек. Используется @font-family. Но у этого метода есть один недостаток: Многие браузера не совсем корректно поддерживают данный метод.
3. sIFR - на сегодняшний день это самый употребляемый способ. Но у него есть один недостаток - требует наличие flash-плагина.
4. Cufón - Отличный плагин, практически без недостатков. Об нем мы и будем сегодня говорить.

Как работает Cufon?

Cufon состоит из двух частей. Это: Javascript плагин Cufon и соответственно сам шрифт, который мы хотим использовать.

Переходим к практике.

Для начала нужен сам шрифт, который мы хотим использовать. Я скачал бесплатный шрифт Taurus нормального начертания. Теперь, когда у нас есть шрифт идем по адресу cufon.shoqolate.com/generate/ и кидаем в форму имеющиеся шрифты. Ставим галочки в "The EULAs of these fonts allow Web Embedding (without Adobe Flash)" и "I acknowledge and accept these terms", и жмем "Let’s do this!". Если шрифт кириллический, тогда дополнительно ставим галочку "Cyrillic Alphabet".
Жмем "Let’s do this!". Получаем JavaScript файл с нашим шрифтом.

Далее скачивание сам дистрибутив Cufón - cufon.shoqolate.com/js/cufon-yui.js.

Теперь подключаем оба файла, как самый обычный Js.
КОД
<script type="text/javascript" src="http://cufon.shoqolate.com/js/cufon-yui.js"></script>  
   <script type="text/javascript" src="./js/taurus_font.js"></script>


Теперь нам нужно выбрать те элементы, которые мы хотим нарисовать новым шрифтом.
Например все заголовки в h1.
КОД
<script type="text/javascript">  
   Cufon.replace("h1");  
   </script>

Если нужно выделить какой-то определенный класс, то пишем так:
КОД
<script type="text/javascript">  
   Cufon.replace('.nameo,#idname');  
   </script>
rAmantiK, Вас 1 раз(а) поблагодарили за это сообщение:
DjSalamander
Перейти в начало страницы
 
     Выделите текст перед нажатием цитаты
+Цитировать сообщение
 
Начать новую тему
Ответов (1 - 2)
vitalik1972
сообщение Jun 21 2012, 10:36
Сообщение #2


Живу на АС
Иконка группы

Группа: Пользователи

Сообщений: 765
Регистрация:
10.6.2008
Из: Оренбург
Пользователь №: 4,176
Спасибо сказали: 211

Вставить ник




Пиши еще (IMG:http://antislaed.net/style_emoticons/default/smile.gif)
Для новичков - самое оно!
Перейти в начало страницы
 
     Выделите текст перед нажатием цитаты
+Цитировать сообщение
DjSalamander
сообщение Feb 11 2013, 11:49
Сообщение #3


прорвемся...
Иконка группы

Группа: [..AS..]

Сообщений: 2,388
Регистрация:
6.9.2008
Из: Latvia Riga-Vangaži
Пользователь №: 5,367
Спасибо сказали: 457

Вставить ник




Да. но незабывай Виталь, что сам виндовс не все шрифты отображает, для этого их нужно в винду закачать (IMG:style_emoticons/default/smile.gif) .

И не каждый это умеет и не каждый будет этим заниматся. Соответственно в своем браузере скажем фонт monotype-coursive, будет показанн как обычный ARIAL . (IMG:style_emoticons/default/sad.gif)
Перейти в начало страницы
 
     Выделите текст перед нажатием цитаты
+Цитировать сообщение

Ответить в данную темуНачать новую тему

2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0
 

RSS Текстовая версия Сейчас: 25 November 2024 - 11:46
Хостинг предоставлен NetLevel.Ru   Eleanor CMS