css - @font face只在演示html中显示

好的，所以我从fontsquirell下载了一个@ font-face工具包，它在下载中包含的演示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;
}

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

最佳答案

这是路径的基本问题

将收到的字体复制到根目录下的文件夹中，例如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