如何使用Google的网页字体在线服务

2010-05-27 12:02:17 作者：本站整理来源：互联网

目前网页上使用的字体都是常见的几种，如Lucida Grande、Verdana、Arial、Sans-Serif，中文常见的有宋体。要想用比较个性的字体就比较麻烦了，因为你不能保证客户端是否支持这种字体，常用的方法是用Photoshop把文字制作成图片。

为了让网页设计更加灵活，Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与Monotype Web Fonts、FontShop 等字体商不同，Google 这次开放的字体与它其他很多服务一样，完全免费。

网址：http://code.google.com/webfonts

Google目前提供的字体共有十八种，均为目前比较流行的免费字体，包括为Android而开发的Droid系列，被称为“Fonts for Scholars”的Cardo，为代码印刷而设计的Inconsolata，业余之作而不胫走红的Yanone Kaffeesatz等等，其中最能引人注目的是字体师John Fell 设计的IM Fell字体。我想每个网页设计师都会觉得这是个好消息，又一个来自Google的福音吧！想使用它们吗？使用这些字体无需付费，也不必注册，只需要做简单的几步。

使用教程

1. 首页在网页头部加入

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=字体名称">

2. 在CSS中加入

CSS selector {
  font-family: 'Font Name', serif;
}

或者直接在字体容器加入样式，如：

<div style="font-family: 'Font Name', serif;">Your text</div>

效果演示

提示:可以对代码修改后再运行。

注意：当指定在线网页字体后，至少要有一个后备的网页安全字体，以避免意外的事件发生（如Google服务被墙啦，Google大爷不幸倒闭啦等等不测事件^_^）。添加一个像衬线或无衬线字体到列表的末尾，可以让浏览器在无法取得在线字体的情况下自动加载默认的字体。

官方教程：http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

相关热词：在线字体字体设计 Google 网页字体

分享到：

更多...

收藏至我的帐号

教程排行榜: QQ、淘宝、MSN、Skype在线状态代码生成方法; 四个免费的在线LOGO和徽章生成工具; 分享三款免费的在线字体设计工具; 十五个免费在线制作网站标志的工具; IE调试工具：Microsoft SuperPreview for IE(附下载); 18款Wordpress最佳的免费幻灯片画廊插件推荐; 解决eWebEditor编辑器在IE8中不能正常使用的方法; 四款可以整合到网站的网页版即时通信IM插件系统; 国外五款主流的免费网站流量统计工具; 三款字体辨认、查找、生成的免费在线字体应...; 21个可用于网站和博客的免费视频播放器插件; 实用的网站Web表单(包括WordPress插件)在线创建工具; 利用google翻译器制作多语种网站; 十七款用于Chrome的网页设计开发工具扩展; 六款网址代推、收藏与分享按钮工具推荐; WEB开发之调试利器—Firebug应用全介绍

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能沿多个方向滑动切换的jquery幻灯代码; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...