Кордон шрифту CSS?

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

Існує експериментальна властивість CSS під назвою text-stroke , яка підтримується в деяких браузерах за префіксом -webkit .

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Іншим можливим фокусом буде використання чотирьох тіней, по одному пікселю у всіх напрямках, використовуючи властивість text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Але воно буде розмитим для товщини більше 1 пікселя.

ОНОВЛЕННЯ

Ось мітка SCSS для створення обведення: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

ТАК старе питання .. з прийнятими (і хорошими) відповідями ..

АЛЕ ... У разі, якщо комусь це колись потрібно, і ненавидить ввести код ...

ЦЕ - це 2px чорна рамка з підтримкою CrossBrowser (не IE). Мені потрібно це для шрифтів @fontface, тому воно повинно бути більш чистим, ніж попередні бачені відповіді ... Я приймаю кожну сторону піксельно, щоб переконатися, що немає (майже) прогалин для " нечіткі "(ручні або подібні) шрифти. Субпікселі (0,5 пікселя) можна додати, але мені це не потрібно.

Довгий код лише для кордону ??? ...ТАК!!!

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

Можливо, ви можете імітувати текстовий штрих, використовуючи 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властивість, я сумніваюся, що він доступний для більшості користувачів, але це може не бути проблемою (витончена деградація і все таке).

Щоб детальніше зупинитися на деяких відповідях, які згадували -webkit-text-stroke, ось код, щоб змусити його працювати:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

Поглиблені статті про використання тексту Інсульт тут і список браузерів що підтримка тексту інсульт тут .

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

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

Ось що я використовую:

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Обведення шрифту з меншим вмістом

Ось МЕШЕ міксин для створення обведення: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(заснована на відповіді pixelass, яка замість цього використовує SCSS)

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

Я створив порівняння всіх згаданих тут рішень для швидкого огляду:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

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

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

Вибачте, що я спізнююсь, але, кажучи про тіньову тінь, я подумав, що вам також сподобається цей приклад (я використовую його досить часто, коли мені потрібні хороші тіні на текст):

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}