前のブログで書いたのですが、文字の縁取りを設定したら、Firefox、IE、Operaでは問題なく、Chrome、Safariでは、縁取りが太くなって、かっこわるくなってしまいました。
元々、
株式会社LIG(リグ)｜DX支援・シス...
IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 | 株式会社LIG(リグ)｜DX支援・システム...
どうもですはやちです(ノ)◜ω◝(ヾ) 『龍が如く維新』にハマっている間に『戦国無双4』が発売され、ちょいと詰み気味になっております。
を参考に、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の対策です。
コメント