Google Font API，在网页上使用个性字体_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 解答 > 常识整理

Google Font API，在网页上使用个性字体

作者：vip_260 来源：未知日期：2010/10/8 16:31:54 人气：标签：

入门

　　本指南介绍了如何使用 Google Font API 来添加 Web 字体到您的网页。你不需要做任何编程，只需添加一个特殊的样式表到您的 HTML 文档，然后在 CSS 样式中指定字体。

一个简单的例子

　　下面是一个示例，请将以下代码复制并另存为 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

然后在浏览器中打开该文件。你应该看到一个如下显示的页面，其中的字体称为 Tangerine：

　　这仅仅是普通的文本，因此你可以通过使用 CSS 改变它的样式。试着为上述例子增加一个阴影效果：
　　body {
　　font-family: 'Tangerine', serif;
　　font-size: 48px;
　　text-shadow: 4px 4px 4px #aaa;
　　}
　　你现在可以看到文字投影效果：

　　而这仅仅是对 Font API 和 CSS 的基本使用。

概览
　　只需两步即可开始使用 Google Font API：
　　1、添加样式表链接以获得期望的网页字体：
　　<link rel="stylesheet" type="text/css" href="2">http://fonts.googleapis.com/css?family=Font+Name">2、在元素对应的样式中使用该字体：
　　CSS selector {
　　font-family: 'Font Name', serif;
　　}
　　或者对元素本身使用行内样式：
　　<div style="font-family: 'Font Name', serif;">Your text</div>你可以查看 Google Font Directory 获得字体支持列表。

在样式表 URL 中指定字体和样式：
　　要确定在样式表链接中使用哪个 URL，你可以从 Google Font API 的基准 URL 开始：
　　http://fonts.googleapis.com/css然后添加字体 URL 参数，使用一个或多个字体名称及样式。例如获取 Inconsolata 字体：
　　http://fonts.googleapis.com/css?family=Inconsolata为获得多个字体，可以使用竖线 (|) 分割字体名称。
　　例如，同时请求 Tangerine， Inconsolata 和 Droid Sans 三种字体：
　　http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans请求多种字体允许你在网页中使用多个字体。（但不要一个加载过多字体，否则容易造成页面载入缓慢的情况）
　　Font API 默认提供正规的字体版本。想要指定其他样式或字体粗细，需为字体名称追加一个冒号 (:)，然后跟随样式列表或用逗号(,)分隔的字体粗细属性。
　　例如：
　　http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans查看 Google Font Directory 获知样式及字体粗细的支持情况。
　　每个样式请求，可以使用全称或者缩写形式；对于字体粗细，可以直接指定数值：

　　例如，请求加载 Cantarell 斜体和 Droid Serif 粗体，你可以使用下列任意 URL 格式：
　　http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
　　http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
　　http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

公告

更新

> 解答 > 常识整理

Google Font API，在网页上使用个性字体