文字の縁取りについて・・・

前のブログで書いたのですが、文字の縁取りを設定したら、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の対策です。

 

 

Track Back

Track Back URL

コメントする

※ コメントは認証されるまで公開されません。ご了承くださいませ。

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)

このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

icon icon

 

マウスコンピューター/G-Tune マウスコンピューター/G-Tune Microsoft Store (マイクロソフトストア) Microsoft Store (マイクロソフトストア)

サイト内検索

にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ ネットワーク・SEへ
にほんブログ村

最近のピクチャ

  • font_before.png
  • MOM_error.png

最近のコメント