Как создать плавные заголовки с помощью HTML и CSS?

Question

Недавно я видел много веб-страниц с очень плавными заголовками, как, например, этот сайт: http://boagworld.com/

Как они собираются это сделать?Есть ли какие-то скрытые подсказки?

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

Какие еще способы есть кроме флеша?

Answer 1

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

• с использованием вспышка - СИФР
• чистый CSS = @font-face и напрямую вставлять шрифты в ttf или otf
• javascript техника улучшения, скрипт называется Куфон

Лично мне нравится использовать веб-безопасные шрифты с комбинацией менее известных и делать правильный запасной вариант.

Answer 2

Они просто используют изображения в качестве фона CSS для определенных вещей, в данном случае:

http://boagworld.com/wp-content/themes/BoagworldV2/images/logo.gif

Вы можете делать все, что захотите, с несколькими изображениями и CSS, например:

#header { background: #FFFFFF url(myLogoImg.png) center no-repeat; }

Answer 3

Если вы не хотите использовать замену изображений или sIFR, но хотите использовать собственные шрифты, вам следует взглянуть на TypeKit — http://typekit.com/.Они позволяют вам вызывать пользовательские шрифты (на которые они вам предоставили лицензию) непосредственно из вашей таблицы стилей с помощью семейства шрифтов и использовать встроенный в вашу страницу JavaScript для обслуживания шрифтов со своих серверов.Я использую их сервис в своем проекте прямо сейчас, и пока он работает хорошо.У них пока нет огромной библиотеки шрифтов, но она все равно больше, чем Arial, Verdana, Georgia и Times New Roman.

Answer 4

Я бы посоветовал куфон для этого.Это не Flash (JavaScript), его очень легко настроить и он легко деградирует.