Google Font字体本地化使用提高网站访问速度

Google Web font在国内经常不稳定,速度在国内延迟也很高,而引发网页打开速度慢。

一、常见的字体格式介绍

不同的浏览器对字体格式支持是不一致的,常见的如下:

1、TureTpe(.ttf):

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

2、OpenType(.otf):

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

3、Web Open Font Format(.woff):

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

4、Embedded Open Type(.eot):

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

5、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有:
    【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

所以,如果不考虑手机上的字体兼容,实际上只需要2种格式就好.

(1)eot :用于兼容IE浏览器的字体格式
    (2)woff :其他非IE浏览器都已经兼容的字体格式

二、获取你所需要的google font的各类型字体格式

一般来说,google font 只提供了字体的TTF格式,将你喜欢的google font的字体TTF下载下来。网上转换的工具很多,我们只要将TTF转换为上述的其他几种格式,比如eot,woff即可。

http://www.fontsquirrel.com/fontface/generator在线转换它可以一次性的生成eot,woff.svg,ttf多种字体格式,而且还带有相应的CSS和HTML预览,非常方便。

转换完成后,将相关的字体上传到你的网站服务器,接下来,我们用@font-face的语法来调用他就可以了。

三、在你的CSS中使用@font-face,本地化使用google font。

基本语法网上说明很多,不多介绍了。来个实际例子:

@font-face {
    font-family: ‘open_sansregular‘;
    src: url(‘opensans.eot‘);
    src: url(‘opensans.eot?#iefix‘) format(‘embedded-opentype‘),
         url(‘opensans.woff2‘) format(‘woff2‘),
         url(‘opensans.woff‘) format(‘woff‘),
         url(‘opensans.ttf‘) format(‘truetype‘),
         url(‘opensans.svg#open_sansregular‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
}
 

在这里,通过@font-face,我自定义了一个名为的Tangerine-b字体,相关的eot,woff,ttf,svg字体格式上传在/font/目录下面。这里使用的是相对路径,当然你也可以使用绝对路径。

离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上,比如:

body {
  font-family: ‘open_sansregular‘
}
时间: 2024-08-27 07:09:58

Google Font字体本地化使用提高网站访问速度的相关文章

提高网站访问速度的34条军规

•Google告诉你如何让你的网站访问更快 •提高网站访问速度的34条军规(4-6) •提高网站访问速度的34条军规(11-13) •提高网站访问速度的34条军规(20-25) •提高网站访问速度的34条军规(31-34) •提高网站访问速度的34条军规(14-17) •提高网站访问速度的34条军规(7-10) •提高网站访问速度的34条军规(18-19) •提高网站访问速度的34条军规(26-30)

雅虎十四条 - 14个优化网站性能提高网站访问速度的技巧

14个优化网站性能提高网站访问速度的技巧 又叫“雅虎十四条”,想起一年前那个懵懂的我,大四傻乎乎的跑到大学城面试前端,那个时候以为寒暑假看了两套CSS的视频,就很牛B了,出发先还把视频温了一下,嗯嗯,这是滑动门,嗯嗯这是绝对定位,嗯嗯这是浮动清除…… 当时是彪叔面试我的,当时我还不知道那个人,全身黑漆漆的,黑色T-shirt,黑色皮肤,黑色帽子,黑色墨镜,还有点黑色胡渣的人,就是彪叔,补做了试题后支支吾吾的跟他谈了一下,发现完全不行,第一个问题是“雅虎十四条”是什么?然后我蒙了,pardon?

如何有效减少网页加载时间?20个提高网站访问速度的方法

网友上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些.因此我觉得我们有必要去提高网页的打开速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!下面给出20种方法帮你提高网站访问速度缩短网页加载时间. 1.减少页面HTTP请求数量 比较直接的理解就是要减少调用其他页面.文件的数量. A.我们在使用css格式控制的时候,经

【转】【收集】如何提高网站访问速度的文章

http://blog.csdn.net/qdzx2008/article/details/727900 如何加快网站访问速度(http://www.qnsky.com/dispbbs.asp?BoardID=6&id=634) 很多朋友都用虚拟主机来做网站,将网页文件存放在虚拟空间上,但是页面内容一多,网站打开的速度就显得特别慢,如果您碰到这种情况,与其寻求更好的 空间,不如通过优化网页代码来取得满意的速度.笔者总结了一些切实可行的方法,制作主页时,以下的方法可以令你的网页速度大大提高. 一.

10个技巧助您提高网站访问速度

网站的访问速度和性能对用户体验来说是非常重要的.如果你的网站访问非常的慢,你不仅会失去用户,而且更可怕的是你会失去潜在的客户.像 Google这样的互联网巨头也会把网站访问速度作为排名的一个参数.因此当你需要优化网站速度时,你需要考虑方方面面,每个毫秒.这里对改进网站性能提 出一些基础和普遍的建议. 1.如果可能的话,延迟加载一些内容 可以使用Ajax来按需加载部分内容.比如一个相册,可以在用户浏览页面时先出缩略图,当用户点击了,然后异步请求原图并展示,这样用户如果只需要看几张图片,就不需要等待

电脑新手如何用CDN提高网站访问速度

对现在很多公司来说,有一个网站是必要的,即便没什么人访问,名片上面都有一个网址,那就显得这个公司要正规一些,也有一些互联网的意识. 不过最近有一次,我给老板做了个网站,我们是一个外包汽车零件的公司,老板在开发布会的时候特别炫耀了一下,我们的网站可以让订货商在线提交订单,然后可以在线发货,在公司里安排好网络客服部门,就可以为订货商提供优质的跟踪服务.然后老板现场演示了一下网站的订单功能,结果,提交订单后返回的是请求被拒绝,这特么就尴尬了. 当时我用的国内某巨头的云服务器,然后还有免费提供的CDN,

提高网站访问速度的方法汇总

以下方法都有在公司实际项目中应用,的确能够提升客户端体验和访问速度. 1.建议客户端使用Chrome或高版本IE浏览器: 2.能够实现静态化的页面尽量在服务器端保存静态页面,访问动态页面肯定会比静态页面慢. 3.减少HTTP请求 1)合并压缩js.css,可以使用前端自动化构建工具. 例如:grunt(使用说明:http://www.cnblogs.com/wangfupeng1988/p/4561993.html).gulp . 很不错的google在线js压缩工具:http://closur

20点提高网站访问速度缩短网页加载时间!

文章来源:http://www.chinaz.com/web/2014/1112/373946.shtml 1.减少页面HTTP请求数量 比较直接的理解就是要减少调用其他页面.文件的数量. A.我们在使用css格式控制的时候,经常会采用background载入很多图形文件,每个background的图像至少产生1次HTTP请求,一般我们为了让页面生动活泼会大量使用background来加载背景图,要改善这个状况,可以采用css的1个有用的background-position属性来加载背景图,我

14个优化网站性能提高网站访问速度技巧

相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能.比如Google机会已经把最基本的office应用都搬到了互联网上.当然便利的同时毫无疑问的也使页面的速度越来越慢.自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的. 以上是一张web2.0页面的生命周期图.工程师很形象地讲它分成了“怀孕,出生,毕业,结婚”四个阶段.如果在我们