现在的位置: 网页制作教程网站素材 >正文
站长素材大全

如何使用google在线字体库

发表于2016/10/30 网站素材 0条评论 ⁄ 热度 3,128℃

字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定的字体, 但是该字体并非主流操作系统的内置字体,我们常用的方法就是把特殊字体处理成图片,这样做有很多缺陷, 但是最近谷歌发布了Google在线字体库,这样在网站设计的时候只要调用Google在线字体库就可以让网页在客户端很好的显示,而不用只用枯版的字体了,实现字体多样化。

Google字体库

特殊字体处理成图片弊端

1、不可能大范围使用

2、不易修改

3、不利于seo优化

利用google在线的字体库优势

1、可继续使用html文本,比起自己自做字体库上传到自己的服务器可以减轻服务器负担

2、兼用性好,不需担心像各个浏览器对 CSS 解析不同导致这样那样的 bug、HACK。

3、无需引用js

利用google在线的字体库劣势

1、只能引进应为的字体库,中文不支持

2、随时有被墙外的可能性

虽然有一定的缺陷,但是google在线字体库的有时还是很明显的,那如何使用Google在线字体库呢?下面就介绍下具体的使用方法:

header部分引用要用的字体

<link rel=’stylesheet’ type=’text/css’ href=’http://fonts.googleapis.com/css?family=Font name’ >

在css中使用:

selector{
 Font-family: “font name”, serif;
}

在引用时注意一定要始终有个字体的备份方案,上面的代码你可能也发现了我使用了serif 来作为后备的字体,这样做是为了以防万一。

如果你想一次行载入多个字体

http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans

字体名称之间用 | 隔开,并且不留空格,还要注意Droid Sans字体的使用,对于字体名称中有空格的,需用 + 符号来代替空格。

Google在线字体库更多字体: http://code.google.com/webfonts

扩展阅读:如何解决google字体库无法成功加载

  • 暂无评论