cdn 字体_从CDN提供字体

cdn 字体

For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers. They actually require custom CORS configurations to display properly. Here's the code you'll need to make that happen.

为了获得最佳性能,我们都知道我们必须将资产放在CDN(另一个域)上。 与这些资产一起的是自定义Web字体。 不幸的是,通过CDN定制的Web字体(或任何跨域字体请求)在Firefox或Internet Explorer中(按规范正确地)不起作用,尽管它们在基于Webkit的浏览器中确实(不正确地)起作用。 他们实际上需要自定义的CORS配置才能正确显示。 这是实现该目标所需的代码。

.htaccesshttpd.conf代码 (The .htaccess or httpd.conf Code)

The code can be placed with the .htaccess file or httpd.conf file:

可以将代码与.htaccess文件或httpd.conf文件放置在一起:

 # Apache config <FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch> # nginx config if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *; }  

This sets the Access-Control-Allow-Origin CORS configuration to allow pulling from all domains. List specific domains by comma if you want to serve fonts up to only specific domains. You'll want to serve up all font types appropriately in the case that the browser prefers one type.

这将设置Access-Control-Allow-Origin CORS配置,以允许从所有域中提取。 如果要仅将字体提供给特定域,请用逗号列出特定域。 如果浏览器偏爱一种字体,则需要适当地提供所有字体类型。

To ensure the header is set properly, you can check using the curl utility:

为确保正确设置标题,您可以使用curl实用程序进行检查:

 $ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf # Result HTTP/1.1 200 OK Server: Apache X-Backend-Server: developer1.webapp.scl3.mozilla.com Content-Type: text/plain; charset=UTF-8 Access-Control-Allow-Origin: * ETag: "4dece1737ba40" Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT X-Cache-Info: caching Cache-Control: max-age=604795 Expires: Wed, 19 Jun 2013 16:22:58 GMT Date: Wed, 12 Jun 2013 16:23:03 GMT Connection: keep-alive  

If you see Access-Control-Allow-Origin: * in the response, you're golden!

如果您在响应中看到Access-Control-Allow-Origin: * ,那么您就很高兴!

cdn 字体

原文链接:https://blog.csdn.net/culuo8053/article/details/107908018?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816781685358459%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816781685358459&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-11-107908018-null-null.nonecase&utm_term=cdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/354

(0)
上一篇 2022年7月31日 00:28
下一篇 2022年7月31日 01:12

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml