web-dev-qa-db-ja.com

CSSフォント枠？

新しいCSS3ボーダーのすべて（-webkit、...）が行われているので、フォントにボーダーを追加することが可能ですか？ （青いTwitterロゴの周囲の白い実線のように）。そうでない場合は、CSS/XHTMLでこれを達成するためのあまりにも醜いハックはありますか、それともPhotoshopを起動する必要がありますか。

cssfonts
425
Lars Tackmann

正しい答えは：

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

これは、4つの側面から4つの同じタイプの影を設定します。

888
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

はい、古い質問です。

しかし...誰かがこれを必要とし、コードの入力が嫌いな場合は...

これはCrossBrowserをサポートする2pxの黒いボーダーです（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;
134
user950658

CSS text-shadow（または-webkit-text-shadow/-moz-text-shadow）と非常に低いぼかしを使用して、おそらく emulate text-strokeを使用できます。

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

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

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

少ないミックスインでフォント文字をストロークする

これがストロークを生成するための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を使用するピクセルクラスの回答に基づいています）

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

私はそれをJS（IE Canvasを含むHTMLキャンバス）でやろうとしましたが、（私のC2Dマシンでさえ）パフォーマンスに大きな影響を与えます。つまり、本当に効果が必要な場合は、JSライブラリを検討してください（それらのほとんどはIE6上で実行できるはずです）。ただし、パフォーマンスの問題のためにやり過ぎないでください。それでも代替手段が必要な場合は、SFiRを使用してからPS PSとSFiRそれを使用できます。 CSS3は今日準備ができていません。

0
xandy