porcelanosa Mar 17 2010 at 18:12

Шрифт с помощью CSS

1 min

1.6K

CSS*

+72

Comments 60

skazkin Mar 17 2010 at 18:19

Не работает что-то :)

skazkin Mar 17 2010 at 18:20

В Google Chrome и Mozilla Firefox и IE7 во всяком случае :)

Простой тест с подключением стиля и выводом примера выводит только R, а в FF ещё и кучу нотисов в дебаггере=)

kuzvac Mar 17 2010 at 21:40

Google Chrome dev работает:)

Forastero Mar 18 2010 at 02:34

Safari 4.0.4 — воркает

UFO just landed and posted this here

qweewq Mar 18 2010 at 03:06

я один вижу это огромное поле с прокруткой вместо комментария?

almalexa Mar 18 2010 at 06:27

Я смотрю вы нехило готовились

Goodkat Mar 18 2010 at 13:37

как только не приходится изворачиваться, когда нет firebug-a

sanya_d Mar 18 2010 at 23:37

кк

merqlove Mar 18 2010 at 03:12

IE7 коряво.
CHROME 5 работает на ура.

UFO just landed and posted this here

skazkin Mar 17 2010 at 18:30

Покажите, пожалуйста, код, а?:) У меня FF 3.6

UFO just landed and posted this here

skazkin Mar 17 2010 at 18:43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link href="./s.css" rel=«stylesheet» type=«text/css»>
</head>
<body>
R





</body>
</html>

Вот так например у меня не работает — может что-то не так делаю?:(

skazkin Mar 17 2010 at 18:48

А, вставил div class=«curtis size140 standard tk_proxima_nova» и заработало :)

IonDen Mar 17 2010 at 18:42

Все пашет. FF 3.6

mstyura Mar 18 2010 at 02:37

Не поверите, IE9 — работает :)

sha1dy Mar 17 2010 at 18:52

да у него сайт вообще потрясающий — помимо того, что он сделал

+12

evil_random Mar 18 2010 at 12:08

тормозит правда как не родной

seleko Mar 18 2010 at 15:48

да, действительно! прирождённый дизайнер чувак!

seleko Mar 18 2010 at 15:57

desandro.com/articles/the-new-lens-flare/
вот это вообще замечательно :)

UFO just landed and posted this here

leshaogonkov Mar 18 2010 at 10:07

Вариации с толщиной стыкующихся рамок.

acy Mar 17 2010 at 21:06

А я не понял, почему не в em-ах заданы размеры? Как шрифт увеличивать\уменьшать?

UFO just landed and posted this here

leshaogonkov Mar 18 2010 at 10:14

Ну кстати по поводу EM не уверен. Я всегда делаю при расчете размеров округление до 4 знака после запятой, обычно все браузеры это нормально рассчитывают (больше 4 обычно не имеет смысла). Кроме Safari, если у него включено сглаживание, это вносит некоторые неудобства, но в принципе легко обходится.

UFO just landed and posted this here

leshaogonkov Mar 18 2010 at 13:16

Проблем с этим не припомню, ишак брал 2 цифры, остальные 4, в результате округлений размеры были одинаковыми, вроде.

SKYnv Mar 18 2010 at 03:13

какая прелесть у него в блоге

Halt Mar 18 2010 at 12:37

Вот эта картинка убила xD

А вообще, автор как бе намекает, что опера ближе к интернету, чем остальные броузеры :D

DnV Mar 19 2010 at 00:37

В смысле к интернету? К ИЕ что ли?

TiGR Mar 19 2010 at 06:15

Ну там же есть ссылочка на рабочий вариант: helmersworks.com/demo/opera_logo.html

pepelsbey Mar 18 2010 at 03:24

Исправленная версия, которая работает в Opera 10.50 — уже отправил автору багрепорт.

SKYnv Mar 18 2010 at 03:28

спасибо за оперативность? а про градиент что по ссылке в коменте выше можно комментарий? )

pepelsbey Mar 18 2010 at 04:26

По ссылке выше я тоже повозился с автором, который пытался игнорировать Оперу :) Но градиенты пока не поддерживаются. Однако — можно сделать так: sokr.me/bg (к сожалению, изготовлено без moz-webkit-префиксов и видно только в Opera 10.50)

SKYnv Mar 18 2010 at 04:33

box shadow, интересный способ но несколько мазохистский ;) спасибо
и пользуясь случаем по брюзжу что не хотит десктоп тим переменные чинить %u,%l,%s и так далее, в последнем билде их немного исправили, но далеко не до конца, а сломали то еще в преальфах…

deerua Mar 18 2010 at 10:42

в своём репертуаре ;)))

UFO just landed and posted this here

deniamnet Mar 18 2010 at 04:30

безумец и молодец =)

Bright Mar 18 2010 at 08:03

Было бы вообще безумно, если бы сам текст на странице со шрифтом был набран таким способом %)

Silenttouch Mar 18 2010 at 08:12

Интересная задумка для капчи, однако.

Tilli Mar 18 2010 at 08:55

Однако нет. Такие графемы очень легко разпознать.

leshaogonkov Mar 18 2010 at 10:05

А чего распознавать, если там всё открытым текстом пишется? :)

leshaogonkov Mar 18 2010 at 10:10

Всё хорошо, осталось Javascript сделать, что бы HTML не засорять исходный. :)

Не плохая альтернатива встраиваемым шрифтам, для устаревших браузеров.

-1

UFO just landed and posted this here

leshaogonkov Mar 18 2010 at 10:22

Замечательно будет индексироваться, это просто пара span над буквами :)

Conquearse Mar 18 2010 at 10:23

Ну как-как, хочешь найти букву r:

<span class="css_char r">
  R
  <span class="inside split_vert"></span>
  <span class="outside split_vert"></span>
  <span class="stroke"></span>
  <span class="fill"></span>
</span>

Текст найден :-)

deerua Mar 18 2010 at 10:43

можно джиквери скриптик навоять, что бы вообще без проблем было ;)

art008 Mar 18 2010 at 11:41

а еще можно рисовать картинки при помощи разноцветных слоев (ячеек таблиц), размером 1х1, только все это — извращение)

leshaogonkov Mar 18 2010 at 13:19

Делать пиксель-арт таблицами уже садо-мазо :)

leemuar Mar 18 2010 at 18:24

www.youtube.com/watch?v=NqFOB77jLaE

porcelanosa Mar 18 2010 at 11:48

Большой недостаток — то что шрифт пока один. Возможо появиться индустрия продажи CSS под конкретный шрифт :-)

porcelanosa Mar 18 2010 at 11:49

*появится

evil_random Mar 18 2010 at 12:10

Текст не выделяется

leshaogonkov Mar 18 2010 at 13:21

Рассматривайте это как статичное изображение (чем оно и является, по сути).

Demir0 Mar 18 2010 at 15:28

От чего же. Если выделить, скопировать и вставить, получится вот это:
«A B C D E F G H I J K L M N O P Q R S T U V W X Y Z?!.
Q U I C K B R O W N F O X J U M P S O V E R T H E L A Z Y D O G.
»

-2

artrudenko Mar 18 2010 at 16:11

Не, должно везде работать. А то если в нескольких браузере не работает, то это бета.
Пробуем!

Show the best of all time