Azure 引导字体

Question

无法解决此问题，我正在将自定义的 Bootstrap CSS 和字体推送到我的 Azure CDN 中，但在 Chrome 中，我不断收到以下错误信息：“源自 'http://azxxxxxx.vo.msecnd.net' 的字体已被跨域资源共享策略阻止加载：所请求的资源上没有 'Access-Control-Allow-Origin' 标头。因此，来自 'http://localhost.domain:16300' 的源不允许访问。

我修改了我的 Bootstrap 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');
}

我已经阅读了一些stackoverflow的帖子，已将以下内容添加到我的webconfig文件中

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

仍然存在同样的问题，有什么想法吗？

- D-W

Answer 1

假设您已经将字体/CSS上传到由Azure CDN前端支持的Azure存储中。

您需要在存储上启用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
 });
}

- Alexei Levenkov

Answer 2

我相信这是我不久前遇到的问题。 追踪问题非常困难。 最终，对我有用的方法是添加各种字体格式的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值。祝你好运！

- ventaur

Answer 3

看起来您缺少一些步骤（以及自定义标头）。请查看此答案，它可能具有您所需的内容 - 请求Azure网站由于CORS而失败

- user2095880

Answer 4

执行此操作。

IIS ver 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 ver < 7.5

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

- Ajay

---

这不就是我说过的不起作用的重复吗？ - D-W

Answer 5

一个完全不同的方法是将eot文件编码为base64并直接嵌入到CSS文件中。最近我在开发HTML Windows Store应用程序时遇到了这个问题，无法访问.woff字体文件，所以我不得不采用这种方法。

- roryok