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

スポンサー

なんてことでしょう！

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

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

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

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

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

もし、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

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。