Question

我仍然是html和css的新手，所以我可能会忽略一些事情。一直在尝试创建一个小网站，并在其中嵌入字体。它在Firefox中工作，但在互联网探索它不是。我不知道其他浏览器。这是该网站的链接。单击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;
}

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

2 个答案: