Основы API шрифтов Google онлайн урок.


# Ссылка на файлы CSS

Вы по существу ссылаетесь непосредственно на файлы CSS на Google.com. Через URL-параметры вы определяете, какие шрифты вы хотите, и какие варианты этих шрифтов.

<head>

...

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>
Идея:Вы можете избежать дополнительного сетевого запроса, открыв эту таблицу стилей и скопировав и вставив материал @ font-face в свою основную таблицу стилей. Но будьте осторожны: Google делает некоторый пользовательский обнюхивающий материал, чтобы иногда обслуживать разные вещи на разных устройствах по мере необходимости. Вы не выиграете от этого, если это будет сделано.

# CSS

В своем CSS вы можете указать эти новые шрифты по имени для любого элемента, который вы хотите использовать.

body { 
font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
font-size: 48px;
}

# FontLoader

Вы можете использовать JavaScript FontLoader вместо ссылки на CSS. Он имеет преимущества, такие как управление Flash Unstyled Text (FOUT), а также недостатки, например, тот факт, что шрифты не будут загружаться для пользователей с выключенным JavaScript.

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Cantarell']
}
});
</script>
<style type="text/css">
.wf-loading h1 { visibility: hidden; }
.wf-active h1, .wf-inactive h1 {
visibility: visible; font-family: 'Cantarell';
}
</style>

Эти имена классов, например.wf-load, применяются к& lt; html & gt;. Поэтому обратите внимание, когда шрифты «загружаются», вы можете использовать это имя класса, чтобы скрыть текст. Затем, когда они будут показаны, сделайте их видимыми снова. Вот как контролируется FOUT.