web-dev-qa-db-ja.com

@ font-face src URLをオーバーライドしますか？

BootstrapでFontAwesomeを使用しています。ただし、カスタムミニファイアでFAを使用しようとすると、ミニファイされたURL構造の設定方法が原因で、相対パスからフォントが読み込まれ、404が返されます。

したがって、これを修正する最善の方法は、FontAwesomeのフォントが使用する@ font-face srcURLをオーバーライドするCSSファイルをミニファイリストに追加することであると考えました。基本的に、FontAwesomeから@ font-face定義をコピーし、絶対URLの場所を指定しました。

ただし、正しいURLがフォントをロードし、FontAwesome CSSから最初に指定されたURLが試行されます（以前と同じ404エラーが発生します）。

何か間違ったことをしているのでしょうか、それとも@ font-face src URLをオーバーライドして、「アップストリーム」定義が完全に無視されるようにする方法が本当にないのでしょうか。

cssfont-awesome
24
Mason G. Zhwiti

基本CSSクラスのfont-familyを単純にオーバーライドします。

.fa {
  font-family: 'FontAwesome2' !important;
}

次に、フォント定義を貼り付け/含めて編集します。

@font-face {
  font-family: 'FontAwesome2';
  src: url('//Host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
  ...
  font-style: normal;
}
13
Xander

更新：以下の「解決策」は実際には機能しませんでした...実際にはタイプミスがありましたが、その後のテストでは、これはまだ根本的な原因ではなく、まだ問題に直面しています。

解決策は、@ font-faceをオーバーライドするときは非常に注意し、元の@ font-faceで使用されているものと同じ形式をすべて提供するようにすることです。それ以外の場合、ブラウザはそれを別の定義と見なし、オーバーライドするのではなく、両方で参照されているファイルをダウンロードしようとします。

これがFontAwesomeのCSSでの定義で、最初に参照されます。

_@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), 
    url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), 
    url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}
_

そして、オーバーライドしようとしたときに、誤って「format（ 'svg'）」定義を削除しました。

_@font-face {
  font-family: 'FontAwesome';
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
_

format('truetype')定義を追加すると、404をもたらす追加のヒットは発生しなくなりました。

3
Mason G. Zhwiti