css - 为什么我的字体文件没有下载没有加载？

Question

我正在使用 webfonts 服务器，我得到了 api 来吐出具有正确 mime 类型的 css。它们也被链接到页面。

@font-face {
    font-family: 'Pagul';
    src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
    src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff')   format('woff'),
         url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
    font-weight: normal; 
    font-style: normal;
}

ttf，eot 文件可以使用链接手动下载，由于某种原因，浏览器没有加载这些字体我在这里做错了什么？字体文件没有正确的 mimetypes 是问题吗？

我也尝试了 font-squirells 语法，它不起作用。PS：Css 是动态生成并添加到头部的？

Answer 1

使用相对路径而不是绝对路径。例如，如果您的 CSS 在 site/css/style.css 中并且您的字体在 site/api/webfonts/static/ 目录中：

@font-face {
  font-family: Pagul;
  src: url('../api/webfonts/static/Pagul.eot');
  src: url('../api/webfonts/static/Pagul.woff') format('woff'),
     url('../api/webfonts/static/Pagul.ttf') format('truetype'),
  font-weight: normal; 
  font-style: normal;
}

或者，使用 Google Fonts 之类的服务，将其 CSS 链接到您的 HTML 或将其直接导入您的 CSS