Google Font的运用

发布于 大漠

网页的字体的使用,大家都清楚,有时一些特殊字体只能使用图片来代替,因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题,前面本站推出CSS3@font-face来实现一些特殊字体的效果。效果是作出来了,但性能大家又说,加载文件太大,直接影响了网站的性能。说真的真是鱼和熊掌不能兼得呀,而且@font-face对于中文字体来说还是蛮麻烦的。那么是不是除了@font-face就别无他法了呢?不是的,现在Google Font Api也能实现。今天学习了一下觉得蛮实用的,也是相当的方便。整理了一下放上来与大家一起分享。

目标

目标很明确,需要使用下面的字体来渲染网页的字体效果:

实现步骤

今天我们不使用CSS3@font-face来制作,而是使用Google Font Api来实现这样的效果,下面我主要分以下几步来介绍:

第一步:打开Google Font Api官网网站

首先点击这里进入官网,你会看到这样的一个页面:

上图很明显的告诉我们,使用google font api需要三个步骤,就能实现效果:

  1. 选择你需要使用的字体;
  2. 预览你选择的字体;
  3. 使用你选择的字体

接下来,我使用图片来解释这几步。

第二步:选择你需要的字体

来到google font api官网的首页,我们需要先点击“开始选择字体”的按钮,如下图所示:

点击上图后,我们进入到了选择字体的页面,如下图所示:

到达上图这个页面后,需要找到我们需要的字体,然后选中需要的字体:

第三步:预览选择的字体

第二步完成了字体的选择,接下来可以点击“预览”按钮来看看效果:

点击了“预览”后,我们会来到预览页面查看选中的文字效果:

在预览中确认后是你所需的字体后,我们就可以进入到下一步

第四步:使用字体

到这里,我们可以直接点击“使用”按钮,进入使用字体页面:

此时我们会进入到下面这个“使用”页面:

上面的页面中有四步:

  1. 选择你想要的风格
  2. 选择你想要的字符
  3. 获取字体代码
  4. 运用到你的样式中

这里四步,大家只要按需求进行选择,此处不做太多介绍,我想要说的是如何得到需要的字体代码,并如何使用到你的页面中。

获取字体代码很简单,这里一共有三种方法:

  1. 标准代码
  2. @import代码
  3. javacript代码

如下图所示,

下面我们分别来看看这三段代码:

标准代码:

		<link href='http://fonts.googleapis.com/css?family=Jim+Nightshade&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	

这是一段link代码,你只需要将这段代码放到你页面的“<head>”之中就可以了。

@import代码:

		@import url(http://fonts.googleapis.com/css?family=Jim+Nightshade&subset=latin,latin-ext);
	

@import这个使用大家都知道的吧,直接放到你样式文件中就行了。

javaScript代码:

		<script type="text/javascript">
			WebFontConfig = {
				google: { families: [ 'Jim+Nightshade::latin,latin-ext' ] }
			};
			(function() {
				var wf = document.createElement('script');
				wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
					'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
				wf.type = 'text/javascript';
				wf.async = 'true';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(wf, s);
			})(); 
		</script>
	

这个是js代码,使用就和平常运用js代码一样。当然你也可以将其放在一个文件中。

第五步:样式中运用字体:

现在成事具备了,只欠东风了,那么最后我们就给他这么一阵东风,将其运用到你的样式中:

		p{  
			font-family: 'Jim Nightshade', cursive;
			font-size:180%;  
		}  
	

最终效果如下面的demo所示:

上面的方法只是使用一种字体,如果大家想要好几种字体也是相当的简单,你只需要在“第二步”中多选择几种字体,其他方法不变,只是在你样式中需要运用什么样的字体时选择所需字体。

优点

使用这种方法,好处就是无需像“@font-face”一样加载字体文件,也能制作兼容浏览器的特殊字体效果。

缺点

缺点就是,这种方法需要依赖于google来使用,而且只适合英文,不太适用于中文。

那么有关于google font的就介绍到这里了。这里只是介绍了如何运用google font到你的页面中,如果你想了解更多的相关知识可以点击这里

最后希望大家喜欢这篇教程,如果您有任何建议,欢迎在下面的评论中给我留言。

如需转载烦请注明出处:W3CPLUS

Air Jordan I High