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配置才能正确显示。 这是实现该目标所需的代码。
.htaccess
或httpd.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