スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

CSSのフォント指定で「Helvetica」を指定した際に、そのサイトをIEで表示できないという致命的なバグがあるようです。

普段、IEなんて使いませんが、たまたまある案件でIEを使用する事がありました。いろんなサイトを何となく閲覧してまわっていたのですが、とあるサイトが表示されないという問題にぶつかりました。

例えば以下のサイトが閲覧できません。
恵比寿 美容室|HELVETICA hair
※あくまで1例です。個人的にもお仕事的にも関連はございません。

「。。。の表示中に問題が発生したため、Internet Explorer は互換表示を使用して Web ページを更新しました。」
というエラーメッセージが表示され、背景や一部画像は表示されますが、テキスト文字は一切表示されません。

いろいろと原因を探していたところ以下の記事がヒットしました。
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ | Oxy notes

また、たまたまはてなブックマークサイトを見ていたら同件の記事をみかけました。
IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA

問題が発生する原因について

問題が発生する条件としては2点です。

ひとつはサイトのCSSのフォント指定で、先頭にHelveticaを設定していることです。
例えばこのように。

font-family: "Helvetica","Arial";

もう1点は、閲覧する側で、Helveticaフォントをインストールしてある状態で、IEで閲覧した場合です。
私のPCの場合、仕事で使用するのでHelveticaフォントがインストール済み状態でした。また、IEのバージョンは9ですが、参考サイトによるとIE10でも改善されていないようです。

問題の解決方法

問題の解決方法としては、サイト側でフォント指定を調整することです。

font-family: "Arial","Helvetica";
font-family: "Arial";

上記のように、Helveticaを先頭で指定しないようにするか、指定から外すようにします。

もう一つ、閲覧側での解決方法ですが、IEのメニューからインターネットオプションを表示して、「全般」タブの「ユーザ補助」を開きます。
helvetica-ie
そこで「Webページで指定されたフォントスタイルを使用しない」にチェックを入れます。
これでひとまずサイトは表示されるようになります。

まとめ

サイトを運営する側からすれば、ページを見る事ができない人を少しでも減らしたいと思うところでしょう。
そういった意味でも、根本的な対策としてサイトのフォント指定を調整する必要があると思います。

それにしても、以前から知っている人は知っていたこのバグ、最新のブラウザIE10になっても改善されていないというのはかなり致命的なような気がします。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search