我有一个相当简单的Bootstrap3网站,其中一些自定义字体嵌入到CSS中,具有@ font-face规则。它的作品很棒这些页面正在由Django生成,所以当我测试它时,我也可以看到浏览器发出的本地请求。
当我调整浏览器窗口大小时,我看到数百个字体请求:
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1"
全部为相同的自定义字体。一遍又一遍地,直到我停止调整大小。
我意识到大多数人通常不会调整浏览器的大小,但为什么Firefox会这么做?我能阻止吗?
Chrome不会显示此行为。
这是文件如何看起来卷曲。它似乎有正确的内容类型,没有奇怪的超级隐藏的东西在那里。
HTTP/1.0 200 OK Last-Modified: Sun,30 Nov 2014 22:53:43 GMT Content-Length: 65452 Content-Type: application/x-font-woff Server: Werkzeug/0.9.4 Python/2.7.4 Date: Thu,04 Dec 2014 14:13:57 GMT
解决方法
我在每个浏览器窗口调整大小时遇到了Firefox中相同的字体重新加载问题。原来在指定url()字体之前,它必须指定本地没有安装的local()字体。
如果我使用以下css:
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'),local('Roboto-Regular'),url("../fonts/Roboto-Regular.woff2") format('woff2'),url("../fonts/Roboto-Regular.ttf") format('truetype'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000; }
如果我在本地没有安装Roboto-Regular,如果我在本地安装Roboto-Regular,那么行为就会在Firefox中显示,问题消失了。由于我并不期望每个人都在本地安装Roboto-Regular,所以我从@ font-face的src标签中删除了本地()字体引用。
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url("../fonts/Roboto-Regular.woff2") format('woff2'),U+F000; }
这修复了我。每个浏览器窗口上不再有不必要的字体重新加载调整大小。