【问题标题】:font-face not working in IE 10字体在 IE 10 中不起作用
【发布时间】:2012-11-13 17:01:14
【问题描述】:

我绝对没有成功让 IE 10 显示自定义字体。还有其他人对此有解决方案吗?我可以在网上看到一些喊话,说其他人在 IE 10 中的字体有问题,但没有找到解决方案或确认的错误。

任何有相同经验或解决方案的人?

这就是我现在所拥有的,它在 IE 10 之前,Chrome 和 Safari 中运行良好:

@font-face {
    font-family: "LCD";
    src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}

<!--[if IE]>
<style type="text/css">
@font-face {
    font-family: "LCD";
    src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->

我尝试用 woff、ott 等其他格式的字体文件替换,但完全没有运气。

暗示字体松鼠的答案使它工作。 现在工作标记(对于 IE 10)是:

@font-face {
    font-family: "LCD";
    src: url('/Public/Fonts/quartz_regular-webfont.eot');
    src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
         url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
         url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

【问题讨论】:

标签: font-face internet-explorer-10


【解决方案1】:

由于 HTML cmets 和样式元素,我假设这是在 HTML 文件中...如果不是,请查看。

除此之外,只需使用@font-face generator

【讨论】:

  • 谢谢,使用 font-squirrel 并使用生成的 HTML 来制作它(最终在 IE 10 中工作)。
  • 字体生成器的问题是我讨厌使用 Adob​​e 字体。 :(
  • 面部生成器的另一个问题是我的字体在处理后略有不同。线高和垂直基线似乎都发生了变化。它在 IE 10 中确实有效,但由于它弄乱了我的所有布局,因此无法使用。
  • @M Katz 在阅读了可访问性技术w3.org/WAI/WCAG20/quickref 后,我刚刚重新审视了这一点.我怀疑如果行高和垂直基线偏移弄乱了您的布局,您可能需要重新考虑布局的“严格性”(我来自印刷设计背景,曾经有相同的感觉)。
  • 字体生成器为我工作。添加了 IE 使其工作所需的所有额外 gubbins,并使其在其他浏览器中正常工作。最重要的提示!
【解决方案2】:

如果启用安全模式,IE10 是否可能不呈现 Web 字体?停用(互联网选项 - 安全)后,我的网站正确显示...

【讨论】:

  • 或许可以改为评论?
  • 这是我在查看下载的网络图标时遇到的一般问题的解决方案。
  • 是的,我以前遇到过这个问题。我可能就是这样。
【解决方案3】:

我的 font-squirrel @font-face 可以在除 IE 之外的所有东西中使用,但我的问题是 .woff 是我服务器上的 IIS mime-types 中唯一没有包含的东西。这可能会对同样解决这个问题的人有所帮助。

【讨论】:

    【解决方案4】:

    我刚遇到一位客户报告说他无法在他的网站上看到网络字体。最后,默认情况下“高”安全级别(在 IE 选项中)会阻止 Web 字体。您可以创建一个基本上为“高”但仍启用网络字体的自定义安全级别。或者只是把它调低到中高。

    【讨论】:

      【解决方案5】:

      字体在 IE 10 上未更新 -> reference ,您可以使用相同的 IE-9

      你可以学习如何使用 font-face here

      我认为你包括所有类型的字体...

      【讨论】:

      • 感谢 Mahdi,但这并不能解释为什么在我尝试过的任何计算机上的 IE 10 中都没有显示自定义字体?
      • 我用 IE 测试器测试它的工作。你能用IE测试仪测试吗
      • -Mahdi 没有尝试过,但正如您在我编辑的问题和亚当的回答中看到的那样,我找到了使其在 IE 10 中工作的正确标记。非常感谢您的帮助进入 IE 测试器 :-)
      【解决方案6】:

      我在这里使用了这个: http://www.impressivewebs.com/ie10-css-hacks/

      更具体地说:

      @media screen and (min-width:0\0) {  
          /* IE9 and IE10 rule sets go here */  
      }
      

      通过使用它,我们可以弹出一个不错的替代字体,并且在其他具有开放字体的浏览器中仍然具有性感。

      在此处尝试字体: http://cssfontstack.com

      【讨论】:

        【解决方案7】:

        必须补充一点,字体生成器不能为 all 字体修复此问题。例如,当使用 Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) 字体时。我在网站上使用多种字体。它们都使用字体生成器,除了 Helvetica-font。

        【讨论】:

        • Helvetica Neue 由于命名语法,有充分记录的跨平台问题。我不记得所有细节,但它类似于使用“HelveticaNeue”命名约定的 Windows 和使用“Helvetica Neue”的 Mac。我知道这主要适用于使用本地安装的字体,但由于您的问题出在 Helvetica Neue 上,因此值得回顾现有的研究……您可能还可以幸运地使用为每个访问者提供正确内容的 CDN(例如 Google Web Fonts,即使他们没有 HN)
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-08-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-11-29
        • 2018-06-08
        • 2017-05-10
        相关资源
        最近更新 更多