css - 如何正确地将 '?i#efix' 添加到 rails 中的字体路径？

Question

是recommended添加?#iefix到 .eot 字体路径的末尾以修复另一个 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" 黑客？

Answer 1

这就是我在我的元素中使用它的方式。适用于所有浏览器。将它分解为两个 @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 的字体路径，而不是任何以 ?# 开头的内容。但是，如开头所述，请将 IE 的 @font-face 声明分开。要在 SASS helper 中使用，只需将其放在 Assets 名称的末尾即可。它不会中断辅助处理。