这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上，然后把字体关联到这个CSS样式。

一个快速的例子：

这是一个例子，复制下面的HTML代码到一个文件中：

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  4. <style>
  5. body {
  6. font-family: 'Tangerine', serif;
  7. font-size: 48px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>Making the Web Beautiful!</h1>
  13. </body>
  14. </html>

用一个现代浏览器打开这个HTML文件，你就可以看到页面显示如下，用了一个叫做“Tangerine”的字体：


那个句子是普通的文本，所以你可以通过使用CSS来改变它的样式。试着在前面的例子中添加一个阴影的样式：

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

你可以看到，文字下面有阴影了：


 这只是你能用字体API和CSS做东西的一个开始。

概述： 
您开始使用Google字体API只需要两个步骤：
1.添加一个样式表来请求网络字体

  1. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2.同样，在一个样式表中定义一个使用所请求的网络字体的节点

  1. CSS selector {
  2. font-family: 'Font Name', serif;
  3. }

或者在这个节点上使用内嵌的样式

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

    注意： 当在CSS样式表中定义一个网络字体时，总是要列出至少一个网络安全的回退字体（fallback web-safe font ）用来避免不希望的行为。特别是在列表的最后添加一个CSS默认字体，像名为“serif”或者“sans-serif”的字体。这样的话在必要的时候浏览器可以回退到它的默认字体。

您可以使用的网络字体一览，可以参见 谷歌字体目录 。

在样式表的URL中指定字体集和样式：

要决定在您的样式表连接中使用什么URL，就需要从谷歌字体API的基本URL开始：

  1. http://fonts.googleapis.com/css

然后加入字体集的URL参数，可以使用一个或多个字体集的名字和样式。
例如，请求 Inconsolata 字体：

  1. http://fonts.googleapis.com/css?family=Inconsolata

    注意： 要用加号（+）替换字体集名字中的所有空格。

要请求多个字体集时，要用竖线（|）来隔开名字。
例如，要请求Tangerine , Inconsolata , 和 Droid Sans 三种字体:

  1. http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

请求多种字体，可以允许您在您的页面上使用所有这些字体。（但是您也不要太离谱，大多数页面不需要非常多的字体，而且请求很多字体会使您的页面加载变慢。）
字体API默认情况下提供了所请求字体的普通版本。要请求其它的样式或大小，在字体的名字后面加一个冒号（：），跟随在后的一系列的样式和大小用逗号（，）分格。
例如：

  1. http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

要知道提供的字体有哪些大小和样式，需要查询谷歌字体目录 。
对于您所请求的每一个样式，您既可以提供全名也可以提供缩写，对于大小，您可以另外指定一个数字：

样式 符号
斜体 italic 或 i
粗体 bold 或 b 或者是一个数字，就像700
粗体 斜体 bolditalic 或 bi

例如，请求 “Cantarell” 斜体 和 “Droid Serif”粗体，您可以使用下面的任何一个URL：

  1. http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
  1. http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
  1. http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

 指定脚本的子集：

一些字体在谷歌字体目录中支持多种脚本（就像拉丁和西里尔），为了指定哪一个子集将被下载，需要在URL后面增加子集参数。

例如，为Philosopher 字体指定西里尔子集，URL应该写成：

  1. http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

为Philosophe 字体请求拉丁和西里尔子集，URL应该写成：

  1. http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

要得到一个完整的字体和字体子集的列表，请参照谷歌字体目录 。

以上翻译自Google官方文档，原文连接：http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

虽然官方连接里是zh-CN，但打开还是英文的，自己翻译了一下，翻的很不好。。。。。

谷歌字体（Google Font）初探 [翻译自Google官方文档]的更多相关文章

  1. Add In 简介（主要翻译于ESRI官方文档）

    为ArcGIS桌面端建立Add In插件 平时以工作为主,有空时翻译一些文档,顺便练习英文,这个是因为用Add In来学习一下. 主要包括: 关于Add In 什么时候使用Add In Python ...

  2. 【JAVA集合框架一 】java集合框架官方介绍 Collections Framework Overview 集合框架总览 翻译 javase8 集合官方文档中文版

    原文链接: https://docs.oracle.com/javase/8/docs/technotes/guides/collections/overview.html 原文内容也一并附加在本文最 ...

  3. [翻译]：Cinemachine 官方文档（0）

    目录 Overview : Installation and Getting Started :安装并开始 User Guide :用户指南 What is Cinemachine? : 什么是Cin ...

  4. 在 Ubuntu 上安装 TensorFlow (官方文档的翻译)

    本指南介绍了如何在 Ubuntu 上安装 TensorFlow.这些指令也可能对其他 Linux 变体起作用, 但是我们只在Ubuntu 14.04 或更高版本上测试了(我们只支持)  这些指令. 一 ...

  5. [翻译]PyMongo官方文档

    PyMongo官方文档翻译 周煦辰 2016-06-30 这是本人翻译的PyMongo官方文档.现在网上分(抄)享(袭)的PyMongo博客文章很多,一方面这些文章本就是抄袭的,谈不上什么格式美观,另 ...

  6. Kryo官方文档-中文翻译

    Kryo作为一个优秀的Java序列化方案,在网上能找到不少测评,但未见系统的中文入门或说明文档.官方文档是最好的学习文档.虽然英文不差,但啃下来毕竟没母语来的舒服.这里抽出时间做些翻译,以方便大家查阅 ...

  7. Google Android官方文档进程与线程(Processes and Threads)翻译

    android的多线程在开发中已经有使用过了,想再系统地学习一下,找到了android的官方文档,介绍进程与线程的介绍,试着翻译一下. 原文地址:http://developer.android.co ...

  8. 人工智能系统Google开源的TensorFlow官方文档中文版

    人工智能系统Google开源的TensorFlow官方文档中文版 2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,机器学习作为人工智能的一种类型,可以让软件根据大量的 ...

  9. 别开心太早，Python 官方文档的翻译差远了

    近几天,很多公众号发布了 Python 官方文档的消息.然而,一个特别奇怪的现象就发生了,让人啼笑皆非. Python 文档的中文翻译工作一直是“默默无闻”,几个月前,我还吐槽过这件事<再聊聊P ...

随机推荐

  1. python获取系统时间代码解析

    import time     print time.time()    输出的结果是:    1279578704.6725271 但是这样是一连串的数字不是我们想要的结果,我们可以利用time模块 ...

  2. C#基础视频教程4.3 如何编写简单的计算器

    我们接着往下改,为了让这个计算器更加实用,我们要像官方的计算器一样可以接着计算(你算出来一笔数据之后,可以接着累加累减,我们暂时不考虑加括号,优先级之类的,因为绝大部分情况下我们打开计算器就是为了进行 ...

  3. iOS tabbar 图片，最佳大小方式

    iOS tabbar 图片,最佳大小方式 文档大小 30 *30 retaina 60 *60 最佳大小 48 *32 参考:http://stackoverflow.com/questions/15 ...

  4. 算法笔记_023:拓扑排序（Java）

    目录 1 问题描述 2 解决方案 2.1 基于减治法实现 2.2 基于深度优先查找实现 1 问题描述 给定一个有向图,求取此图的拓扑排序序列. 那么,何为拓扑排序? 定义:将有向图中的顶点以线性方式进 ...

  5. 30、Arrays工具类

    1.查询元素 int binarySearch(type[] a,type key):使用二分法查询key元素值在a数组中出现的索引:如果a数组不包含key元素,则返回负数.调用该方法时要求数组中元素 ...

  6. Android酷炫加载进度动画

    概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...

  7. 卡特兰数（Catalan数）

    首先奉上高中的排列组合公式,防止某些人忘记了 卡特兰数: 规定h(0)＝1,而h(1)＝1,h(2)＝2,h(3)＝5,h(4)＝14,h(5)＝42,h(6)＝132,h(7)＝C(14,7)-C( ...

  8. 【LeetCode】66. Plus One (2 solutions)

    Plus One Given a non-negative number represented as an array of digits, plus one to the number. The ...

  9. GPU 编程入门到精通（四）之 GPU 程序优化

    博主因为工作其中的须要,開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识,鉴于之前没有接触过 GPU 编程.因此在这里特地学习一下 GPU 上面的编程.有志同道合的小伙伴 ...

  10. exception in initAndListen: 12596 old lock file, terminating

    #mongd -f /etc/mongodb.conf时报错 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFjc29uX2JhaQ==/font/5a ...