Azure bootstrap fonts

本文关键字：fonts bootstrap Azure | 更新日期: 2023-09-27 18:35:09

似乎

无法解决这个问题，我将自定义引导 css&fonts 插入我的 Azure CDN 中，但在 Chrome 中我不断得到"跨源资源共享策略已阻止加载来自源'http://azxxxxxx.vo.msecnd.net'的字体：请求的资源上不存在'访问控制-允许-源'标头。因此，不允许访问源"http://localhost.domain:16300"。

我修改了我的引导 css

font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot');
  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

我已经阅读了一些堆栈溢出帖子，将以下内容添加到我的网络配置中

    <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
 <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
    </staticContent>

还有同样的问题，有什么想法吗？

Azure bootstrap fonts

假设你已将字体/CSS上传到Azure CDN前面的Azure Storage。

您需要在存储上启用 CORS，以允许您的网站跨域访问字体。

完整的步骤在Windows Azure Storage： Introducing CORS 中介绍

本文中的部分示例（需要获取适用于最新 Azure 客户端库的 NuGet 才能生成它）：

private static void InitializeCors()
{
  // CORS should be enabled once at service startup
  // Given a BlobClient, download the current Service Properties 
  ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();
  ConfigureCors(blobServiceProperties);
  BlobClient.SetServiceProperties(blobServiceProperties);
}
private static void ConfigureCors(ServiceProperties serviceProperties)
{
  serviceProperties.Cors = new CorsProperties();
  serviceProperties.Cors.CorsRules.Add(new CorsRule()
  {
     AllowedHeaders = new List<string>() { "*" },
     AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
     AllowedOrigins = new List<string>() { "*" },
     ExposedHeaders = new List<string>() { "*" },
     MaxAgeInSeconds = 1800 // 30 minutes
 });
}

看起来您缺少更多步骤（和自定义标头）。看看这个答案，它可能有你需要的东西 - Azure 网站上的请求由于 CORS 而失败

我相信

这是我不久前遇到的问题。这是一只熊。最后，对我有用的是为各种字体格式添加MIME类型。显然，Azure的服务器映像尚未正确包含它们。这是要尝试的 web.config 文件的更新。

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".svg" />
            <remove fileExtension=".eot" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

请注意更新的 mimeType 值。祝你好运！

这样做。

IIS 版本 7.5+

<system.webServer> <httpProtocol> <customHeaders> <add name="access-control-allow-origin" value="*" /> <add name="access-control-allow-headers" value="content-type" /> </customHeaders> </httpProtocol> </system.webServer>

IIS 版本 <7.5

<system.webServer>
<httpProtocol> <customHeaders> <add name="access-control-allow-origin" value="*" /> </customHeaders> </httpProtocol> </system.webServer>

一种完全不同的方法是将 eot 文件编码为 base64 并将它们直接嵌入到 CSS 文件中。当我无法访问.woff字体文件时，我最近不得不为 HTML Windows 应用商店应用程序执行此操作

相关文章：