• 浅谈Google Font API实现原理


    在上一篇《使用Google Font API让网页的文字更漂亮》文章中,我向大家介绍了如何使用Google Font API来使用Google 字体目录中漂亮的英文字体。从大家的评论中我总结了2个问题:

    1.对中文字体大小估计不足,中文字体的大小确实不是一般的大,如果要在Google的开放字体目录中提供完整的中文字体,估计有困难,依据现在的带宽来看,即使可以提供,用户也不愿意的那么长的时间。

    2.对Google Font API的实现原理非常的好奇,这句我在下文中要谈的。

    @font-face格式

    Google Font API的实现得益于浏览器可加载服务器端字体文件的功能。这一功能的使用是通过在样式中定义@font-face属性,关于该属性的说明如下:

    @font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

    Google Font API中加载的正是Google开放字体目录中的字体文件,拿Reenie Beanie字体来说,Google定义的方式如下:

    @font-face {
      font-family: 'Reenie Beanie';
      src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
    }

    上面代码中,font-family属性是定义字体的名称,以便随后的样式中使用该字体,src属性则用来定义字体文件的路径,直接在浏览器访问该属性值就可以下载到该字体文件。

    字体文件兼容性

    值得一提的是,由于各浏览器支持的字体文件格式不一,Google会根据浏览器的类型,提供不同格式的字体文件,我分别使用过IE和Firefox进行测试过,IE下载到的是eot文件,firefox则会下载到ttf文件。

    关于各字体文件格式的兼容性说明如下:

    .eot格式

    .ttf格式

    其他格式的字体文件,由于没有找到相关的资料,无法说明。

    小结

    以上就是对上一篇文章评论中问题的2点说明,希望提问的那位同学能够对我的答复满意,也希望对大家能有一点帮助。

    参考资料:

    1.CSS3速查手册

  • 相关阅读:
    final和abstract能否共同修饰一个类
    Java三大变量分别是类变量、实例变量和局部变量
    变量的就近原则
    成员变量和局部变量
    初始化集合对象,通过contains判断是否为null
    三目表达式运算符优先级分析
    京东物流POP入仓商品关联笔记
    京东POP入仓操作笔记
    闪购活动报名笔记
    excel常用的快捷键大全
  • 原文地址:https://www.cnblogs.com/lloydsheng/p/1744127.html
Copyright © 2020-2023  润新知