- ベストアンサー
フィルタータグでフォントが変わる問題について
- フィルタータグを使用すると、HTMLからXHTML+CSSに書き換えている趣味のサイトでフォントが変わってしまう問題が発生しています。
- 背景画像が目立つ場合には読みにくくなるため、テキスト部分にフィルターをかけようとしました。しかし、フィルターを使用することで数字のフォントが違って表示されるようになりました。
- ブラウザや書き方の影響かと思い、異なる環境で表示を比較しましたが、結果は変わりませんでした。この問題の原因と解決策について教えていただけないでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
div のなかの p でフォントを換えるたり色々やったり ie8 で検証してみたよ。 sans-serif を指定すると、英数文字が arial で日本語文字が "MS PGothic" になるみたい。 arial は標準でアンチエリアス有効で、"MS PGothic" は、大きな文字のとき以外は無効だから、 『アンチエリアスが無効なフォントを選ぶ』 が回答かな。。。 やっぱり ie は filter:alpha(opacity=透明度); を使わないで、 条件付コメント構文で個別対応がいいかも。 http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> h2 { font-size:100%; font-family:Meiryo,IPAexGothic,sans-serif; } h2 { margin-bottom:0; } p { margin-top:0; } </style> </head> <body> <h2>sans-serif</h2> <div> <p style="font-family:sans-serif">0123456789<br/> いろはにほへとちりぬるを<br/> The quick brown fox.</p> </div> <h2>MS PGothic</h2> <div> <p style="font-family:'MS PGothic';">0123456789<br/> いろはにほへとちりぬるを<br/> The quick brown fox.</p> </div> <h2>filter:alpha(opacity=50); の中の sans-serif </h2> <div style="filter:alpha(opacity=50);"> <p style="font-family:sans-serif;">0123456789<br/> いろはにほへとちりぬるを<br/> The quick brown fox.</p> </div> <h2>sans-serif と arial の文字列を重ねて比べてみる(IE一致)</h2> <div style="posision:relative;"> <p style="font-family:sans-serif;position:absolute;">0123456789<br/> いろはにほへとちりぬるを<br/> The quick brown fox.</p> <p style="font-family:arial;position:absolute;">0123456789<br/> いろはにほへとちりぬるを<br/> The quick brown fox.</p> <p style="visibility:hidden;"><br/><br/><br/></p> </div> </body> </html>
その他の回答 (1)
- dscripty
- ベストアンサー率51% (166/325)
確認したけど Font が変わるというというよりは、Font のアンチエリアスが無効になって、Font のヒント情報をメインに Font 形状が形成されたように感じたよ。 これは、まったく根拠のない想像だけど、アンチエリアスの機能と filter: alpha(opacity=70); の機能が衝突しているんじゃないかな？
お礼
回答ありがとうございます。 少なくともタグの落ちではなさそうだということですね？ しかし、もしアンチエイリアスとフィルターが衝突しているとすると回避策等はあるのでしょうか？ XHTMLに書き換える前もフィルターは使っていましたが、こんなことは初めてです。 一体なにが原因なんでしょうね。
お礼
いろいろ検証して頂き、ありがとうございました。 お手数かけてすみません(^_^; 私のうろ覚えですが、確かフィルター機能って元々はIEでしか使えない機能でしたよね。 それなのになんでこういう現象が出るのかちょっと不思議です。 文字コードをutf-8にしているのも関係しているのかもしれませんが。 とにかく現状ではdscriptyさんのおっしゃるように個別対応が一番かもしれませんね。 回答ありがとうございました。