我的项目在通过字体面加载自定义字体时遇到问题。只有当我使用子域(static.domain.com)作为静态资源时,才会发生这种情况。
http服务器的响应是200/OK
,但chrome devtools中的请求是红色的,大小为0字节,但我不明白为什么。
我的css用于加载字体:
@font-face {
font-family: 'flexslider-icon';
src:url('fonts/flexslider-icon.eot');
src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
没有子域的http请求的头:
Remote Address:server-ip:80
Request URL:http://domain.com/resources/vendor/flexslider/fonts/flexslider-icon.ttf
Request Method:GET
Status Code:200 OK
Request Headers]
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Cookie:42099b4af021e53fd8fd4e056c2568d7c2e3ffa8=47a0eb41255ef509f4f834a20b5e0a80; WEBSITE_LANGUAGE_ID=1; WEBSITE_LANGUAGE_CODE=pt-br; _gat=1; 2796f347b370f841cf4073d1b3834ec019e6d2f4=d37cabbc36cfaa34508ce57a4ed237e8; __utma=65801017.1238778210.1411492809.1411492809.1411492809.1; __utmb=65801017.10.10.1411492809; __utmc=65801017; __utmz=65801017.1411492809.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __zlcmid=Qye50l3YnSWoJv; WEBSITE_FORM_NEWS_TOKEN=%3DAFVxIkVWpVYWxmSW5UVkpWVwA3VVpmRSJlRalVUtVTVUFjWzV1aaNlYHpkdTxmVaN2aKVVVB1TP
Host:domain.com
Pragma:no-cache
Referer:http://domain.com/resources/build/all.css?v=1411407970
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Response Headersview source
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1201
Content-Type:font/ttf
Date:Tue, 23 Sep 2014 17:43:42 GMT
Expires:Thu, 23 Oct 2014 17:43:42 GMT
Keep-Alive:timeout=5, max=96
Last-Modified:Mon, 23 Jun 2014 20:51:58 GMT
Server:Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8e-fips-rhel5 DAV/2 SVN/1.6.11 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Vary:Accept-Encoding
子域为的http请求的头:
Remote Address:server-ip:80
Request URL:http://static.domain.com/resources/vendor/flexslider/fonts/flexslider-icon.ttf
Request Method:GET
Status Code:200 OK
[Request Headers]
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Host:static.domain.com
Origin:http://domain.com
Pragma:no-cache
Referer:http://static.domain.com/resources/build/all.css?v=1411407970
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
[Response Headers]
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1201
Content-Type:font/ttf
Date:Tue, 23 Sep 2014 17:45:08 GMT
Expires:Thu, 23 Oct 2014 17:45:08 GMT
Keep-Alive:timeout=5, max=97
Last-Modified:Mon, 23 Jun 2014 20:51:58 GMT
Server:Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8e-fips-rhel5 DAV/2 SVN/1.6.11 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Vary:Accept-Encoding
请求之间唯一显著的区别是cookie,没有子域cookie的请求不在请求中(回调,这是使用子域请求获取静态资源的目标)。
最佳答案
正如@aalih在评论中给出的答案,解决方案如下:
@font-face fonts only work on their own domain