0

建议添加到.eot?#iefix字体路径的末尾以修复另一个 IE 不稳定行为：

@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声明很重要。

我的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 回答