CSS: Обводка букв - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - CSS: Обводка букв (http://forum.oszone.net/showthread.php?t=102462)

CSS: Обводка букв

Можно ли средствами CSS выполнить обводку букв? Скажем, сами буквы белые, а линия обводки синяя.
Достаточно, чтобы было совместимо с Firefox.

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

Код:

<html>

  <head>



<style type="text/css">

.shadow {

  font:bold italic 44px times new roman,georgia,arial,verdana;

  color:000;

  padding:0;

  margin:0;

  white-space:nowrap;

}

.shadow:before {

  color:#aaa;

  content:"HALLO";

  display:block;

  margin:0 0 -57px 4.5px;

}



</style>

<!--[if IE]>

<style type="text/css">

.shadow {

  FILTER:progid:DXImageTransform.Microsoft.dropshadow

  (OffX=3, OffY=4, Color='#aaaaaa', Positive='true');

  HEIGHT:0;

}

</style>

<![endif]-->



  </head>

  <body>

  <h2 class="shadow">HALLO</h2>

</body>

</html>

Картинкой я хотел, но у меня весьма специфичный скрипт, съедающий ужасно много процессорного времени (да что там, 100%). Причём с картинкой анимация раз в десять медленнее. Поэтому остановился на текстовой анимации.
Эффект тени в даном случае не подходит. Поскольку читаемость его даже пониже получается.

А вот вариант с загружаемым шрифтом мне нравится. Но только что за шрифт такой (и где можно достать, и как его применить:))? Мне не попадались...
Скрипт не для массового доступа, поэтому трафик (в разумных пределах) роли не играет.

извиняюсь что не сказал сразу, подгрузка пашет только в IE, потому тоже отстой. тут пара примеров, причем тут же можешь убедится в ff не пашет. Оптимизируй картинки или попробуй с флеш (по данным сайта нашей фирмы используют флеш 98% юзеров)

Мдя, похоже, что это IEonly.
Картинок там всего две. Одна стоит на месте, а другая по идее собирается из множества мелких фрагментов при помощи canvas.drawImage();
В общем-то, там всё на canvas'е нарисовано, поэтому переделывать на флэш не могу... Да и нет у меня флэш-редактора под linux=( Так-то да, было бы разумнее сразу на флэше делать. Но как знать, может быть он с 500 объектами справился ещё хуже, чем canvas:)

Coutty, а если делать два текста - на переднем плане поменьше, а на заднем побольше(обводка, то есть)? Правда, с кернингом придется повозиться... чтобы буквы в слове более-менее совпадали. Или вообще выводить побуквенно

dmitryst, собственно, побуквенно оно и выводится:) Надо попробовать. Как бы только совместить?..

Совместил. Ужасно:) Лучше подобрать цвет, одинаково контрастный к белому и тому, другому =\