谷歌api

Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font API can be used.

Google最近推出了一项名为Font API的新网络服务。 Google的Font API为开发人员提供了一种方法，使他们可以快速，轻松地向其网站添加自定义字体。 让我们快速浏览一下Google Font API的使用方式。

字体请求格式 (Font Request Format)

Many of the fonts within Google's font archive are available not only in standard format but also in Italic, Bold, and Italic Bold.  The format for requesting a given font variant is:

Google字体档案库中的许多字体不仅可以使用标准格式，还可以使用Italic，Bold和Italic Bold。 请求给定字体变体的格式为：

{font}:{variant1},{variant2}

Here are a few examples of requesting each variant:

以下是请求每个变体的一些示例：

Cantarell
Cantarell:bold
Cantarell:italic
Cantarell:bolditalic

Now let's see how we can include special fonts in our page and use these them.

现在，让我们看看如何在页面中包含特殊字体并使用它们。

CSS样式表方法 (The CSS Stylesheet Method)

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

The stylesheet gets included into the page like any other stylesheet would be.  A query string with a family parameter is appended to the stylesheet's URL containing the font(s) to be loaded.  Multiple fonts can be requested with the use of the "|" (pipe) character.  A few examples:

样式表会像其他样式表一样包含在页面中。 具有Family参数的查询字符串将附加到样式表的URL中，该URL包含要加载的字体。 使用“ |”可以请求多种字体 (管道)字符。 一些例子：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn|IM+Fell+Great+Primer" />

Take a moment to examine the stylesheet from Google:

花点时间检查一下Google的样式表：

@font-face {
font-family: 'IM Fell Great Primer';
font-style: normal;
font-weight: normal;
src: local('IM Fell Great Primer'), url('http://themes.googleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype');
}
@font-face {
font-family: 'Vollkorn';
font-style: normal;
font-weight: normal;
src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype');
}

The @font-face method of font embedding is Google's chosen method.  Using the font is as simple as using a system font:

字体嵌入的@ font-face方法是Google选择的方法。 使用字体就像使用系统字体一样简单：

.mySpecialFontClass { font-family:'Vollkorn', serif; }

You may also embed the font within the "style" attribute of a given element:

您也可以将字体嵌入给定元素的“ style”属性中：

<p style="font-family:'Vollkorn';">Lorem ipsum....</p>

I t doesn't get more painless than that.

没有比这更轻松的了。

简单JavaScript方法 (The Simple JavaScript Method)

Google also provides a simple JavaScript method for including custom fonts within a page.  This method requires including the JSAPI JavaScript file and a very small snippet of JavaScript:

Google还提供了一种简单JavaScript方法，用于在页面中包含自定义字体。 此方法需要包含JSAPI JavaScript文件和一小段JavaScript代码：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('webfont','1');
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: ['Tangerine','Cantarell']
}
});
});
</script>

Selecting font variants is done with a simple ":" delimiter between the font and the variant:

通过在字体和变体之间使用简单的“：”定界符来选择字体变体：

WebFont.load({
google: {
families: ['Tangerine:bold']
}
});

You may also load multiple fonts within the families array:

您还可以在family数组中加载多种字体：

WebFont.load({
google: {
families: ['Tangerine:bold','Cantarell','Lobster']
}
});

Simple, no?  If it's too simple for you, there's more advanced method.

简单，不是吗？ 如果对您来说太简单了，那么还有更高级的方法。

高级JavaScript方法 (The Advanced JavaScript Method)

The advanced JavaScript method employes an async JavaScript method paired with a WebFontConfig object.  The advanced method also adds callbacks for font requests:

高级JavaScript方法采用与WebFontConfig对象配对的异步JavaScript方法。 高级方法还为字体请求添加了回调：

WebFontConfig = {
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
/* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
loading: function() {
// do something
},
/* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontloading: function(fontFamily, fontDescription) {
// do something
},
/* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontactive: function(fontFamily, fontDescription) {
// do something
},
/* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontinactive: function(fontFamily, fontDescription) {
// do something
},
/* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
active: function() {
// do something
},
/* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
inactive: function() {
// do something
}
};
/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

If you're like me, you loooooooove JavaScript callbacks.  You would use this method if you wanted to "preload" fonts before assigning fonts to specific elements. What's also great about this method is that Google uses "active" and "inactive" CSS class representations on the HTML element to designate what an element's settings should be before and after a font has been loaded:

如果您像我，则可以放松JavaScript回调。 如果要在将字体分配给特定元素之前“预加载”字体，则可以使用此方法。 此方法的优点还在于Google在HTML元素上使用“活动”和“非活动” CSS类表示形式来指定在加载字体之前和之后元素的设置应为：

.wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */
font-family: serif
}
.wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */
font-family: 'Tangerine', serif
}
.wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */
font-family: serif;
font-size: 16px
}
.wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */
font-family: 'Cantarell', serif;
font-size: 16px
}

Unfortunately you need to add these directives to you stylesheet; I prefer not to.

不幸的是，您需要将这些指令添加到样式表中。 我不想。

What do you think of Google latest JavaScript API?  On one side I see the Font API as extremely useful but the other side of me sees Google trying to grab a stronger hold of the Web;  trying to make websites dependent upon them.  What are your thoughts?

您如何看待Google最新JavaScript API？ 一方面，我认为Font API极为有用，但另一方面，我却认为Google试图抢占网络的基础。 试图使网站依赖他们。 你觉得呢？你有没有什么想法？

翻译自: https://davidwalsh.name/google-fonts-api

谷歌api