Как получить нестандартный шрифт с эффектом использования веб-сайта?

Question

Проблема в том, что мне нужно получить нестандартный шрифт (не у всех на компьютере) с эффектом (из Photoshop: Outer Glow) на веб-сайте. Я могу использовать для этого Javascript (включая jQuery) и CSS3, но этот шрифт должен выделяться как любой текст в сети. Любые решения?

P.S. Шрифт: Titillium.

Answer 1

Ну, это достаточно просто, если вы можете не поддерживать IE8 и ниже для светящейся части.

Перейдите на http://www.fontsquirrel.com/fonts/TitilliumText и загрузите прилагаемый там комплект @ font-face. Следуйте инструкциям по установке и использованию @font-face для вашего сайта.

Далее, для внешнего свечения вы можете использовать свойство text-shadow, чтобы добиться почти того же эффекта. Это, например, даст вам голубое свечение размером 3px:

text-shadow: 0 0 3px #7FDEFF;

И все готово! Конечно, как указано выше, IE8 и ниже не поддерживают text-shadow, поэтому вам просто придется с этим смириться.

Answer 2

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

Вот пример для встраивания шрифта с использованием CSS3:

@font-face{
    font-family: 'Titillium';
    src: url('Titillium.eot');
    src: local('Titillium'), url('Titillium.ttf') format('truetype'), url('Titillium.woff') format('woff'), url('Titillium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Как вы видите выше, я использовал различные форматы одинаковых шрифтов. Они должны быть совместимы с браузером, например: eot поддерживается Internet Explorer. WOFF - формат, который скоро будет широко принят всеми браузерами. Есть много онлайн-конвертер для преобразования шрифта. Вы можете погуглить, выберите лучший для себя.

Также встраивание шрифтов поддерживается в следующих браузерах:

• Mozilla Firefox: версия: 3.5 +
• Google Chrome: версия 4.249.4 +
• Apple Safari: версия 3.1 +
• Опера: версия 10.5 +
• Microsoft Internet Explorer: версия 4 +

Вот эффект свечения, который я всегда использую в своих проектах:)

HTML

<span id="glow">Hello World</span>

CSS

#glow{
    font-weight:bold;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(73, 167, 219, 0.5), 0 0 30px rgba(92, 214, 255, 0.7), 0 0 75px rgba(92, 214, 255, 0.8);
}

Answer 3

Мое предложение:

• на первом слое (выше) используйте текст с @ font-face (используйте файл EOT в IE, файл WOFF в других браузерах)
• наВо втором слое (ниже) используйте Cufon текст цвета свечения - он изменит текст на холст
• после преобразования просто быстро размывает сгенерированный холст (например, Библиотека Pixastic )

Вторую и третью точку можно заменить, поместив изображение светящегося текста (может генерироваться динамически, например, с помощью PHP).

Кажется сложным, это только альтернатива.(Честно говоря, мне нравится ответ @Yi Jiang).

Answer 4

Попробуйте Cufon http://github.com/sorccu/cufon/wiki/usage

Что мне лично нравится в этом, так это то, что он изящно понижает класс для тех, у кого js отключен по вашему желанию.

Answer 5

Вы можете использовать

1. Светящийся шрифт с помощью плагина jquery jQuery Text Glow Effect

2. Встраивание шрифта Titillium

   @ font-face {
   семейство шрифтов: Titillium;
   формат src: url (/location/of/font/Titillium.ttf) ("истинный тип");
   }

   / * Затем используйте его как любой другой шрифт * /
   .Titillium {font-family: Titillium, verdana, helvetica, sans-serif;
   }