我已经阅读了本网站以及 www 上其他任何地方的所有相关答案，但我仍然无法让我的字体显示出来。路径正确，文件位于正确的位置，字体松鼠示例有效...
这是在我的 PC 上，其他一切正常(路径、图像、链接...)，根据我阅读和看到的所有内容，它应该可以正常工作，这是我在 CSS 文件中的代码:
body {
background: url('mcontentback.jpg') repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:0;
padding:0;
border:0;
width:100%;
height:100%;
min-width:497px;
text-align:center;
}
@font-face {
font-family: 'bahamasregular';
src: url('../fonts/bahamas-webfont.eot');
src: url('../fonts/bahamas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamas-webfont.woff') format('woff'),
url('../fonts/bahamas-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
@font-face {
font-family: 'bahamaslightregular';
src: url('../fonts/bahamaslight-webfont.eot');
src: url('../fonts/bahamaslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamaslight-webfont.woff') format('woff'),
url('../fonts/bahamaslight-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
a {
color:#369;
}
a:hover {
color:#000;
background:#369;
text-decoration:underline;
}
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: bahamasregular;
}
p {
color:#000;
margin:.4em 0 .8em 0;
padding:0;
font-family: bahamaslightregular;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.fullpage {
min-height:1200px;
}
.fullpage .col1 {
width:96%;
left:2%;
}
img {
max-width:100%;
}
这是我的 HTML5:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>Blaa blaa</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta name="description" content="Blaa blaa">
<meta name="keywords" content="Blaa blaa">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../resourses/css/mcontent.css" media="screen"></head>
<body onload="parent.resizeIframe(document.body.scrollHeight)">
<div class="colmask fullpage">
<div class="col1">
<h1>Blaa blaa!</h1>
<p>Blaa blaa foo blah bla.</p>
<p>Blaa blaa foo blah bla!</p>
</div>
</div>
</body>
</html>
我究竟做错了什么？在 Windows7 上的 IE 11、Firefox 28 和 Comodo Dragon(Comodo 开发)中测试。
最佳答案
您的 CSS 代码中有太多括号，导致字体系列未应用于您网页的任何元素或部分。而且，字体系列周围的引号丢失了。
我认为你应该更正这部分
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
}
{
font-family: bahamasregular;
}
为此
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: 'bahamasregular';
}
p 元素的 CSS 代码中存在同样的错误
同时检查 this clear tutorial on @font-face获取更多信息。此外，正如 Jukka 指出的那样，使用浏览器的开发人员工具检查字体文件是否正在加载。
关于css - @font 在任何浏览器中都不起作用，一切看起来都正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22872336/