在 azure node js web 应用程序上找不到字体 .woff 404答案

【问题标题】：Font .woff 404 not found on azure node js web app在 azure node js web 应用程序上找不到字体 .woff 404
【发布时间】：2016-07-01 19:40:26
【问题描述】：

我的wwwroot 上有这种字体，如我的 nodejs 应用程序的控制台所示：

我的css 有这个用法：

@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Bold.woff) format("truetype");
    font-weight: bold;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Light.woff) format("truetype");
    font-weight: 300;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-Regular.woff) format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: myFont;
    src: url(resources/font/Montserrat-SemiBold.woff) format("truetype");
    font-weight: 500;
}

html, body{
    font-family: myFont;
    font-weight: 300;
}

它在 localhost 上运行良好，但我从我上传到 azure 的版本中收到此错误。

【问题讨论】：

查看类似的SO问题stackoverflow.com/questions/25452126/…

标签： css node.js azure azure-web-app-service font-awesome

【解决方案1】：

如果使用 Express 框架，请访问 Kudu 工具的控制台https://<your-webapp-name>.azurewebsites.net/DebugConsole 并检查下面的web.config 和server.js 文件。而且我认为您需要在css文件中为网址resources/font/...添加前缀符号/。

图 1. web.config 和 server.js 在路径 wwwroot

图2.web.config中静态内容的重写规则

图3.server.js中的express静态路由配置

【讨论】：

使用自定义发布构建工具的用户请注意，您需要在发布文件夹的根目录中包含 web.config 文件。这样 azure 将从 wwwroot 中提取并放置它。这是针对 CI 流程的：pluralsight.com/courses/…

【解决方案2】：

IIS 服务器节点可能存在无法识别您的字体 mimetype 的问题。要解释如何提供正确的字体，您需要：

使用 KuDo 调试控制台下载您自动生成的 web.config 文件。
将这些行添加到该文件中的适当位置： <configuration> <system.webServer> <staticContent> <remove fileExtension=".otf" /> <remove fileExtension=".woff" /> <mimeMap fileExtension=".otf" mimeType="font/opentype" /> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> </staticContent> </system.websServer> </configuration>

希望这会有所帮助。

【讨论】：