Question

好的，所以我从fontsquirell下载了@ font-face工具包，它在下载中包含的demo html文件中工作正常，但是当我将它放在任何其他文件或子文件夹中时无法呈现。

我检查了文件结构并相应地链接，我仍然遇到这个问题。关于我应该做什么的任何建议？

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

相同的格式适用于其他字体，不知道为什么它不能用于此。

Answer 1

路径的基本问题

将收到的字体复制到根目录下的文件夹中，然后复制font。

然后指向您的CSS以相对模式（如

）读取文件

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

更新

您定义相对路径的方式是错误的

将..assets更改为../assets

@font只能在demo html中显示

1 个答案:

更新