Question

我有一个运行Angular2的MEAN应用程序用于前端部分，基于Stylus的CSS定义。

编译后，资源位于以下树文件夹中：

DIST
- 后端
- 前端
- 的资源
- - font.woff
- - font.woff2
- - general.css（显然是编译样式）

general.css是从general.styl编译的，即

@font-face
  font-family: retro-computer
  src: url(font.woff2) format(woff2)
  src: url(font.woff) format(woff)

nav
  border-width: 10px
  border-style: solid
  font-family: retro-computer

这似乎是正确的，因为字体的位置在同一个文件夹中，所以相对网址很简单。

为了确保整个服务器中的字体可用，静态路径在后端的app.ts中正确定义。

private config() {
  this.app.set("views", path.join(__dirname, "..", "frontend", "views"));
  this.app.set("view engine", "hbs");

  this.app.use("/scripts", express.static(path.join(__dirname, "..", "frontend")));
  this.app.use("/node_modules", express.static(path.join(__dirname, "..", "..", "node_modules"))); 
  this.app.use("/resources/styles", express.static(path.join(__dirname, "..", "resources", "styles"))); //<-- THIS
}

因此，尝试从http://localhost:8000/resources/styles/font.woff获取字体工作正常，从浏览器下载字体。

主页上也完美地实现了生成的CSS，并且样式包含在Angular2应用程序中。如果我从样式更改导航的背景颜色，边框大小等，则会显示更改的样式。

问题是字体。它没有在Chrome中呈现（在Windows Edge中工作正常，仍未在FF中测试）。我究竟做错了什么？我试过在手写笔文件中玩游戏，甚至直接在生成的CSS中玩，但问题仍然存在。

提前致谢。

Answer 1

好的，发现了问题。关于css中的引号，Chrome似乎有点挑剔，所以使用＆＃34;格式化了。

无法使用Chrome中的@ font-face在Stylus中定义的类中呈现字体

1 个答案: