Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Веб-Дизайн

Встраиваем шрифт в веб-страницу
Предистория
С момента создания 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>

Если после проделанного ваша страничка отображается так же, как и раньше - значит у Вас все получилось. Если же нет - не расстраивайтесь, поищите ошибки в Вашей страничке, повторите действия.
Кроме того, непонятным образом на эту технологию влияет использование тэга , описывающего кодировку текста документа. Так что когда будете встраивать шрифты в свои веб-странички - не забывайте удалять этот тэг, а то ничего не получится.
Если возникли какие-то проблемы - обратитесь к первоисточнику.
Автор: Валерий Полях · Добавлена: 2002-10-10
Источник статьи · Просмотров: 26001 · Рейтинг: 2.9

Всего комментариев: 3
[3] Станислав Станислав(Stas_T) 2013-05-29, 10:36 PM
Спасибо за содержательную статью! Может автор мне подскажет последующему вопросу. Доброго времени суток! Меня интересует вопрос по поводу изменения цвета букв. У меня сайт сделан на вордпрессе. В данной CMS меняешь шаблон и по сути имеешь другое оформление сайта, но бывают такие ситуации, когда в одном шаблоне нравится расположение кнопок, вкладок, оформление, но не нравится шрифт или цвет текста, а в другом из шаблонов чего-то нет. И вот приходится совершать выбор в сторону одного из шаблонов. Вордпресс (это не реклама CMS) с открытым кодом, некоторые моменты я могу поправить в редакторе, но не могу изменить цвет текста. Сайт виду для себя и парочку моих друзей (хотел попробовать вести блог)
http://unusualthings.ru
Нет навыков php-программирования, вот решил на первых парах освоить, то что мне под силу. Выбор пал на вордпресс. Знаю, некоторые вообще не признают эту CMS, но для начинающих думаю сойдет. На вашем сайте я не нашел информации по этой cms, может кто работал с ней - прошу откликнуться. Хочу обратиться к знающим людям, как и где можно изменить цвет текста? Спам

[2] Олександр Стешенко(Lemahus) 2013-03-30, 0:36 AM
Купить Steam игры -> http://lemahus.com Спам

[1] Андрей(himikus61) 2008-12-18, 6:00 PM
Спасибо!Попробую. Спам

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Есть ли у вас свой сайт?
Всего ответов: 141042
Наша кнопка
WoWeb.ru - портал для веб-мастера