IEへの対応が抜けていました、、アイコンフォントをIEでも表示させるために追加したCSS

Internet Explorer

なんてことでしょう!

自分がインターネットエクスプローラーを使わないとはいえ、仕事だったらこんなミスは・・・っていうか、手抜きはしないと思うけど。

IE(インターネットエクスプローラー)でのアイコンフォント(合字)の対応が抜けてたーーー!

ふと、何の気なしに立ち上げたIE・・・

きっと、虫の知らせだね。

ただし、IE9以下では(WindowsXPの方はほとんどIE9以下でしょう)、下図の様に表示されてしまいます。
もし、IE10以上なのに、ご覧のページでページ上に「home」とか「twitter」とか、文字がそのまま表示されていらっしゃる方(下図の様に)は、ページを更新なさるか、キーボードのF5(ファンクション5)を押してくださいませ。IE9以下の場合

もし、IEをアップデートできる場合はアップデートしたほうがセキュリティ上も良いと思いますよ!
Internet Explorer 10 のダウンロード – Microsoft Windows

追加のCSS

以下の部分が抜けていたので、っていうか、配布元のCSSをそのまんま使っていて確認を怠っていました、反省。

  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;

以下が完成CSSです。
参考:アイコンフォントのデメリットを解決する「Ligature Symbols」を使ってみた。 | Oh-Blog

@font-face {
    font-family: 'LigatureSymbols';
    src: url('fonts/LigatureSymbols-2.11.eot');
    src: url('fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}

アイコンフォントでページの重さを解消

IE10以上なら、上図の様に表示されるはず。

参考サイト

フォントの機能を使えるCSS3のFont feature settingsとは
font-feature-settingsプロパティ – CSS3
アイコンフォントのデメリットを解決する「Ligature Symbols」を使ってみた。 | Oh-Blog

One comment Add yours

コメントを残す

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

CAPTCHA