World1000 - Встраиваем шрифт в веб-страницу
Баннерная сеть

Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться

  2008-11-03 17:21
Предистория
С момента создания 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>



Если после проделанного ваша страничка отображается так же, как и раньше - значит у Вас все получилось. Если же нет - не расстраивайтесь, поищите ошибки в Вашей страничке, повторите действия.
Кроме того, непонятным образом на эту технологию влияет использование тэга , описывающего кодировку текста документа. Так что когда будете встраивать шрифты в свои веб-странички - не забывайте удалять этот тэг, а то ничего не получится.
Если возникли какие-то проблемы - обратитесь к первоисточнику.

Автор: Валерий Полях
Быстрый переход
  • Company
  • Overview
  • Facts and Figures
  • Why Us
  • Testimonials
  • Careers
  • Capabilities
  • Technology Centers
  • Microsoft .NET
  • Java EE
  • PHP
  • AJAX
  • Skill Set
  • Domain Expertise
  • Web 2.0
  • Rich Internet Applications
  • Business Continuity
  • Quality Management
  • Methodology
  • Services
  • Advanced Web Development
  • Web Application Development
  • Web and Enterprise Portal Development
  • Website Design and Development
  • Web-based Database Programming
  • Web-enabling Legacy Applications
  • Opensource Software Customization
  • Business Application Development
  • Content and Document Management
  • Secure Intranets / Extranets
  • Customer Relationship Management
  • Workflow Management
  • Supply Chain Management
  • Interactive Learning
  • Independent QA and Testing
  • Application Security Consulting
  • Graphic Design / Multimedia
  • Maintenance and Support
  • Outsourcing
  • Outsourcing Overview
  • Dedicated Teams
  • Security and IP Protection
  • Engagement Models
  • Portfolio
  • By Business Domain
  • Corporate / Info Websites
  • Communities and Networks
  • B2B / B2C Internet Portals
  • Retail / Ecommerce
  • Media Distribution
  • Workflow Management
  • Customer Management
  • Enterprise Collaboration
  • Supply Chain Management
  • eLearning / Online Training
  • By Technology Focus
  • Microsoft .NET
  • Java EE
  • PHP
  • By Solution Type
  • Websites
  • Web Applications
  • Enterprise Solutions
  • Contact
  • Contact Form
  • Get Free Evaluation
  • Call Me Back
  • Contact Info
  • Map

Рекламная сеть © World1000.net

ICQ:
422879