zoukankan      html  css  js  c++  java
  • 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,而不是服务器上传的字体,减轻了服务器的流量压力;

    3. 元素里面用的是普通文本,即使没有样式,或者使用屏幕阅读器,都能看到内容。

    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。它里面的字体都是开源字库,所以,你可以随意的使用。

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

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

  • 相关阅读:
    Myeclipse修改jdk版本流程
    web框架的前生 socket写网站
    jmeter APP接口压力测试
    BeanShell实现加密解密功能
    jmeter BeanShell的几种使用方式
    jmeter多个接口测试
    jenkins添加TPS与服务器监控变化曲线图
    Jenkins的HTML报告增加显示Throughput展示
    Jmeter 分布式部署-远程服务器的搭建与设置
    Jenkins+Jmeter配置(Linux环境)
  • 原文地址:https://www.cnblogs.com/shihao/p/2489406.html
Copyright © 2011-2022 走看看