源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 如何使用Google的网页字体在线服务 [打印本页]

作者: 582388360 时间: 2015-5-9 03:43
标题: 如何使用Google的网页字体在线服务

今晨网页上使用的字体都是常见的几种，如Lucida Grande、Verdana、Arial、Sans-Serif，中文常见的有宋体。要想用比拟个性的字体就比拟麻烦了，因为你没有能保证客户端是否支持这种字体，常用的方法是用Photoshop把文字制作成图片。
为了让网页设计更加灵活，Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与Monotype Web Fonts、FontShop 等字体商没有同，Google 这次开放的字体与它其他很多服务一样，完全免费。

网址：http://code.谷歌.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.谷歌apis.com/css?family=字体名称">

2. 在CSS中插手CSS selector {
font-family: 'Font Name', serif;
}
或者直接在字体容器插手样式，如：<div style="font-family: 'Font Name', serif;">Your text</div>
效果演示
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.谷歌apis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html> 提示:可以对代码修改后再运行。
留意：当指定在线网页字体后，至少要有一个后备的网页安全字体，以避免意外的事件发生（如Google服务被墙啦，Google大爷没有幸倒闭啦等等没有测事件^_^）。添加一个像衬线或无衬线字体到列表的末尾，可以让浏览器在无法取得在线字体的情况下自动加载默认的字体。
官方教程：http://code.谷歌.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

http://www.qire.me/

欢迎光临源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)