芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
6

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

作者 芒果/分类 代码/发布于 2010-05-21 07:10

入门

本指南介绍了如何使用 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:

google-tangerine

这仅仅是普通的文本,因此你可以通过使用 CSS 改变它的样式。试着为上述例子增加一个阴影效果:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

你现在可以看到文字投影效果:

google-tangerine-text-shadow

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

概览

只需两步即可开始使用 Google Font API:

1、添加样式表链接以获得期望的网页字体:

<link rel="stylesheet" type="text/css" href="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

为获得多个字体,可以使用竖线 (|) 分割字体名称。

例如,同时请求 TangerineInconsolataDroid 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 获知样式及字体粗细的支持情况。

每个样式请求,可以使用全称或者缩写形式;对于字体粗细,可以直接指定数值:

样式 说明符号
italic italic 或者 i
bold bold 或者 b 或者数值,如 700
bold italic bolditalic 或者 bi

例如,请求加载 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

英文原稿:Getting Started – Google Font API | Google Code
翻译整理:Google Font API,在网页上使用个性字体 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/google-font-api-use-personalized-font-on-web-page/" title="Google Font API,在网页上使用个性字体" rel="bookmark">Google Font API,在网页上使用个性字体 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 6 条群众意见

  1. 万戈 /2010-05-21 11:42

    谷歌威武,不过好像不支持中文字体吧? 回应

    #1
  2. 芒果万戈/2010-05-21 13:25

    目前只支持 Google Font Directory 中的几款常见英文字体。 回应

    #2
  3. ven /2010-05-21 15:59

    挺不错的~这样可以减少使用图片吧~ 回应

    #3
  4. 王光卫中文博客 /2010-05-21 16:26

    我也试试看。 回应

    #4
  5. Jutoy /2010-05-27 16:37

    没有中文白搭~ 回应

    #5
  6. 优趣 /2010-12-15 18:08

    没中文、对于国内没啥用! 回应

    #6

下面我简单说几句