Internet Explorer 中的字体

发布于 2024-09-30 15:48:05 字数 884 浏览 9 评论 0原文

我确信我不是唯一一个受此困扰的人，但我似乎找不到解决方案。

@font-face 在 Firefox、Chrome、Safari 中使用 TTF 字体效果非常好。

如下：

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.ttf ) format("truetype");
}

但是，我知道要在 Microsoft 中使用，字体必须采用 EOT 格式，因此我使用对其进行了转换http://ttf2eot.sebastiankippe.com/

我的代码如下所示：

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

但它在 Internet Explorer 中不起作用。我尝试为 src 添加两条不同的行：我尝试使用不同的转换器、不同的字体，但都没有成功。我用的是IE8。

另外，要使用多种自定义字体，我是否需要多个 @font-face 块，或者使用将它们排列起来 font-family、src、 font-family、src 等？

原文

I'm sure I'm not the only one that this has plagued, but I can't seem to find a solution.

@font-face works wonderfully in Firefox, Chrome, Safari with TTF fonts.

as so:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.ttf ) format("truetype");
}

However, I understand that to be used in Microsoft, the font has to be in EOT format, so I converted it using http://ttf2eot.sebastiankippe.com/

And my code looks like this:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: local("Apple Chancery"), url(images/Apple-Chancery.eot), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

but it's not working in Internet Explorer. I've tried putting two difference lines for src: I've tried using a different converter, different font, and all no go. I'm using IE8.

Also, to use multiple custom fonts, do I need multiple @font-face blocks or I use line them up font-family, src, font-family, src, etc.?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵情客 2024-10-07 15:48:05

使用 font squirrel 生成所有文件和代码怎么样？

回复收藏 0 原文

拔了角的鹿 2024-10-07 15:48:05

这可能对你有帮助，

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

This may help you,

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

回复收藏 0 原文

没有伤那来痛 2024-10-07 15:48:05

此页面可能对您有用：http://msdn .microsoft.com/en-us/library/ms530757%28VS.85%29.aspx

特别是这一行：

在 Internet Explorer 8 及更早版本中，仅支持一个 URL 值。

我认为在 IE9 可用之前您尝试做的事情可能无法正常工作。值得获得一份测试版（假设您运行的是比 Windows XP 更新的系统）来测试和确认这一点。

回复收藏 0 原文

我不咬妳我踢妳 2024-10-07 15:48:05

您需要将 IE (eot) 放在单独的一行上，放在其他的之前。

正确的声明是：

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.eot); /* IE */
  src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

但这可能不足以涵盖所有情况，您缺少旧版 chrome 的 svg 字体类型等。我建议使用 fontsquirel.com 的字体生成器，然后选择 Easy 选项查看生成的 css 文件并复制/粘贴代码和转换后的字体文件

You need to put the IE (eot) one on a separate line, before the other ones.

The correct declaration is:

@font-face{ 
  font-family: "Apple-Chancery" ;
  src: url(images/Apple-Chancery.eot); /* IE */
  src: local("Apple Chancery"), url(images/Apple-Chancery.ttf ) format("truetype"); /* non-IE */    
}

But that's probably not enough to cover all the cases, you're missing svg font type for older chromes, etc.. I'd recommend using the font-face generator from fontsquirel.com, choose the Easy option then check out the generate css file and copy/paste the code and converted font files

回复收藏 0 原文