Microsoft Edge (IE11の次世代のWebブラウザ) と Webフォント

Microsoftt Edge (IE11の次世代のWebブラウザ) で試してみると otf 形式の Webフォントをスムーズに利用できました。Webフォントに関する振る舞いは IE 11 よりいっそう、他のモダンブラウザに近づいたように見えます。

クロスブラウザで Webフォント

クロスブラウザで Webフォントを使うには
例えば以下のような書き方ができます。
Microsoft Edge (IE11の次世代のWebブラウザ) にも対応しています。


@font-face {
font-family:'myfont';
src: url('myfont.eot'); /* IE9 Compat Modes */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('myfont.woff2') format('woff2'), /* Super Modern Browsers */
url('myfont.woff') format('woff'), /* Pretty Modern Browsers */
url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

「5種類も Webフォントのファイルが必要なのか?! これは無い…」
「もっと良い方法があるはずでは?!」
と考えるところですが、比較的簡潔で意図通りの動作が得られる
という点でスタンダードな解決方法の 1つです。

このように、幅広いブラウザに対応する必要がある場合には
webfont-generator
http://www.fontsquirrel.com/tools/webfont-generator
などを利用させていただくことで、
Webフォントを利用するために必要性のあるファイルを
5種類の全てについて一括で得ることができます。
商用利用も含めて完全に無料で自由な形です。

Webフォントが手元に 1種類ののフォーマットしかなくても
このようなサービスを利用すれば残りのフォーマットを得られます。

一部のブラウザを除外して簡潔に

もし IE 8、Android 4.3 あるいは
それ以下を捨てるならば以下のように短くできます。


@font-face {
font-family:'myfont';
src: url('myfont.woff') format('woff');
}

IE は Edge 以上をのみを対象とし、
Android は捨てないけれど、IE 11 以下はバッサリ切る
場合は以下のような書き方ができそうです。
Microsoft Edge (IE11の次の世代のWebブラウザ) を
眺めていたら、どうも otf をスムーズに扱えるようなので。


@font-face {
font-family:'myfont';
src: url('myfont.otf') format('opentype');
}

Android 4.3 とそれ以下が概ね退役するか、
あるいは IE 11 とそれ以下が退役するか、
将来的にいずれかの状態になれば
Webフォントの扱いが簡単になりそうな気配です。

様々が Webサービスが最新および 1つ前のバージョンまでを
サポート範囲とすることをアナウンスしています。
仮にブラウザのバージョンアップが 2〜3年につき 1回くらいと
考えると、2〜3年後には IE 11 は退役しているのでしょうか。
各々のブラウザが対応している Webフォントの違いを
意識しなくてもよくなるまで後数年かもしれません。

最後に

ちょっとフォントにこだわりたいというだけなのに、
画像化するなり、 Webフォントを使うなり一手間掛かります。

こういう雑事は必要な手段やサービスを知っていても一手間なので、
Webフォントについてあまり知らない場合であれば、
ブラウザによって意図通りの表示が得られなかったり、
予備知識の習得に一時間以上とられるかもしれません。

Webフォントには種類があるらしいけれどよくわからない。

あるいは、ちょっと調べて IE では eot が使えて、
それ以外のブラウザは概ね otf が使えるから
以下のように書けば良さそうな気がするけれど…うまくいかない。


@font-face {
font-family:'myfont';
src: url('myfont.eot');
src: url('myfont.otf');
}

といったような落とし穴 (?) を回避するお役に立てば幸いです。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

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

*