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