我有一个前端部分运行 Angular2 的 MEAN 应用程序,具有基于 Stylus 的 CSS 定义。
编译完成后,资源在如下目录树中:
- 分布
- 后端
- 前端
- 资源
- 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
这似乎是正确的,因为字体的位置在同一个文件夹中,所以相对 url 很简单。
为了确保字体在整个服务器上可用,在后端的 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 app中。如果我从样式更改导航的背景颜色、边框大小等,则会显示更改后的样式。
问题是字体。它不会在 Chrome 中呈现(在 Windows Edge 中工作正常,仍未在 FF 中测试)。我究竟做错了什么?我试过在手写笔文件中绕过路径,甚至直接在生成的 CSS 中,但问题仍然存在。
提前致谢。
最佳答案
好的,找到问题了。 Chrome 似乎对 css 中的引号有点挑剔,所以使用 "作为格式就可以了。
关于css - 无法在 Chrome 中使用 @font-face 在 Stylus 中定义的类中呈现字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40408801/