@font-face 问题答案

【问题标题】：@font-face issues@font-face 问题
【发布时间】：2011-04-03 08:49:41
【问题描述】：

我在我正在处理的网站上加载自定义字体时遇到了一些问题。

似乎可以在 Chrome 中工作，但仅此而已......

我附上了一个自定义样式表，

<link charset="utf-8" type="text/css" href="http://www.korymathewson.com/fonts/styles.css" rel="stylesheet">

在我写的样式表中：

@font-face {
    font-family: ChunkFiveRegular;
    src: url('Chunkfive-webfont.eot');
    src: local('☺'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
    font-weight: normal;
    font-style: normal;
}

然后我称之为字体系列..

h1.fontface {
    font: 60px/68px 'ChunkFiveRegular', Arial, sans-serif;
    letter-spacing: 0;
}

p.style1, #MainMenu {
    font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif !important;
}

但它仍然没有出现在 Firefox 或 IE 中...您可以提供任何帮助或建议吗？

【问题讨论】：

谢谢，我没有注意到有向上箭头和复选标记。欣赏直率:)

标签： cross-browser css font-face

【解决方案1】：

92p 是什么？一个节点还是一个类？ CSS 类/ID 名称不能以数字开头。

【讨论】：

很好，这是我的输入错误，但实际的样式表不包含 92p... 在上面的帖子中已更正。关于字体的任何想法？

【解决方案2】：

Firefox 仅允许与请求它的站点位于同一域中的嵌入字体。这里有一个（某种）解决方法：

http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing

您可能想尝试使用http://www.fontsquirrel.com/ 让您将字体本身嵌入到 CSS 中——非常有用！

希望对你有帮助

【讨论】：

感谢您的解决方案。我最终同时使用 cufon 来解决问题，因为我没有直接上传文件到他们的远程服务器的访问权限。顺便说一句，答案很好。