Шрифт из ужасов

Тема в разделе "Шрифты", создана пользователем Дмитрий Кесаев, 25 окт 2011.

  1. Дмитрий Кесаев

    Дмитрий Кесаев aka Zlobniy Babko

    Заблокирован
    Регистр.:
    10 май 2007
    Сообщения:
    1.332
    Симпатии:
    1.265
    шрифт: 28 дней спустя

    [​IMG]


    Внедрение шрифтов в web-страницу
    Иногда необходимо, чтоб пользователи видели ваши красивые извращенские шрифты. Загружать и устанавливать .ttf файлы с вашего сайта им скорее всего будет лень. Для этого и существует технология внедрения шрифтов в web-страницу.

    С помошью размещения специального тега на вашей странице, можно "попросить" браузер пользователя временно загрузить ваш шрифт. Загружаемый шрифт не является обычным .ttf файлом. С помощью специальной программы от Microsoft - Weft, .ttf файл переделывается в какой-то "font object" .eot (подробнее на сайте Microsoft Typography).

    Процесс создания .eot файла, достаточно непонятен с первого взгляда. Тем более, что программа Weft - просто ужас! Чуть что, выдает лаконичное - "Unknown error".

    Попробуем создать один такой .eot файл. Для начала вам нужен какой-нибудь экзотический шрифт, который не инсталлируется в системе по-умолчанию. Пример такого можно взять у меня - Aksent. Этот шрифт пока лучше не устанавливать, а если установлен - удалить (для наглядности). Для установки шрифта идем в "Пуск -> Настройка -> Панель управления -> Шрифты". В меню "Файл" выбираем "Установить шрифт...". В открывшемся окне, выбираем папку, где лежит новоскаченный шрифт. Ждем, некоторое время, пока Windows просканирует ее. Нажимаем "ОК", не забывая поставить галочку "Копировать шрифты в папку Fonts" (кому как больше нравится). Для удаления, опять е заходим в папку "Шрифты". Щелкаем правой кнопкой на шрифте, нажимаем "Удалить".

    Запускаем Weft (вообще лучше его перезапускать после махинаций с установкой/удалением шрифтов). При первом запуске появится окошко
    [​IMG]
    повествующее о том, что необходимо обновить базу данных шрифтов программы. Можно ее не обновлять, т.к. все равно обновит криво. Обновите базу, если шрифт уже установлен в системе.

    Далее появится окно мастера. Если вы решили не устанавливать шрифт в систему, то это окошко нужно закрыть и указать программе, где лежит ваш off-line шрифт. Делается это просто: "Tools -> Add off-line fonts".
    [​IMG]
    Выбираем папки, где искать шрифты и жмем "Start".

    Снова запускаем мастер (кнопочка "New" на панели инструментов).
    [​IMG]
    В нем надо указать страницу, для которой будет создаваться объект шрифта. Программа проанализирует все используемые на ней шрифты и добавит в исходник скрипт для загрузки шрифта. Если не нажимать галочку Do not add linked pages, программа пройдет по иерархии ссылок и автоматически добавит все связанные страницы.

    Выбираем любую страницу и жмем "Далее".
    [​IMG]
    Тут программа спрашивает, надо ли производить анализ символов, используемых страницей. Для экономии размера файла объекта шрифта можно внедрять не все символы, а только используемые. Но нам пригодятся все, поэтому ставим галку Skip analysis и жмем "Далее".

    Выбираем шрифты, которые будем внедрять.
    [​IMG]
    В списке Subsettings должно быть выбрано 5. Raw subsettings. Жмем кнопку "Add". Выбираем нужный шрифт (наш Aksent, например). Достаточно выбрать Regular. Затем, выделяем наш шрифт и жмем кнопку "Subset".

    Здесь отображаются внедряемые символы.
    [​IMG]
    Из списка Language выбираем Cyrilic. Нажимаем на все буковки, чтоб они стали черными. Жмем "OK". Программа подсчитает, сколько символов будет содержать шрифт. Жмем "Далее".

    Финальный этап.
    [​IMG]
    В верхнем поле вводим путь, где будет создан файл объекта шрифта. Далее настроим список разрешенных сайтов. Нажимаем кнопку "Edit". Теперь, очень важно!, ваши шрифты могут быть использованы только на тех сайтах, имена которых вы укажите в следующем списке. Так, например если вы укажите в списке http://krutoy.newmail.ru, то пользователь, сможет загрузить шрифт на странице http://krutoy.newmail.ru/projects/index.html, но не сможет на странице http://www.krutoy.newmail.ru/projects/index.html из-за префикса www. Поэтому незабудьте добавлять названия с этим префиксом. Попытка доступа к сайту по IP-адресу, тоже не увенчается успехом. Если у вас статический IP, то лучше добавить тоже добавить его в список разрешенных сайтов. Если вы хотите провести испытания внерения сначала у себя на компьютере, добавте в список ваш жесткий диск (c:\ или d:\). Жмем "Далее", начнется процесс создания файла обхекта шрифта. По окончании, программа покажет скрипт, который нужно вставить в web-страницу для загрузки шрифта. На этом можно прекратить работу мастера, т.к. нам нужен только этот файл.

    Создаем небольшой тестовый .html файл.
    HTML:
    <HTML> <HEAD>  <STYLE TYPE="text/css"> @font-face {     font-family: Aksent;     font-style:  normal;     font-weight: normal;     src: url(file:///D:\Kirill\WEB\AKSENT0.eot);   } </STYLE>  </HEAD>    <FONT face="Aksent"> Hello World!   </FONT>  </HTML> 	
    Все. Должно работать. Удачи!
     

    Вложения:

    TroY, stogov и o_nix нравится это.