这就是令人沮丧的地方。我得到了 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/