CSS облямівка шрифту?

Question

Ще

Джерело Non AMP-version Редагувати

CSS облямівка шрифту?

З усіма цими новими штуками з межами CSS3 (-webkit, ...), чи можна тепер додати межу до вашого шрифту? (Як суцільна біла межа навколо синього логотипу Twitter). Якщо ні, то чи є якісь не дуже потворні хаки, які зроблять це в CSS/XHTML, або мені все одно потрібно запускати Photoshop?

user2441511

Edited question 24-го жовтня 2016 в 4:18

Програмування

fonts css

3-го квітня 2010 в 10:35

5 погляди

David Thomas · Answer 1 · 2010-04-03T10:51:55+00:00

Можливо, ви могли б емулювати текстовий штрих, використовуючи css text-shadow (або -webkit-text-shadow/-moz-text-shadow) і дуже низьку розмитість:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

Але хоча це більш доступно, ніж властивість -webkit-text-stroke, я сумніваюся, що вона доступна для більшості ваших користувачів, але це може не бути проблемою (граціозна деградація і все таке).

andsve · Answer 2 · 2010-04-03T10:44:21+00:00

andsve

Джерело Non AMP-version Редагувати

Здається, є властивість "обтікання тексту", але (принаймні у мене) вона працює тільки в Safari.

http://webkit.org/blog/85/introducing-text-stroke/

17

0

Коментарі (3)

xandy · Answer 3 · 2010-04-03T10:43:03+00:00

Одного разу я спробував зробити ці закруглені кути і тіні за допомогою css3. Пізніше я виявив, що він все ще погано підтримується (Internet Explorer(и), звичайно!).

Врешті-решт я спробував зробити це на JS (полотно HTML за допомогою IE Canvas), але це сильно впливає на продуктивність (навіть на моїй C2D машині). Коротше кажучи, якщо вам дійсно потрібен ефект, розгляньте бібліотеки JS (більшість з них повинні працювати на IE6), але не перестарайтеся через проблеми з продуктивністю; якщо вам все ж потрібна альтернатива ... ви можете використовувати SFiR, а потім PS і SFiR. CSS3 сьогодні ще не готовий.