404上的自定义ttf字体(.NET MVC 5)

时间:2017-12-02 22:00:20

标签: css asp.net-mvc visual-studio azure fonts

我有一个我以前见过的问题。我实施了解决方案,但问题仍然存在。

我下载了两个自定义ttf字体,用于我的蒙特利和面包店项目。

两种字体都已安装。两个前端都在我的内容文件夹中。我已经更新了两者的字体属性,以便内容在构建时复制“if newer”。我在网络配置文件中添加了必要的语言。我在CSS中创建了font-face规则。

在我的本地计算机上,即使访问我的应用程序的AzureSites版本,也会显示自定义字体。在每台其他计算机上,它们不会出现并在控制台中显示404。

请参阅下面的图片。在此先感谢您的帮助!

This first image is how the site SHOULD look with the fonts working properly

Font files in my Solution Explorer

Relevant code in my web.config

Font properties, confirming that I am copying to the server directory

404 error messages in the console

已编辑以添加CSS文件的图像。

Here is the solution explorer in full. The relevant font CSS is in Site.css

Here are the font face rules in Site.css for the custom fonts.

Here is an example of the implementation of the new font-face, within Site.css

1 个答案:

答案 0 :(得分:0)

我怀疑问题是..中的..\fonts/baker.ttf

假设你的目录结构是

content/
   styles/
     stylesheet.css
   fonts/
     baker.ttf

所以当你的html包含

<link rel="stylesheet" href="/content/styles/stylesheet.css"/>

已解析的网址为/content/styles/../fonts/baker.ttf,一切正常。

但是使用mvc时,你的样式表可能会捆绑并使用bundler进行编译。链接可能类似​​于

<link href="/bundles/css?v=Mny4y0TdpT_Ey6yWlayc6zrqhuQE-XSEh-dK8IJOsqc1" rel="stylesheet">

所以解析后的网址是/bundles/../fonts/baker.ttf,不存在。我无法从屏幕截图中看到是否是这种情况,但这是我的猜测。

尝试使用/content/fonts/baker.ttf这样的绝对网址作为字体 - 面部导入,而不是使用相对网址。

此外,反斜杠是非常可疑的。使用正斜杠,反斜杠不是URL中的有效分隔符。