0

さらに別の IE の不安定な動作を修正するために、.eot フォント パスの末尾に追加することをお勧めします。?#iefix

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

を使用してそれを行うことは可能ですasset_pathが、醜い + "?#iefix" ハックはありませんか?

4

3 に答える 3

2

これが私のプロジェクトでの使用方法です。すべてのブラウザでうまく機能します。@font-face宣言を 2 つに分割することが重要です。

私のfonts.scss：

@font-face {
  font-family: 'Webfont';
  src: font_url('webfont.eot?') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Webfont';
  src: font_url('webfont.woff') format('woff'),
       font_url('webfont.ttf') format('truetype'),
       font_url('webfont.svg#Webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

SASS ヘルパーを使用する場合は、ディレクトリfont_urlの下にフォントを配置する必要があることに注意してください。assets/fonts

?私の経験から、 > = IE8のフォントパスに追加するだけで、何かを開始するのではなく?#動作します。ただし、冒頭で述べたように、@font-faceIE の宣言は別にしてください。SASS ヘルパーで使用する場合は、アセット名の末尾に配置するだけです。ヘルパー処理を中断しません。

于 2012-10-25T20:07:35.547 に答える
0

これを試してください：

重要： フォント名がすべての場所で正しく追加されていることを確認してください。また、すべてのフォントフェイスファイルが利用可能かどうかを確認してください。

Production.rbに追加：

config.host_path = "http://---site url--"

CSSに以下を追加します。

@font-face {
    font-family: 'Webfont';
    src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot');
    src: url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.eot?#iefix') format('embedded-opentype'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.woff') format('woff'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.ttf') format('truetype'),
         url('<%= Rails.application.config.host_path %>/assets/fonts/Webfont.svg#Webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

ハードコードされたフォントファイルのパスが必要ない場合は、cssで次を使用してください。

@font-face {
    font-family: 'Webfont';
    src: url('Webfont.eot');
    src: url('Webfont.eot?#iefix') format('embedded-opentype'),
         url('Webfont.woff') format('woff'),
         url('Webfont.ttf') format('truetype'),
         url('Webfont.svg#Webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

フォントファイルにアクセスするには、完全なURLパスを指定する必要があります。お役に立てば幸いです。

于 2012-10-27T13:04:34.393 に答える
0

これはasset_path すでに考慮されているようです。そう：

asset_path 'webfont.eot?#iefix'

すぐに使用できます。私の悪い...

于 2012-10-29T08:14:29.860 に答える