这个指南解释了如何使用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. 编写的windows程序，崩溃时产生crash dump文件的办法

    一.引言 dump文件是C++程序发生异常时,保存当时程序运行状态的文件,是调试异常程序重要的方法,所以程序崩溃时,除了日志文件,dump文件便成了我们查找错误的最后一根救命的稻草.windows程序 ...

  2. Decorator [ˈdekəreɪtə(r)] 修饰器/装饰器 -- 装饰模式

    装饰模式 -- 原先没有,后期添加的属性和方法 修饰器(Decorator)是一个函数,用来修饰类的行为.这是ES7的一个提案,目前Babel转码器已经支持. 需要先安装一个插件: npm insta ...

  3. Java开发环境配置（Win7 64位系统/server 2008）

    下面以jdk1.8.0_05版本为例: 1.在用户变量里新增变量名:JAVA_HOME 变量值:D:\Java\jdk1.8.0_05 (根据实例路径变换) 2.在用户变量里新增变量名:CLASSPA ...

  4. Python 函数的 return 是否是必须的？

    —— Python 函数的 return 是否是必须的? —— return [表达式] 语句用于退出函数,选择性地向调用方返回一个表达式.不带参数值的return语句返回None. 来看一段关于 r ...

  5. tomcat设置jvm参数

    http://www.quiee.com.cn/archives/592/ Tomcat默认可以使用的内存为128MB,Windows下,在文件{tomcat_home}/bin/catalina.b ...

  6. python --curl重定向到文件范例

      import sys import os import subprocess import time start = time.time() old=sys.stdout f=open('test ...

  7. 摘：static,const,inline,define的意义

    static 1) 产生背景 引出原因:函数内部定义的变量,在程序执行到它的定义处时,编译器为它在栈上分配空间,大家知道,函数在栈上分配的空间在此函数执行结束时会释放掉,这样就产生了一个问题: 如果想 ...

  8. 迭代器类vector::iterator 和 vector::reverse_iterator 的实现、迭代器类型、常用的容器成员

    一.迭代器 迭代器是泛型指针 普通指针可以指向内存中的一个地址 迭代器可以指向容器中的一个位置 STL的每一个容器类模版中,都定义了一组对应的迭代器类.使用迭代器,算法函数可以访问容器中指定位置的元素 ...

  9. Web服务（Web Service）相关概念

    1.概述 Web服务技术(Web Service )是一种面向服务的架构技术,通过标准的Web协议提供服务,保证不同平台的应用服务能够互相操作. 因为Web服务公布的数据基于XML格式和 SOAP协议 ...

  10. C# 添加，修改，删除Xml节点 摘录

    C# 添加,修改,删除Xml节点 //添加xml节点    private void AddXml(string image, string title)     {        XmlDocume ...