CSSフォントボーダー？

CSS3の新しいボーダー要素（-webkit、...）がすべて進んだところで、フォントにボーダーを追加できるようになりましたか？（青いTwitterロゴの周りの白い実線の境界線のように）。そうでない場合、CSS / XHTMLでこれを実現するあまり醜くないハックはありますか、それともPhotoshopを起動する必要がありますか？

text-strokeと呼ばれる実験的なCSSプロパティがあり、一部のブラウザーでは-webkitプレフィックスの後ろでサポートされています。

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

別の可能なトリックは、propertyを使用して、4つのシャドウを使用し、各方向にそれぞれ1ピクセルを使用すること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.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; 
}

テキストストロークの使用に関する詳細な記事はこちら、テキストストロークをサポートするブラウザのリストはこちらです。

「テキストストローク」プロパティがあるようですが、（少なくとも私にとっては）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ミックスインでフォント文字をストロークする

ストロークを生成するための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;
}

（代わりにSCSSを使用するpixelassの回答に基づいています）

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（s）です！）

私はそれをJS（IE Canvasを使用したHTMLキャンバス）で実行しようとしましたが、（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;
}