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

Question

我的 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 上上传的版本中收到此错误。

Answer 1

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

图 1. web.config & server.js 路径 wwwroot

图2. web.config

中静态内容的重写规则

图 3. server.js

中的快速静态路由配置

Answer 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>

希望对您有所帮助。

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

Font .woff 404 not found on azure node js web app

css

node.js

azure

azure-web-app-service

font-awesome