it-swarm.com.ru

Граница шрифта CSS?

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

428
Lars Tackmann

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

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Hello World</h1>

Это установит четыре тени одного типа с четырех сторон.

895
Narcélio Filho

Обновление

Вот миксин 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);
}

enter image description here

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

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

Это черная граница размером 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;
136
user950658

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

47
David Thomas

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

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

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

18
Colm Sloan

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

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

14
andsve

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

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

Инсульт шрифта-персонажа с миксином Less

Вот МЕСШИННЫЙ миксин для генерации штриха: http://codepen.io/anon/pen/BNYGBy?editors=11

/// 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)

2
Christian Toffolo
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
1
user2987790

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

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

0
xandy