A first look at Google Font [Translated from Google official documentation]_html/css_WEB-ITnose

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

一个快速的例子： 

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

Html代码  

1.   
2.     
3.       
4.     
5.       body {  
6.         font-family: 'Tangerine', serif;  
7.         font-size: 48px;  
8.       }  
9.       
10.     
11.     
12.     

    Making the Web Beautiful!

      
13.     
14.   

 

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

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

Html代码  

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

 

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


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

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

Html代码  

1.   

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

Html代码  

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

 

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

Html代码  

1. Your text

Note: When defining a web font in a CSS stylesheet, always list at least one web-safe fallback font (fallback web- safe font ) is used to avoid undesirable behavior. Specifically, add a CSS default font at the end of the list, like one named "serif" or "sans-serif". This way the browser can fall back to its default font if necessary.


For a list of web fonts you can use, see the Google Font Catalog .


Specify the font set and style in the stylesheet's URL:

To decide what URL to use in your stylesheet connection, you need to download the URL from Google The base URL of the font API starts:

Html code

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

Then add the URL parameters of the font set, and you can use the name and style of one or more font sets.
For example, to request the Inconsolata font:

Html code

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

Note: Replace all spaces in the font set name with plus signs ( ).

When requesting multiple font sets, use vertical bars (|) to separate the names.
For example, to request Tangerine, Inconsolata, and Droid Sans fonts:

Html code

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

Requesting multiple fonts will allow you to use all of them on your page. (But don't get too outrageous, most pages don't need a very large number of fonts, and requesting many fonts will make your page load slower.)
The Font API provides a plain version of the requested font by default. To request another style or size, add a colon (:) after the font name, followed by a list of styles and sizes separated by commas (,).
For example:

Html code

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

To know what sizes and styles of fonts are provided, you need to check the Google Font Directory.
For each style you request, you can provide either a full name or an abbreviation, and for the size, you can specify an additional number:

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

For example, to request "Cantarell" italic and "Droid Serif" bold, you can use any of the following URLs:

Html code

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

Html code

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

Html code

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

Specify a subset of scripts:

Some fonts support multiple scripts (like Latin and Cyrillic) in the Google Fonts directory, in order to specify Which subset will be downloaded requires adding the subset parameter after the URL.

For example, to specify the Cyrillic subset for the Philosopher font, the URL should be written as:

Html code

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

To request Latin and Cyrillic subsets for the Philosophe font, the URL should be written:

Html code

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

To get For a complete list of fonts and font subsets, please refer to the Google Fonts Catalog .

The above is translated from Google official documents, original text link: http://code.google.com/intl/zh-CN/apis/webfonts/docs/ getting_started.html

Although the official link is zh-CN, it is still in English when I open it. I translated it myself and the translation was very poor. . . . .