现在的位置: 网页制作教程网站制作经验 >正文
CSS

如何在网站里使用google在线字体?

发表于2014/9/17 网站制作经验 0条评论 ⁄ 热度 3,784℃

在一些制作漂亮的网站里,我们会经常发现他们调用google字体。尤其在wordpress博客系统中,调用google在线字体更为常见。那么这些网站为什么要调用goole字体?调用google字体有什么好处?

什么是google字体?

Google Fonts 就是一个开源的在线字体库,可以通过在自己的网站里调用的方式使用google字体。

为什么要使用google字体?

一些CSS初学者朋友经常会邮件问我一些特效里丰富多样的字体如何设置的,我回答他们这些都是Google的网页字体,在Google网页字体库里存放着大量各种形式的字体,当然这些都是英文的。我们经常看到国外网站上使用一些漂亮或奇形怪状的字体,这些在我们本地是没有的字体为何会显示出来呢?答案就是他们使用了Google网页字体。

如何在网站里使用google在线字体?

首先我们打开Google Web Fonts网站,在首页就可以看到许多字体,按下图操作进行。

如何使用google web fonts 步骤1

选择好字体后可以选择Review进行预览;选择Use进入操作界面。

如何使用google web fonts 步骤2

进入操作界面后你会看到4个步骤: 1. 选择字体的样式; 2. 选择字符集; 3. 添加代码到你的网站; 4. 添加CSS到你的网站; 选择代码提供三种方式: “CSS link插入”,”@import CSS(在CSS文件里调用)”, “脚本方式”,当然第一种是最简单的了。参考下图: (另外在操作界面右侧有显示页面调用这款字体的Load时间)

如何使用google web fonts 步骤3

至此,我们调用Google webfonts的教程就完成了,大家不妨亲手实践一下。

  • 暂无评论