Граница шрифта 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);
}

ДА старый вопрос .. с принятыми (и хорошими) ответами ..

НО ... на тот случай, если кому-то это понадобится и он ненавидит набирать код ...

Это черная граница размером 2 пикселя с поддержкой CrossBrowser (не IE). Мне это нужно для шрифтов @fontface, поэтому оно должно быть чище, чем предыдущие просмотренные ответы ... Я беру каждую сторону по пикселям, чтобы убедиться, что пропусков (почти) нет » нечеткие "(от руки или похожие) шрифты. Могут быть добавлены субпиксели (0.5px), но мне это не нужно.

Длинный код только для границы ??? ...ДА!!!

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; 
}

Подробная статья об использовании обводки текста здесь и список браузеров, которые поддерживают обводку текста здесь .

Кажется, есть свойство 'text-stroke', но (по крайней мере для меня) оно работает только в 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;
}

Инсульт шрифта с помощью миксина Less

Вот МЕСШЕННЫЙ миксин для генерации штриха: 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 canvas с 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;
}