博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Google字体库引起的首页加载缓慢的解决方法
阅读量:4053 次
发布时间:2019-05-25

本文共 2970 字,大约阅读时间需要 9 分钟。

今天看到博友-小思设计(http://52think.me/)的一条评论说是我的博客看不到文字,当时还纳闷,我天天访问也没发现这个问题啊(公司电脑配了google服务的host,访问都正常);

下午出去逛超市,回来上网,浏览博客的时候,首页加载很慢,广告和图片都显示了,就是没有文字,用Chrome 浏览器调试一下发现了问题,载入 themes.googleusercontent.com 站点的资源很慢,竟然达到了26秒,效果见下图;

在网页源码中丝毫找不到这个域名的影子,后来查看css文件才看到,头部文件导入了库,而正是因为这个库会载入 themes.googleusercontent.com 的资源,所以才导致访问很慢;(我也不记得是不是自己加的代码了)

知道原因后,问题就好解决了,删除或注释掉 font.googleapis.com 的那条css就可以了,注释方法如下图;

上述方法最简单方便,如果非要用这个库的话,在css文件中加入如下css样式也可以,这个方法是将web字体格式化。

@font-face {font-family: 'Miltonian';font-style: normal;font-weight: 400;src: local('Miltonian'), local('Miltonian-Regular'), url(http://themes.googleusercontent.com/static/fonts/miltonian/v5/DVUl6K_XDo9HSLlx2JoxNT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}@font-face {font-family: 'Bitter';font-style: normal;font-weight: 400;src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff');}

p.s.在中国真的太悲剧了,但是又离不开它。

版权声明:本文采用协议进行授权,转载的文章请注明出处

原文地址:

@font-face的用法

转自:http://www.webhek.com/font-face/

几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是:

@font-face {
font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

但进入到现代浏览器时代后,WOFF格式的字体,所有,你可能只需要这样写:

@font-face {
font-family: 'MyWebFont'; src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */}

或者只含WOFF格式:

@font-face {
font-family: 'MyWebFont'; src: url('myfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

然后,像这样使用:

body {
font-family: 'MyWebFont';}

@font-face基本知识

@font-face网络字体技术之前,浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体,使页面显示字体不依赖用户的操作系统字体环境。

网络字体(Web font)的效率

你需要注意的是,字体文件的体积可能非常的大,而且需要额外的HTTP连接,这些都会降低网站页面的加载速度。所以,在使用网络字体@font-face前,你需要清楚它的利与弊,判断网络字体是否真的有必要用在你的网站页面上。

如果你决定使用个性化自定义字体,可以采用一个非常灵活的方法,就是只加载尽量少的字体字符数和尽量少的字体风格(粗体/斜体)。例如,如果你使用谷歌字体,你可以只加载指定的字体风格组合:

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

或者

网络字体(Web font)文件格式

目前最主要的几种网络字体(web font)格式包括WOFF,SVG,EOT,OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐,重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。

你可能感兴趣的文章
【leetcode】Sum Root to leaf Numbers
查看>>
【leetcode】Pascal's Triangle II (python)
查看>>
java自定义容器排序的两种方法
查看>>
如何成为编程高手
查看>>
本科生的编程水平到底有多高
查看>>
AngularJS2中最基本的文件说明
查看>>
从头开始学习jsp(2)——jsp的基本语法
查看>>
使用与或运算完成两个整数的相加
查看>>
备忘:java中的递归
查看>>
DIV/CSS:一个贴在左上角的标签
查看>>
Solr及Spring-Data-Solr入门学习
查看>>
Vue组件
查看>>
python_time模块
查看>>
python_configparser(解析ini)
查看>>
selenium学习资料
查看>>
<转>文档视图指针互获
查看>>
从mysql中 导出/导入表及数据
查看>>
HQL语句大全(转)
查看>>
几个常用的Javascript字符串处理函数 spilt(),join(),substring()和indexof()
查看>>
javascript传参字符串 与引号的嵌套调用
查看>>