Question

我已经阅读了这个网站以及www上其他地方的所有相关答案，但我仍然无法让我的字体显示出来。路径是正确的，文件在正确的位置，字体松鼠示例工作...

这是在我的电脑上，其他一切工作（路径，图片，链接...）根据我所阅读的所有内容，看到它应该有效，这是我在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）。

Answer 1

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';
}

您的CSS代码中的p元素

存在同样的错误

另请查看this clear tutorial on @font-face了解详情。此外，正如Jukka指出的那样，使用浏览器的开发者工具检查字体文件是否正在加载。

Answer 2

首先，问题不止一个问题：为什么它在IE中不起作用并不是100％清楚，因为我在用IE测试之前尝试了一些解决方案，但是MF82指出了可能在IE中解决它的问题。至于Firefox，似乎很多人都有这个问题。这适用于本地PC，而不是服务器！这对我有用：

在Firefox中，本地文档可以访问同一目录和子目录中的其他本地文档，但不能访问目录列表。

Firefox的prefs.js文件中的“security.fileuri.strict_origin_policy”设置负责，请阅读：MozillaZene's description

据我所知，它不完全正确，因为将字体文件移动到与css文件相同的目录中，并且适当地更改css文件中的路径语句仍然无效，但更改设置确实解决了问题

以下是更改“security.fileuri.strict_origin_policy”设置的方法：Editing prefs.js in Firefox双击该设置会将其值从“False”更改为“True”。

缺点是你打开了要遍历的文件系统，所以我建议你反转这个过程，一旦你知道一切正常，只有在需要查看字体然后再将其更改时才更改设置。也许这将在未来版本的Firefox中修复。

@font无法在任何浏览器中工作，一切正常

2 个答案: