Google Font API

Google nedávno představil novou webovou službu nazvanou Font API. Google Font API poskytuje vývojářům prostředek, pomocí kterého mohou rychle a bezbolestně přidávat vlastní písma na své webové stránky. Pojďme se rychle podívat na způsoby, jakými lze použít Google Font API.

Zobrazit ukázku

Formát požadavku na písmo

Mnoho písem v archivu písem Google je k dispozici nejen ve standardním formátu, ale také v kurzívě, tučném a tučném písmu. Formát pro vyžádání dané varianty písma je:

{font}:{variant1},{variant2}

Zde je několik příkladů vyžádání jednotlivých variant:

Cantarell
Cantarell:bold
Cantarell:italic
Cantarell:bolditalic

Nyní se podívejme, jak můžeme na naši stránku zahrnout speciální písma a použít je.

Metoda šablony stylů CSS

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

Šablona stylů se začlení do stránky stejně jako jakákoli jiná šablona stylů. Řetězec dotazu s parametrem rodiny se připojí k adrese URL šablony stylů obsahující písma, která se mají načíst. Pomocí "|" lze vyžádat více písem (dýmka) charakter. Několik příkladů:

<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" />

Věnujte chvíli prozkoumání šablony stylů od Googlu:

@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');
}

Metoda @font-face vkládání písem je metoda, kterou Google zvolil. Použití písma je stejně jednoduché jako použití systémového písma:

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

Písmo můžete také vložit do atributu „style“ daného prvku:

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

Bezbolestnější už to nebude.

Jednoduchá metoda JavaScript

Google také poskytuje jednoduchou metodu JavaScriptu pro zahrnutí vlastních písem na stránku. Tato metoda vyžaduje zahrnutí souboru JavaScript JSAPI a velmi malého úryvku JavaScriptu:

<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>

Výběr variant písma se provádí pomocí jednoduchého oddělovače ":" mezi písmem a variantou:

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

Můžete také načíst více písem v rámci rodinného pole:

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

Jednoduché, ne? Pokud je to pro vás příliš jednoduché, existuje pokročilejší metoda.

Pokročilá metoda JavaScript

Pokročilá metoda JavaScriptu využívá asynchronní metodu JavaScript spárovanou s objektem WebFontConfig. Pokročilá metoda také přidává zpětná volání pro požadavky na písma:

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);
})();

Pokud jste jako já, loooooooovee zpětná volání JavaScriptu. Tuto metodu byste použili, pokud byste chtěli „předem načíst“ písma před přiřazením písem ke konkrétním prvkům. Na této metodě je také skvělé, že Google používá „aktivní“ a „neaktivní“ reprezentace třídy CSS v prvku HTML k určení, jaká by měla být nastavení prvku před a po načtení písma:

.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
}

Bohužel musíte tyto direktivy přidat do vaší šablony stylů; Raději ne.

Zobrazit ukázku

Co si myslíte o nejnovějším JavaScript API Google? Na jedné straně vidím rozhraní Font API jako extrémně užitečné, ale na druhé straně vidím, že se Google snaží pevněji ovládnout web; snaží se, aby na nich byly webové stránky závislé. Jaké jsou vaše myšlenky?