Используем нестандартные шрифты на сайте

09 июля 2010 Нет комментариев



Метки:

Для того что бы нам с Вами вставить текст с нестандартным шрифтом на сайт понадобится библиотека Cufon, которая является достойной альтернативой sIFR. Не будем вдаваться в детали почему. Используя библиотеку Cufon вставить текст на страничку HTML любым шрифтом достаточно просто.

Для начала пример:


Используем нестандартные шрифты на сайте Ispolzuem nestandartniy shrift 12340
Используем нестандартные шрифты на сайте Ispolzuem nestandartniy shrift 12340
Пример текста Primer teksta 12340

И так что, нам понадобится:

  1. Необходимо скачать библиотеку cufon-yui.js
  2. Теперь нам нужно получить нестандартный шрифт предварительно преобразовав его в нужный формате
    Для этого воспользуемся генератором шрифта на официальном сайте Cufon – fonts for the people
  3. Вставляем следующий код в начало html страницы 
    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
        <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
            Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
        </script>
    </meta></head>
    <body>
        <h1>This text will be shown in Frutiger LT Std.</h1>
        <h2>This text will be shown in Myriad Pro.</h2>
    </body>
</html>

    Интересным моментом является то, что отображаемый текст всегда сглажен. То есть этот метод отлично подходит для сглаживания шрифтов на сайте.