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

Question

好的，所以我从 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;
}

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

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