css – 为什么Firefox重新调整页面大小时的字体?

前端之家收集整理的这篇文章主要介绍了css – 为什么Firefox重新调整页面大小时的字体?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个相当简单的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;
}

这修复了我。每个浏览器窗口上不再有不必​​要的字体重新加载调整大小。

猜你在找的CSS相关文章