Итак, если вдруг дизайнер подкинул вам такую задачу, как вставка нестандартного, красивого шрифта на сайт, то в этой шпаргалке я вам покажу один из способов, как это можно сделать.
Можно нарезать картинок на все заголовки и т.п. куда нужно, но мы пойдем другим путем. Будем использовать такую вещь, как Cufon.
Сначала нужно найти сам файл со шрифтом. Пусть, например, это будет Neutra.ttf. Теперь нам нужно сгенерировать js, который определяет этот шрифт. Для этого идем на , кидаем в поле «Regular typeface» шрифт, ставим галочки в «The EULAs of these fonts allow Web Embedding (without Adobe Flash)» и «I acknowledge and accept these terms», и жмем «Let’s do this!». На выходе получаем web_100.font.js. С этим js и будет работать Cufon.
Теперь скачиваем сам Cufon:
Подключаем эти 2 скрипта в документ.
1
2
3
4
5
6
|
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="web_100.font.js"></script>
<script type="text/javascript">
Cufon.replace("h1");
</script> |
Пример:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Нестандартный шрифт на сайт</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="web_100.font.js"></script>
<script type="text/javascript">
Cufon.replace("h1");
Cufon.replace(".web"); // С помощью jquery можно обращаться и по классам
</script>
</head>
<body>
<p>Демонстрация применения нестнадартного шрифта.</p>
<h1>Hello, world!</h1>
<p>Привет! I'm <span class="web"></span>!</p>
</body>
</html> |
Разработчики для пользователей ие рекомендуют вставлять сразу перед </body>, либо перед вызовом любого внешнего скрипта, например гугл аналитикс, следующую строку:
1
|
<script type="text/javascript"> Cufon.now(); </script> |
Это должно снизить задержку перед подменой шрифта на сайте, что особо заметно, когда скрипту беспощадно отдают целые абзацы текста, что явно не рекомендуется
