文字に綺麗な縁取りを

質問

背景に画像を置いた上に文字を乗せる場合、画像の性質上、場所によって字が読みにくくなることが有ります。
例えば、暗めの画像の上に文を白文字で書いてると、画像の明るい部分に文字が来たときに色が被ってみえにくくなるとか、そういうことです。

なので、それに対処すべく「文字に縁取り」をしたいのですが、いくら探しても「文字に縁取りをするタグ・プログラミング」は見つかりませんでした。
もしかして存在しないのでしょうか？

文字を画像で表現してしまうのは避けたいので、そのようなことが出来るソースコードがあれば、教えてください。

回答No.1

_ae · ベストアンサー

filter:glow(color=#ffffff, strength=2)
みたいなスタイルシートがあります。もろIE独自仕様ですが・・・。

まぁその、可能なら背景を工夫したほうがよいと思います。

回答No.4

N_A_O

下記参照　こんなやり方もあるよ。
http://www.dynamicdrive.com/dynamicindex10/3dtext.htm

<style>
body { background:gray; font-family:; }//fontを記入
div { position:absolute; }
</style>

<!--- Example #2 --->
<style>
.light2 { top:-1; left:-1; color:white; }
.shade2 { top:+1; left:+1; color:white; }
.fill2 { top:0; left:0; color:black; } </style>
<div class=Example2>
<div class="light2"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="shade2"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="fill2"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
</div>

<!--- Example #4 --->
<style>
.light4 { top:-1; left:-1; color:green; }
.light5 { top:-1; left:+1; color:green; }
.shade4 { top:+1; left:+1; color:green; }
.shade5 { top:+1; left:-1; color:green; }
.fill4 { top:0; left:0; color:yellow; } </style>
<div class=Example4>
<div class="light4"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="light5"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="shade4"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="shade5"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
<div class="fill4"><center>ここから以降のページは JavaScript を多用しているため、JavaScript をONにして下さい。</center></div>
</div>

日本語の場合　IE及びネスケはOK。マックのSafariはダメ。

回答No.3

steel_gray

スタイルシート（CSS2）にtext-shadowというプロパティがあります。
が、実際に対応しているのはMacのsafariだけらしいです。→参考URL

今のところは画像化しかなさそうです。（WindowsIEだけでいいなら#1のフィルターもありますが。）

参考URL：

http://www6.plala.or.jp/go_west/nextcss/ref/prp/text/txt_sdw.htm

回答No.2

gaviru44

フリーソフトで「文字作」というのがあります。
画像に縁取り文字を打つことができますよ。
http://www.vector.co.jp/soft/win95/writing/se106108.html

今試しにダウンロードしてみましたが、ちゃんとできました。

＃１さんのは文字の周りを発光させるやつですよね？
これはネスケやマックでは表示されません。
IEもたしか5.5以上でないと…。

参考URL：

http://babu.jp/~osada/