zoukankan      html  css  js  c++  java
  • google font API 使用指南

    google font API 使用指南

    最近一个客户的网站用了一个非标准的字体,客户要求用google font API来替换这个非标准字体。由于之前没有做过这个,就上google上找了找网站,现将使用方法分享给大家。

    google font API 是什么呢?

    google font API 是google推出的一款支持高质量的开源字体文件的服务。

    网站地址:http://code.google.com/apis/webfonts/

    字库地址:http://www.google.com/webfonts

    怎样使用google font API ?

    第一步:在你的html页面里面像添加普通样式表一样,添加字体的样式连接。这里以“Fontdiner Swanky”字体为例:

     
    <link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'>  

    第二部,在需要使用字体的地方用font-family给元素定义样式:

     
    h3{font-family'Fontdiner Swanky', arial, serif; } 

    Ok,现在打开你的页面浏览就可以看到字体变成“Fontdiner Swanky”字体了。

    注意,大家看到font-family里面不仅仅只写了一个字体,是因为我要给我们的h3留个备选字体,如果某些原因导致了google font api不能工作,我们的元素也有备选字体。其实我们在平时的页面制作中也应该这样做。

    使用google font API 的好处

      1. 不必使用一些cufon等之类的字体替换,或者背景图替换,减少了页面对服务器的连接数;
      2. 使用的是google的cdn,而不是服务器上传的字体,减轻了服务器的流量压力;
    1. 元素里面用的是普通文本,即使没有样式,或者使用屏幕阅读器,都能看到内容。

    google font API 的其它用法

    上面只是介绍了google font API的一个普通的用法,如果有一个以上的字体呢?并且字体还有bold,italic等属性,当然google也考虑到了,下面介绍一些复杂的用法。

    多种字体:

     
    <link href='http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans' rel='stylesheet' type='text/css'>  

    上面我们可以看到family后面有三种字体,每个字体之间用“|”隔开,不要有任何空格。第三个字体中间有加号,因为有的字体名字中间有空格,这里需要将空格转换为“+”

    字体多种样式:

     
    <link href='http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans' rel='stylesheet' type='text/css'>  

    上面我们可以看到family后面的字体“Tangerine”后面有个冒号,后面是bold, bolditalic ,这就是字体的样式,加粗,加粗斜体。

    注意,这里的每个字体样式之间用“,”(逗号)隔开。

    上面的bold, ,bolditalic 等也可以缩写:

    斜体:italic可以写为italic或者i;
    粗体:bold可以写为bold或者b;
    加粗斜体bold italic可以写为bolditalic 或者 bi。

    总结

    google font api 能够在绝大多数的浏览器里运行,并且不依赖于javascript。它里面的字体都是开源字库,所以,你可以随意的使用。

    但是 它也有一定的局限性。目前字体还比较少,不支持中文字体。

    如果你有什么问题,欢迎在下面的评论里与我交流。

    http://www.xunzou.com/blog/catalog.asp?page=2  转载

  • 相关阅读:
    CTFHub-Web-Web前置技能-HTTP协议-响应包源代码详解
    BurpSuite环境安装及设置
    i2 Analyst’s Notebook 9学习笔记之入门、基本概念和数据接口
    Python 练习题:用索引取出LIST中的值
    python 练习题:小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点
    zabbix4.0 本地安装详解及步骤
    CentOS 7 安装 mysql 5.7.27 for zabbix
    win7系统 右击任务栏 资源管理器 弹出菜单“已固定”和“最近”项目不显示故障处理
    CentOS 7 新系统 手动配置网络 简要步骤
    CentOS7 firewalld防火墙 启动 关闭 禁用 添加删除规则等 常用命令
  • 原文地址:https://www.cnblogs.com/woohblog/p/2889234.html
Copyright © 2011-2022 走看看