Webフォントで文字化けしたときのよくある原因と対処法 | Webデザインのタネ
ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップしていない CSSで「ここがフォントファイルの場所」と教えているのに、その先にフォントファイルがない場合に□となります。 ChromeやFirefoxの開発ツールではネットワークタブで404のステータスコードが返ってきますね。 自分でデザインをしていると、グラフィックソフトでWebフォントを利用するときにフォントファイルをインストールしていると、なかなか気付きづらいです。 対処法 CSSでフォントファ
【css】Webフォント、ローカルフォントの指定方法 at softelメモ
Webフォントやローカルにあるフォントファイルを使ってテキストを表示したいときは、以下のような書き方になる。 @font-face { font-family: 'MyFont'; src: url(/location/of/font/myfont.ttf); } body { font-family: MyFont; } @font-face { font-family: 'MyFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: local('myfont Regular'), /* フォントがローカルにインストールされている場合に有効 */ url('webfont.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */ url('webfont.wo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
