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

一个快速的例子： 

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

Html代码  

1.   
2.     
3.       
4.       
5.   
   
   
     
6.     
7.     

   Making the Web Beautiful!

     
8.     
9.   

 

用一个现代浏览器打开这个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

注: CSS スタイルシートで Web フォントを定義するときは、望ましくない動作を避けるために、必ず少なくとも 1 つの Web セーフ フォールバック フォント (フォールバック Web セーフ フォント) をリストしてください。具体的には、「serif」または「sans-serif」という名前の CSS デフォルト フォントをリストの最後に追加します。このようにして、ブラウザは必要に応じてデフォルトのフォントに戻すことができます。


使用できる Web フォントのリストについては、Google Font Directory を参照してください。


スタイルシートの URL でフォント セットとスタイルを指定します:

スタイルシート接続で使用する URL を決定するには、Google Fonts API のベース URL から始めます:

Html コード

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

次に、フォント セットの URL パラメータを追加すると、1 つ以上のフォント セットの名前とスタイルを使用できます。たとえば、Inconsolataフォントをリクエストします。フォント セット 名前内のすべてのスペース。

複数のフォント セットをリクエストする場合は、縦棒 (|) を使用して名前を区切ります。 T たとえば、3 つのフォント:

http://fonts.googleapis.com/CSS? Family = TANCONSOLATA s

複数のフォントをリクエストすると、ページ上でそれらすべてを使用できます。 (ただし、あまり法外にならないようにしてください。ほとんどのページではそれほど多くのフォントは必要ありません。多くのフォントをリクエストすると、ページの読み込みが遅くなります。) Font API は、デフォルトで、リクエストされたフォントのプレーン バージョンを提供します。別のスタイルまたはサイズを要求するには、フォント名の後にコロン (:) を追加し、その後にスタイルとサイズのリストをカンマ (,) で区切って追加します。

例:

Html コード

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

提供されているフォントのサイズとスタイルについては、Google フォント ディレクトリを確認する必要があります。 リクエストするスタイルごとに、フルネームまたは略語を指定でき、サイズについては次の数値を追加で指定できます:

style

symbol

italic

1. italic または i

太字

太字または b または 700 のような数字太字斜体太字斜体または二重

たとえば、「Cantarell」の斜体と「Droid Serif」の太字をリクエストするには、次の URL のいずれかを使用できます: Html コード http://fonts.googleapis.com/css?family = Cantarell:italic|Droid+Serif:bold HTML コード http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b HTML コード http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700 スクリプトのサブセットを指定します: いくつかのフォントGoogle Fonts ディレクトリでは、複数のスクリプト (ラテン語やキリル文字など) がサポートされています。どのサブセットをダウンロードするかを指定するには、URL の後にサブセット パラメータを追加する必要があります。 たとえば、Philosopher フォントのキリル文字サブセットを指定するには、URL を次のように記述する必要があります: Html code http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic for Philosophe ラテン文字とキリル文字のサブセットを要求するフォントの場合、URL は次のように記述する必要があります: Html code http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic 完全なフォントとフォント サブセットのリストについては、Google フォント カタログを参照してください。 上記は Google の公式ドキュメントからの翻訳です。元のリンク: http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html 公式リンクですがは zh- CN ですが、開いたときはまだ英語でした。自分で翻訳しましたが、翻訳が非常に悪かったです。 。 。 。 。