字体嵌入：这里有什么问题？

Question

我对 html 和 css 还是很陌生，所以我可能会忽略一些事情。 一直在自娱自乐地尝试创建一个小网站并最终将字体嵌入其中。 它在 Firefox 中运行，但在 Internet Explorer 中却不是。我不知道其他浏览器。 这是该网站的链接。点击 L 进入第二页： http://librarchive.com/newcat.html。 如您所见，因此也存在一些定位错误。

所以字体不能正常工作。我该怎么办？

这是我的 css 代码，我有一个 .eot 和 .ttf 字体文件：

@font-face{ 
font-family: libralust; 
src: url('Futura_Bk.eot'); /* For IE */ 
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */ 
}

body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}

我一直在寻找，但经验不足，无法理解所有内容。 关于网站的其他评论也很受欢迎。感谢您的帮助！

Answer 1

这是fontsquirel 建议的跨站点字体嵌入示例

@font-face {
    font-family: 'OpenSansLight';
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

现在你可以找出问题所在了吗？

我会指出另一个提示：本地

如需详细说明，请阅读：the-new-bulletproof-font-face-syntax 和/或bulletproof-font-face-implementation-syntax

Answer 2

并非所有浏览器都支持Font-Face，并且有很多字体扩展；比如eot、svg、woff、ttf。

试试这个，因为你只有 eot 和 ttf：

@font-face{ 
    font-family: libralust;
    src: url('Futura_Bk.eot');
    src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
    url('Futura_Bk.ttf') format('truetype');
    font-weight: normal; /* thin? normal? bold? */
    font-style: normal;
}