ASP.NET 应用程序 - Webfonts 在用户登录到站点之前不会加载

Posted 2023-03-06

【中文标题】ASP.NET 应用程序 - Webfonts 在用户登录到站点之前不会加载

【英文标题】：ASP.NET app - Webfonts not loading until user is logged in to the site

【发布时间】：2018-05-11 12:05:37

【问题描述】：

已编辑

再次调试，终于意识到真正的问题是什么（虽然不是如何解决它）。

当浏览器尝试为相关页面加载字体时，响应具有状态代码 302 和

Location: /Login.aspx?ReturnUrl=%2ffonts%2ffontawesome-webfont.woff2

我们的身份验证模式默认将所有请求重定向到登录页面，并且看起来也包括字体：

<authentication mode="Forms">
  <forms loginUrl="~/Login.aspx" defaultUrl="~/Login.aspx" slidingExpiration="true" protection="All" timeout="60" path="/" />
</authentication>
<authorization>
  <deny users="?" />
</authorization>

之前这不是问题，因为您登录后甚至可以查看网站上的大多数页面，并且在您登录之后，字体加载正常。但是我正在处理的页面不需要登录（甚至不需要在网站上拥有用户帐户），因此出现了问题。

更新后的问题是：如何使字体在没有身份验证的情况下加载，并且不损害身份验证本身（安全风险等）？

原帖

我们有一个 ASP.NET Webforms 应用程序已经落后了几年，我已经开始尝试向它添加 Bootstrap。到目前为止一切顺利，但我无法让字形图标工作 - 不断得到错误方块而不是图标。我们已经成功使用 Fonts Awesome 一段时间了，所以我尝试了他们的图标 - 不，同样的错误方块（同样，在页面上 没有 Bootstrap Fonts Awesome 工作正常）。

Bootstrap 安装为 Nuget 包（最新版本，3.3.7）。 Font Awesome 是 4.4.0 并且是手动安装的。我们确实使用 Sass/Less。

我们通过包添加脚本/css：

        bundles.Add(new StyleBundle("~/css/styles").Include(
            "~/css/bootstrap.css",
            "~/css/font-awesome.min.css"));

这就是 web.config 现在的样子：

<staticContent>
  <mimeMap fileExtension="apk" mimeType="application/vnd.android.package-archive" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  <remove fileExtension=".otf" />
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>

现在，很多人似乎都有类似的问题。以下是我迄今为止尝试过的解决方案：

将 css 文件和字体放入默认文件夹（/css 和 /fonts 位于同一级别，Bootstrap 期望在其中看到它们；覆盖 @font-face 中的 url 也不起作用） - 这种改进很重要，因为现在这两种字体都可以在 Firefox（大部分时间）和 Chrome（一半时间）中使用，但不能在 Edge/IE 中使用。 web.config 中 MimeType 的不同组合（没有任何区别）。 将 Font Awesome 更新到最新版本 - 也没有区别。 Internet Explorer won't display Glyphicons or WebFonts - 考虑了一下，但如果是这样，为什么问题只在启用 Bootstrap 时出现？ 清除浏览器缓存（重复）。 IE 安全设​​置中的不可信字体阻止选项 - 默认情况下关闭，因此并非如此。 使用开发工具检查字体是否实际加载 - 现在这很有趣。

Chrome 会出现“无法解码下载的字体：(...) OTS 解析错误：无效的版本标签”错误（如果出现），Edge 会出现“CSS3114：@font-face 无法加载无效的 OpenType 字体” （reference 说它应该是 CSS3115，但无论如何，“获得许可或许可证”并没有多大帮助）。

对于这两种浏览器，“网络”选项卡显示字体文件加载为 text/html 并找到 302（页面/控制台仍然有错误）。对于 Chrome，如果我多次重新加载页面，最终字体文件加载状态更改为 200 OK 并键入字体。这意味着 mimetypes 存在问题，但为什么在重新加载足够多后它会自行修复？

同样，Font Awesome 可以在不使用 Bootstrap 的页面上工作，并且文件会按预期加载。

我在这里缺少什么？任何想法都会受到赞赏，因为我被卡住了。

【问题讨论】：

我可以看看你的custom-style.css 吗？因为我认为在加载bootstrap fonts 或font-awesome fonts 时出现问题，或者您可能有使用!important 的样式规则，例如bodyfont-family: sans !important，这可能导致加载图标字体失败。

有问题的页面上没有自定义 css，我已经删除了其他所有内容，因此它不会干扰。没有 !important 声明，我已经检查过...

是否在任何地方都使用了@import？

不 - 我首先误解了原因（请参阅更新的问题）。

【参考方案1】：

最后，我将 fonts 文件夹作为例外添加到 web.config 中，就是这样（是的，真的就是这么简单。叹息）：

<location path="fonts">
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</location>

将最初的问题留在这里作为提醒，当您不太清楚自己在做什么时，您很容易误解事物并感到绝望:)