1

这就是令人沮丧的地方。我得到了一个 Sansation 的字体包，然后尝试将它与@font-face 一起使用。普通版有效，而“粗体”版则无效。我检查了文件名，它绝对是正确的。我的理解是任何字体都应该有效。我错过了什么吗？

@font-face
    {
        font-family: sansation_regular;
        src: url('/fonts/sansation_regular-webfont.ttf'),
            url('/fonts/sansation_regular-webfont.eot');
    }

然后，我在不更改与文本元素对应的 CSS 中的 font-family 的情况下，将其更改为：

@font-face
    {
        font-family: sansation_regular;
        src: url('/fonts/sansation_bold-webfont.ttf'),
            url('/fonts/sansation_bold-webfont.eot');
    }

感谢您的任何帮助。

4

4 回答 4

1

您可能还应该通过 FontSquirel 运行字体以获取完整集 http://www.fontsquirrel.com/tools/webfont-generator

它将生成的 CSS 类似于：

/* fonts */
@font-face {
font-family: 'sansation_regular-webfont';
src: url('../fonts/sansation_regular-webfont.eot');
src: url('../fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_regular-webfont.woff') format('woff'),
url('../fonts/sansation_regular-webfont.ttf') format('truetype'),
url('../fonts/sansation_regular-webfont.svg#sansation_regular-webfont') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'sansation_bold-webfont';
src: url('../fonts/sansation_bold-webfont.eot');
src: url('../fonts/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sansation_bold-webfont.woff') format('woff'),
url('../fonts/sansation_bold-webfont.ttf') format('truetype'),
url('../fonts/sansation_bold-webfont.svg#sansation_bold-webfont') format('svg');
font-weight: normal;
font-style: normal;
}

另外我会避免使用完整的 ULR refs - 只需从 css 文件中检查字体文件夹的路径是否正确

于 2013-04-18T09:06:17.940 回答
0

作为@DOLOisSOLO 和@Mr。Lavalamp 建议，绝对路径应该可以工作。

为了将来参考，您的 CSS 文件是否在文件夹中？如果是这样，则可以使用相对路径 URL，例如：

@font-face
{
    font-family: sansation_regular;
    src: url('../fonts/sansation_regular-webfont.ttf'),
        url('../fonts/sansation_regular-webfont.eot');
}

每次代表上一级的点。

于 2013-04-18T09:01:06.257 回答
0

我已经用@font-face 测试了 Sansation，当安装为系统字体时，常规和粗体版本似乎都可以工作。也许仔细检查路径？

于 2013-04-18T05:45:19.617 回答
0

如果使用本地文件目录不起作用，请尝试使用绝对路径。以下解决方案有效：

@font-face
    {
        font-family: sansation_regular;
        src: url('http://www.siteAddress.com/fonts/sansation_bold-webfont.ttf'),
            url('http://www.siteAddress.com/fonts/sansation_bold-webfont.eot');
    }
于 2013-04-18T05:52:27.303 回答