|
|
|
| Внимание! Эта страница корректно и в полном объёме отображается только в
Microsoft Internet Explorer! |
 |
Назначение страницы.
На странице рассказано о использовании (внедрении) шрифтов (font) EOT (Embedded Open Type Format),
TTF (True Type Format), OTF (Open Type Format) и WOFF (Web Open Font Format) в WEB (HTML) документ.
В реальном мире мы то и дело сталкиваемся с множеством разнообразных шрифтов,
которые сопровождают нас повсюду — от обложек книг до оформления пивных бутылок.
А как обстоит дело со шрифтовым оформлением в Интернете? Как-то так сложилось,
что еще совсем недавно на всех Web-страницах преобладали
Arial,
Courier и
Times New Roman. Сейчас
эта монотонность слегка разбавлена новыми шрифтами, которые несомненно красивы,
но всё же в целом ситуацию не меняют. Такое положение вещей обусловлено теми
технологиями, которые используются при разработке Web-страниц.
Казалось бы, чего проще: внеси имя файла в тэге <FONT FACE=“abcd“> и страница
с текстом немедленно преобразится. Но не все так легко. С помощью описанного
приема пользователю, скорее всего, текста увидеть не удастся. Причина очень
простая — отсутствие шрифта на компьютере пользователя. Результат появится или в
виде
стандартных шрифтов, на которые
настроен браузер пользователя, или в виде всем знакомых закорючек.
Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным
использовать в этих браузерах CSS-правило
@font-face. На данный момент эти браузеры обрабатывают многие (в том
числе созданные пользователем) шрифты форматов OTF и TTF без необходимости
конвертации в защищённый формат EOT. Конечно нужно соблюдать определённые
правила, в том числе шрифты должны быть "идеально правильными" - впрочем это
отдельная статья для обсуждения! Это существенное отличие от Microsoft Internet Explorer,
который поддерживает использование шрифтов только
в формате EOT.
Пример внедрения нестандартного шрифта:
0123456789
<!-- Пример
внедрения Embedded Open Type (EOT)
и True Type (TTF) шрифтов и HTML код примера -->
<style>
.cifra {text-align: center; font-size:30pt; letter-spacing: 4px;
font-family: "8Pin Matrix"}
@font-face {font-family: 8Pin Matrix; font-style: normal;
font-weight: 700;
src: url("http://www.goodpc.narod.ru/img/8bit.eot")
}
@font-face {font-family: 8Pin Matrix;
src: local("8Pin Matrix"), local("8Pin Matrix")
url ("http://www.goodpc.narod.ru/img/8bit.ttf") format("truetype");}
</style>
<p
class="cifra">
0123456789</p>
Исходный код вы можете найти в
Zip архиве, файл 123.htm. Используемая в примере таблица шрифта:
8Pin Matrix.
Автор широко использует этот шрифт:
Телефонный набор,
Часы,
Учимся считать. Как внедряются EOT Fonts
(Embedded Open Type шрифтов) написано в статье
Шрифты и Интернет-технологии. Нетрудно видеть, что использование
EOT Fonts
(Embedded Open Type шрифтов) и TTF
(True Type шрифтов) существенно изменяют вид этого сайта. Поэтому автор
настоятельно рекомендует этот метод украшения Ваших Web
страниц. Если есть желание можно загрузить интересующие шрифты…
Список используемых шрифтов.
Приводится список используемых на этом сайте
шрифтов и ссылки на вызов Таблиц символов.
| № |
Шрифт |
Примечания |
| Обычные шрифты. |
| 1 |
Стандартный шрифт |
Шрифт установленный в браузере по умолчанию. |
|
|
| 2 |
Arial |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 3 |
Arlekino |
Загружается EOT или TTF шрифт.
|
= |
= |
| 4 |
Береста |
Цифры,
знаки препинания и русские буквы. Загружается ЕОТ или ТТF шрифт. |
= |
= |
| 5 |
Courier |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 6 |
Garamond |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 7 |
Georgia |
Довольно распространённый шрифт, при отсутствии на вашем компьютере в Internet Explorer загружается EOT шрифт,
в остальных браузерах стандартный шрифт. |
= |
|
| 8 |
Gothic Rus |
Загружается EOT или TTF шрифт.
|
= |
= |
| 9 |
Monotype Corsiva |
Загружается EOT или TTF шрифт.
|
= |
= |
| 10 |
Monte-Carlo |
Загружается EOT или TTF шрифт.
|
= |
= |
| 11 |
Optima Cyr |
Загружается EOT или TTF шрифт.
|
= |
= |
| 12 |
Rurintania |
АЗБУКА
Содержит русские ЗАГЛАВНЫЕ буквы.
Работает только в Internet Explorer, загружается EOT шрифт, в остальных браузерах стандартный шрифт. |
= |
|
| 13 |
Tahoma |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 14 |
Times New Roman |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 15 |
Verdana |
Довольно распространённый шрифт, поддерживаемый большинством браузеров.
|
|
|
| 16 |
Wooden Ship Decorated |
Работает только в
Internet Explorer, загружается EOT шрифт, в
остальных браузерах стандартный шрифт. |
= |
|
| 17 |
8Pin Matrix |
Шрифт состоящий из цифр и знаков. Загружается EOT или TTF шрифт:
0123456789 |
= |
= |
| Символьные шрифты. |
| 18 |
Webdings |
Специальные символьные шрифты от
Била Гейтса!
|
|
|
| 19 |
Wingdings |
|
|
| 20 |
Wingdings 2 |
|
|
| 21 |
Wingdings 3 |
|
|
| 22 |
GoodPc Simvol |
Символьный шрифт разработанный автором, для замены шрифтов: Webdings, Wingdings, Wingdings 2, Wingdings 3. |
|
= |
| Шрифты - Знаки Зодиака. |
| 23 |
Zodiac Pictogram |
Загружается EOT или TTF шрифт:
abcdefghijklz |
= |
= |
| 24 |
Zodiac Figure |
Загружается EOT или TTF шрифт:
abcdefghijklz |
= |
= |
| 25 |
Zodiac Pic |
Загружается EOT или TTF шрифт:
abcdefghijklz |
= |
= |
Если Вы занимаетесь Изотеризмом, Астрологией или увлекаетесь Зодиакальными
знаками Вам поможет страница : Шрифты
Зодиака.
Каталоги бесплатных шрифтов.
8 |
|
Щёлкните (clik) и Вы
перейдёте к Комментариям и пояснениям,
а при нажатой клавише Alt
в начало страницы
“Шрифты для Web-сайта”.
|
|
Комментарии и Пояснения.
|
Как видите, решение, способное удовлетворить всех, в настоящее
время отсутствует. Разработчики стандартов ведут между собой войну за господство
своих форматов, а мы вынуждены приспосабливаться, стоять в стороне и ждать…
В конце концов, прогресс не стоит на месте. Возможно, что уже
завтра появятся новые решения, которые позволят вам задействовать любые шрифты
для оформления Web-страниц, причем без всяких технологических ограничений. Как
делает это автор. Автор настоятельно рекомендует прочитать
Microsoft's Typography для более ясного представления о поднятых на этой
странице проблемах и решениях…
Подробнее автор опишет этот приём более подробно. Хотя на многих
страницах этого сайта уже широко используется этот метод (например:
Созвездия Зодиака,
Фотографии, Рисунки, Видео... и ряда других).
|
|
|
