我的CSS文件中有此代码,但浏览器不显示字体:
@font-face {
font-family: 'font';
src: url("fonts/FS_Metal.ttf");
}
.menu_head {
width: 100%;
position: relative;
height: 30px;
font-family: 'font';
}
答案 0 :(得分:4)
这应该是crossbrowser
@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/ ...它将为您完成所有工作
还要检查字体文件的路径是否正确
答案 1 :(得分:1)
这是由src: url("fonts/FS_Metal.ttf");
这条线引起的。您需要确保相对路径正确。或者,您可以使用绝对路径。
说你的目录结构如下:
目录结构:
index.html
css/
js/
fonts/
@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