文字の縁取りについて・・・
前のブログで書いたのですが、文字の縁取りを設定したら、Firefox、IE、Operaでは問題なく、Chrome、Safariでは、縁取りが太くなって、かっこわるくなってしまいました。
元々、
http://liginc.co.jp/web/html-css/css/70065
を参考に、IE、Firefox,Chrome、Safariに対応するように記述したのですが、上記のサイトそのままなのですが、下記のように記述しました。
| /*————-文字縁取り ———*/ filter:dropshadow(color=#02258a,offX= 0,offY=-1) dropshadow(color=#02258a,offX= 1,offY= 0) dropshadow(color=#02258a,offX= 0,offY= 1) dropshadow(color=#02258a,offX=-1,offY= 0); -webkit-text-stroke-color: #02258a; -webkit-text-stroke-width: 1px; text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px, #02258a 1px -1px 0px, black -1px -1px 0px; |
太くなるなら、Safari、Chromeの部分の記述Webkitの部分を細くしてやれ！と思って、1pxから0.5pxってやってみたら、Chromeとかはいい感じになったのですが、次は、Operaの縁取りが細くなりすぎて、スマホだとよく見えなくなってしまいました。
僕の結論としては、text-shadowだけの記述にした方が、上記の問題が起きないってことで-webkitの部分は削除しました。ってことで下記のように変更
| /*————-文字縁取り ———*/ filter:dropshadow(color=#02258a,offX= 0,offY=-1) dropshadow(color=#02258a,offX= 1,offY= 0) dropshadow(color=#02258a,offX= 0,offY= 1) dropshadow(color=#02258a,offX=-1,offY= 0); text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px, #02258a 1px -1px 0px, black -1px -1px 0px; |
ちなみに flterと、dropshadowは、IE8,9の対策です。