在 azure node js web 应用程序上找不到字体 .woff 404
Font .woff 404 not found on azure node js web app
我的 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 上上传的版本中收到此错误。
如果使用 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
中的快速静态路由配置
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>
希望对您有所帮助。
我的 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 上上传的版本中收到此错误。
如果使用 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
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>
希望对您有所帮助。