IE7でfilterを指定すると文字が細くなる

IE7でスタイルにfilter(半透明にしたいときなどに使用)を指定すると、文字が細くなってみえる場合があります。

単にfilterに何かを設定しただけでその現象となるようです。opacity=100や、JavaScriptでelement.style.filter = nullでも発生します。

なお、フォントによって現象がまちまちのようです。

→Blogへ戻る

font-family: Verdana, sans-serif; filter: alpha(opacity=100)

あいアイ哀12azAz!-

あいアイ哀12azAz!-

<p style="width: 50%; font-family: Verdana, sans-serif;">あいアイ哀12azAz!-</p>
<p style="width: 50%; font-family: Verdana, sans-serif; filter: alpha(opacity=100);">あいアイ哀12azAz!-</p>

font-family: 'ＭＳ Pゴシック', sans-serif; filter:

あいアイ哀12azAz!-

あいアイ哀12azAz!-

<p style="width: 50%; font-family: 'ＭＳ Pゴシック', sans-serif;">あいアイ哀12azAz!-</p>
<p style="width: 50%; font-family: 'ＭＳ Pゴシック', sans-serif; filter:">あいアイ哀12azAz!-</p>

font-family: 'ＭＳ ゴシック', sans-serif; filter:

あいアイ哀12azAz!-

あいアイ哀12azAz!-

<p style="width: 50%; font-family: 'ＭＳ ゴシック', sans-serif;">あいアイ哀12azAz!-</p>
<p style="width: 50%; font-family: 'ＭＳ ゴシック', sans-serif; filter:">あいアイ哀12azAz!-</p>

JavaScriptでstyle.filterにnull指定

あいアイ哀12azAz!-

あいアイ哀12azAz!-

<p style="width: 50%; font-family: Arial, sans-serif;">あいアイ哀12azAz!-</p>
<p id="target" style="width: 50%; font-family: Arial, sans-serif;">あいアイ哀12azAz!-</p>
<script type="text/javascript">
  var target = document.getElementById('target');
  target.style.filter = null;
</script>

エフェクト

あいアイ哀12azAz!-

あいアイ哀12azAz!-