html - 某些字体不适用于@font-face?

标签 html css font-face

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

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

然后,我在不更改文本元素对应的 CSS 中的字体系列的情况下,将其更改为:

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

感谢您的帮助。

最佳答案

您可能还应该通过 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 引用 - 只需检查 css 文件中字体文件夹的路径是否正确

关于html - 某些字体不适用于@font-face?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16075187/

相关文章:

html - font awesome 图标只是一个正方形

javascript - JQuery Mobile 创建了错误的 HTML 代码

html - 当 ul 只有一个 li 标签时隐藏 ul 和 li 标签

CSS Helvetica Neue 不工作

html - 为什么 IE1 0's "IE8 标准模式与 IE9 的不同?

svg - 是否可以从命令行从 SVG 创建字体 (TTF)?

php - 传感器数据直播

html - content 属性在 Firefox 中不起作用,但在 chrome 中却起作用?

html - 关于如何将黑色外部 div 的元素居中的任何想法?并使它们在尺寸上有反应?

css - 更改 WordPress 中的产品格式