Информационно развлекательный портал Среда, 11.03.2026, 03:38
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта

Заработок на рекламе



Категории каталога
Веб - Дизайн [83]

Мини-чат

Заработок на рекламе



Наш опрос
Самый лучший мульт
Всего ответов: 4

Главная » Статьи » Веб-Дизайн » Веб - Дизайн

Встраиваем шрифт в веб-страницу
Предистория
С момента создания WWW веб-дизайнер вынужден был мириться с тем, что он ограничен стандартными шрифтами и не может использовать более подходящие для его целей. Что если надо передать настроение древности или наоборот, создать обстановку супер современных технологий? В такой ситуации обычно использовались заголовки, выполненные в виде картинки.
Этот подход был хорош тем, что шрифт заголовка выглядел именно так, как этого хотел дизайнер, но засчет этого значительно раздувался размер готового веб-документа и замедлялась его загрузка. Много фирм пытались создать софт, решающий проблему встраивания шрифтов, но не очень успешно.
С появлением PHP и его расширенных ситуация немного упростилась, но проблема не была решена окончательно, т.к. это решение было доступно достаточно узкому кругу дизайнеров. С появлением MS WEFT (Web Embedding Font Tool) ситуация изменилась коренным образом.

Как это работает
Все просто. WEFT преобразует шрифт, который вы хотите встроить в свой специальный формат - OpenType. Шрифт этого формата имеет расширение EOT и может работать только на вашем веб-сайте (это для того, чтобы шрифты не воровали, т.к. они также являются предметом авторского права). Далее при помощи стилей указываем название файла, из которого грузим шрифт - вот и все.

Как это выглядит
Чтобы вы сразу поняли, что встраиваемые шрифты - это действительно круто, походите по ссылкам:
Пример №1
Пример №2
Пример №3
Пример №4
Пример №5
Пример №6
Пример №7
Пример №8
Пример №9

А теперь опишу по-шагово, как это сделать.
1. Качаем WEFT 3.0 (около 9М). Инсталлируем его.
2. Создаем страничку у себя на диске С:
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: () on 8/23/2000 -- */
@font-face {
font-family: myfont;
font-style: normal;
font-weight: normal;
src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE=myfont SIZE=5> a b c d e f g </FONT>
</BODY>
</HTML>
3. Запускаем WEFT
4. Нажимаем кнопку "Add".
5. Указываем путь к нашему документу.
6. Выбираем, какой (или какие) шрифты нам нужно встроить в нашу страничку. В данном случае он один - Arial. При этом в выпадающем меню "Subsetting" выбираем "No subsetting". Нажимаем Next.
7. А вот тут нужно быит внимательным. Нажимаем на кнопку "Mirror sites" и добавляем ВСЕ URLы, с которых должен работать наш шрифт. Учитывайте, что URLы типа YOURSITE.COM и WWW.YOURSITE.COM для WEFTа являются разными, и потому надо вписать и тот, и другой адрес.
8. Теперь WEFT спросит Вас, куда сохранять модифицированную им вашу веб-страничку. Укажите путь.
9. Вот и все! После недолгих раздумий WEFT сгенерировал нам файл со шрифтом и встроил вам его в страничку.

Чтобы проверить, действительно ли чудо свершилось делаем следующее:
Модифицируем нашу простенькую веб-страничку из такой формы:
<HTML><HEAD><TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: () on 8/23/2000 -- */
@font-face {
font-family: Arial;
font-style: normal;
font-weight: normal;
src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE=Arial SIZE=5> a b c d e f g </FONT>
</BODY>
</HTML>

в такую:
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: () on 8/23/2000 -- */
@font-face {
font-family: myfont;
font-style: normal;
font-weight: normal;
src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE=myfont SIZE=5> a b c d e f g </FONT>
</BODY>
</HTML>

Если после проделанного ваша страничка отображается так же, как и раньше - значит у Вас все получилось. Если же нет - не расстраивайтесь, поищите ошибки в Вашей страничке, повторите действия.
Кроме того, непонятным образом на эту технологию влияет использование тэга , описывающего кодировку текста документа. Так что когда будете встраивать шрифты в свои веб-странички - не забывайте удалять этот тэг, а то ничего не получится.
Если возникли какие-то проблемы - обратитесь к первоисточнику.
Категория: Веб - Дизайн | Добавил: vitos (21.03.2008)
Просмотров: 363 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Заработок на рекламе



RussianFeme.Com - знакомства с иностранцами

Популярные Статьи
Борьба клонов
Маленькие советы (Часть 2.)
Меняем точку регистрации объек...
Работа со звуком в ActionScrip...
3D в Flash
Flash. Кривые Безье - основа о...
Flash 5. Шаг четвертый: Пошаго...
Flash 5. Шаг девятый: добавляе...
Flash 5. Шаг первый: основные ...
Flash :: Знакомьтесь: прототип...
Маленькие советы (Часть 1.)
Введение во Flash
Динамические SQL-запросы Oracl...
Создаем тень от текста.
Метод Shape Tweening
Метод Motion Tweening
Создание простой сценки во Fla...
Подключение Flash
Интерфейс Flash. Создание кноп...
Используем шаблоны

Поиск

Друзья сайта
Мопед HOnda Dio AF34

Заработок на рекламе



Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Copyright Player( ICQ 70-886-366) © 2026