使用Google Fonts丰富网页的字体

2013-09-14 Tech

字体啥的,在自己电脑上很好弄,可是问题到了网页上,就是另外一回事儿了,因为你不能确保每个查看你网页的人都有你在网页上使用的字体,今儿就找到一个解决办法:使用 Google Fonts

#寻找到需要的字体

首先进入Google Fonts 首页,点击页面正中的Start choosing fonts按钮。

接下来你会看到一个包含很多字体的列表。你想要用哪一种字体,你就点击那个字体右下角的Add to Collection按钮,这个时候你选中的字体就会出现在页面下方的框框里。

如果想要添加多种的字体,重复这步操作即可。

#预览

点击下方显示你选择的字体列表的灰色框框右上角的Review按钮,接下来你会看到你选择的所有字体的预览,你可以在这里调节字体大小,风格等属性进一步了解你选中的字体的效果。

#使用

点击之前Review按钮右边的Use按钮,这个时候你会看到一个页面加载速度的估计,注意: 你使用的字体越多,会造成你的网页加载速度更慢

继续向下翻这个页面,就能够看到 Google 向你提供的使用这些字体的对应代码了。默认显示的是 HTML(像这样):

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative|Kavoon' rel='stylesheet' type='text/css'>

这段引用插入到 HTML 文档的标签里面就可以在你的页面上直接使用这些字体啦!

Comments...