CSS Font Border?

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

Ответ 1

Правильный ответ:

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<h1>Hello World</h1>

Ответ 2

UPDATE

Здесь SCSS mixin для генерации штриха: 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, поэтому нужно было быть чище, чем предыдущие увиденные ответы... Я беру каждую сторону пополам, чтобы убедиться, что (почти) нет пробелов для "нечетких" (handrawn или подобных) шрифтов. Можно добавить субпиксели (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;

Ответ 3

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

Ответ 4

Кажется, что есть свойство text-stroke, но (по крайней мере для меня) оно работает только в Safari.

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

Ответ 5

Чтобы подробнее рассказать о некоторых ответах, которые упомянули -webkit-text-stroke, вот код, чтобы заставить его работать:

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

Подробную статью об использовании текстового штриха здесь, а список браузеров, поддерживающих ход текста, здесь.

Ответ 6

Вот что я использую:

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

Ответ 7

Штрих-символ штриховки с меньшим количеством микширования

Здесь LESS mixin для генерации штриха: 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;
}

(он основан на пиксельном ответе, который вместо этого использует SCSS)

Ответ 8

Я когда-то пытался сделать эти круглые углы и отбрасывать тени с помощью css3. Позже, я обнаружил, что он по-прежнему очень плох в поддержке (Internet Explorer (ы), конечно!)

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

Ответ 9

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