CSS Font Border?

Question

さらに

ソース非AMP版編集

CSS Font Border?

CSS3のボーダーの新機能(-webkit, ...)により、フォントにボーダーを追加することが可能になりましたか？(青いTwitterロゴの周りにある白のボーダーのように)。そうでない場合、CSS/XHTMLでこれを実現するためのあまり醜くないハックがあるのでしょうか、それともPhotoshopを起動する必要があるのでしょうか？

user2441511

編集された質問 24日 10月 2016 в 4:18

プログラミング

fonts css

3日 4月 2010 в 10:35

10 ビュー

David Thomas · Answer 1 · 2010-04-03T10:51:55+00:00

cssのtext-shadow（または-webkit-text-shadow/-moz-text-shadow）と非常に低いブラーを使用して、テキストストロークを emulate することができます。

#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 プロパティよりも広く利用できますが、ユーザーの大部分が利用できるかどうかは疑問です。

andsve · Answer 2 · 2010-04-03T10:44:21+00:00

andsve

ソース非AMP版編集

text-stroke'というプロパティがあるようですが、(少なくとも私は)Safariでしか使えません。

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

17

0

解説 (3)

xandy · Answer 3 · 2010-04-03T10:43:03+00:00

私はかつて、css3で角丸やドロップシャドウをやろうとしたことがあります。後になって、まだサポートが不十分であることを知りました（もちろん、Internet Explorer(s)です！）。

結局、JS（IE Canvasを使ったHTML Canvas）でやろうとしましたが、パフォーマンスにかなり影響します（私のC2Dマシンでさえも）。要するに、どうしても効果が必要な場合は、JSライブラリを検討する（ほとんどのものはIE6で動作するはずです）が、パフォーマンスの問題からやりすぎないようにしましょう。それでも代替手段が必要な場合は...SFiRを使って、PSしてSFiRするという方法があります。CSS3は今日では間に合いません。