浏览器未显示正确的字体答案

【问题标题】：Browser is not displaying the correct font浏览器未显示正确的字体
【发布时间】：2013-03-25 19:32:40
【问题描述】：

我的 CSS 文件中有这段代码，但浏览器不显示字体：

@font-face {
    font-family: 'font';
    src: url("fonts/FS_Metal.ttf");
}

.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'font';
}

【问题讨论】：

试试：font-family: font
我试过ie，chrome和firefox，同样的问题
最佳猜测：Why Can I Not Implement @font-face? 的副本
你确定“fonts”目录和CSS文件是同级的吗？
我不知道你的目录结构是什么，但我认为你应该试试src(../fonts/FS_Metal.ttf)

标签： html css fonts

【解决方案1】：

这应该是跨浏览器

@font-face {
    font-family: 'your_font';
    src: url('../font/your_font.eot');
    src: url('../font/your_font.eot') format('embedded-opentype'),
         url('../font/your_font.woff') format('woff'),
         url('../font/your_font.ttf') format('truetype'),
         url('../font/your_font.svg#your_font') format('svg');
}

.menu_head {font-family:'your_font',serif;}

我正在使用http://convertfonts.com/ ...它将为您完成所有工作

还要检查字体文件的路径是否正确

【讨论】：

【解决方案2】：

这是由于src: url("fonts/FS_Metal.ttf"); 这一行。您需要确保相对路径正确。或者，您可以使用绝对路径。

假设你的目录结构如下：

目录结构：

index.html
css/
js/
fonts/

使用相对路径在您的 css 文件中执行以下操作：

@font-face {
    font-family: 'font';
    src: url("../fonts/FS_Metal.ttf");
}

使用绝对路径来做到这一点

@font-face {
    font-family: 'font';
    src: url("http://yoursite.com/fonts/FS_Metal.ttf");
}

我也建议你看看Google Webfonts API

【讨论】：

这是正确的目录 index.html cssfile.css fonts/