无法让 @font-face 正常工作

Question

我已经从 font squirrel 下载了一个字体套件，并使用给定的代码创建了一个 css 文件。我将所有 woff、ttf、eot 和 svg 文件复制到我的公用文件夹中，并创建了一个引用我要使用的字体的 h1 代码。然而，当我检查字体是否正常工作时，我只得到标准时间新罗马字体。如果我将备份字体放在我想要使用的字体旁边，我就会得到该字体。有谁知道为什么会发生这种情况？这是我正在使用的代码。

@font-face {
font-family: 'CartoGothicStdBook';
src: url('CartoGothicStd-Book-webfont.eot');
src: url('CartoGothicStd-Book-webfont.eot?iefix') format('eot'),
     url('CartoGothicStd-Book-webfont.woff') format('woff'),
     url('CartoGothicStd-Book-webfont.ttf') format('truetype'),
     url('CartoGothicStd-Book-webfont.svg#webfont1l1oLWSU') format('svg');
font-weight: normal;
font-style: normal;

}
.carto {
font-family: CartoGothicStdBook, Arial;
color: #333333;
font-size: 44px;
letter-spacing: -3px;
}

<h1 class= "carto"><b>Share Your Knowledge & Explore Your Passions<b></h1>

Answer 1

您是从外部样式表导入这些字体吗？
当我将字体放在同一目录中并将 @font-face 声明直接嵌入到我的页面中时（如果适用），我没有遇到任何问题，但似乎我无法链接到相对源。我想知道这是否与许可问题上的所有争论有关。另一件事......我似乎有更好的运气引用带有 '' 的字体，例如：

    ul li:nth-child(6n),#filler {
    color:#3F9;
    font-family:'WCRhesusABtaRegular';
    }

相应的字体是：

        @font-face {
            font-family: 'WCRhesusABtaRegular';
            src: url('WC_Rhesus_A_Bta-webfont.eot');
            src: url('WC_Rhesus_A_Bta-webfont.eot?iefix') format('eot'),
                 url('WC_Rhesus_A_Bta-webfont.woff') format('woff'),
                 url('WC_Rhesus_A_Bta-webfont.ttf') format('truetype'),
                 url('WC_Rhesus_A_Bta-webfont.svg#webfonte627I3xy') format('svg');
            font-weight: normal;
            font-style: normal;

        }

顺便说一句，这是一种用于装饰目的的很棒的字体（如果你想在你的网站上到处使用 Jackson Pollack 的话），而不是阅读这么多:)

希望如果您遇到更多问题这会有所帮助...如果您确实找到了导入字体样式表或将字体放在单独目录中的方法，我当然想听听...我无法在网络上找到任何人导入字体的示例...但我看到人们使用 /Fonts 目录。这也可能是与许可相关的项目？

哦，对于那些刚刚开始使用 @font-face 的人来说，还有一个简短的说明（我自己也刚刚开始）……Paul Irish 提到了一些“陷阱”，但您应该确保字体不是本地安装的，因为您的浏览器将使用本地字体（如果可用） - 这使得您的测试不可靠...当然，卸载字体并不太困难（至少在 Windows 7 中）。

以下是 Paul Irish 提供的更多信息：

http://paulirish.com/2010/字体-face-陷阱/#comment-48744

Answer 2

答案已在上面列出，这是一个简单的目录问题。 Rails 需要前导 / 来添加目录。