Font Squirrel делает внедрение шрифтов с помощью CSS кросс-браузерной реальностью!

Правило CSS @ font-face вряд ли является новым - фактически оно было предложено в CSS2 и даже поддерживается в Internet Explorer начиная с версии 4! Проблема всегда заключалась в том, что разные браузеры реализовывали его различными способами. Например, IE реализовал его с использованием формата Embedded Open Type (.eot), тогда как Safari, который поддерживает @ font-face начиная с версии 3.1, решил использовать TrueType (.ttf) и OpenType (.oft). Теперь, когда Firefox (v3.1) и Chrome также поддерживают @ font-face, использование стало возможным.

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

• Шрифты TrueType (Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
• EOT шрифты (Internet Explorer 4+)
• Шрифты WOFF (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
• SVG-шрифты (iPad и iPhone)
• Cufón шрифты (если вы хотите их)
• Примеры Demo.html и stylesheet.css

Вы также можете создавать собственные наборы с помощью Font Squirrel's @ font-face Generator. Вот пример того, как, используя Sansation от Bernd Montag (доступно с сайта Font Squirrel):

1 Сначала зайдите в Генератор ( http://www.fontsquirrel.com/fontface/generator ) и нажмите кнопку «+ Добавить шрифты», чтобы добавить шрифт из вашей системы - перемещайтесь, пока не найдете шрифт и не нажмите кнопку «ОК». Вы можете обрабатывать несколько шрифтов одновременно, но, как состояние, генератор интенсивно использует процессор, поэтому будьте добры и не генерируйте больше нескольких одновременно.

2 Установите флажок «Соглашение» (помните, что вы можете использовать только те шрифты, которые лицензированы для использования в Интернете), а затем просто нажмите кнопку «Скачать комплект».

3 Теперь вы должны загрузить набор шрифтов, который содержит следующие файлы:

• generator_config.txt
• sansation_demo.html
• sansation_regular-webfont.eot
• sansation_regular-webfont.svg
• sansation_regular-webfont.ttf
• sansation_regular-webfont.woff
• specimen_files
• stylesheet.css

generator_config.tx t содержит любые пользовательские настройки, которые вы могли использовать при генерации ваших шрифтов, и может быть загружен в генератор, чтобы настроить его для обработки шрифтов с использованием тех же настроек.

sansation_demo.html содержит демонстрационную страницу с использованием веб-шрифтов всех размеров, образец макета с использованием шрифтов, полный список доступных символов в веб-шрифтах и ​​подробные инструкции по их использованию.

4 файла, .eot, .svg, .ttf & .woff, конечно же, являются сгенерированными веб-шрифтами.

specimen_files просто содержит некоторые CSS и Javascript, которые используются для демонстрации в демоверсии.

stylesheet.css содержит необходимый CSS для использования на вашем сайте.

4 Переименуйте папку (например, веб-шрифты), затем загрузите папку на свой сервер и укажите ссылку на CSS в своем HTML:

<link rel = "stylesheet" href = "webfonts / stylesheet.css" type = "text / css" charset = "utf-8" />

5 Теперь, чтобы использовать шрифт (например, в качестве заголовка <h1>), просто укажите его в своем CSS (не забывая предоставить альтернативный стек для неподдерживаемых браузеров):

h1 {font: 28px SansationRegular, Verdana, Arial, Helvetica, без засечек; цвет: # 61b2f3; padding-bottom: 10px; }

Вы можете увидеть загруженную демонстрационную страницу для этого шрифта здесь.