无法让@ font-face正常工作

时间:2011-03-12 20:21:12

标签: css fonts font-face

我从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>

2 个答案:

答案 0 :(得分:0)

您是从外部样式表导入这些字体的吗? 当我将我的字体放在同一个目录中并在我的页面中直接嵌入@ 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(我刚刚开始自己​​)的人来说,哦,快速说明......保罗·爱尔兰提到了一些“陷阱”,但是你应该确保字体不是本地安装的,因为您的浏览器将使用您的本地字体(如果可用) - 这会使您的测试不可靠......当然,卸载字体并不太难(至少在Windows 7中)。

以下是Paul Irish的更多信息:

http://paulirish.com/2010/font-face-gotchas/#comment-48744

答案 1 :(得分:0)

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