A Google Font API alapjai - CSS-trükkök

Link CSS fájlokhoz

Lényegében közvetlenül hivatkozik közvetlenül a CSS fájlokra a Google.com-on. Az URL-paramétereken keresztül meghatározhatja, hogy mely betűtípusokat szeretné használni, és ezeknek a változatoknak milyen változatait.

… 

Ötlet: Elkerülheti az extra hálózati kéréseket, ha megnyitja ezt a stíluslapot, és bemásolja és beilleszti a @ font-face cuccot a fő stíluslapba. De vigyázat: A Google némelyik User Agent-et szimatol, hogy szükség esetén különböző dolgokat szolgáltasson különböző eszközöknek. Ebből nem profitál, ha így jár el.

CSS

A CSS-ben ezután megadhatja ezeket az új betűtípusokat név szerint minden elemen, amelyet használni szeretne.

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

FontLoader

Használhatja a FontLoader JavaScript-et a CSS-hez való hivatkozás helyett. Előnyei vannak, mint például a Styled Text Flash (FOUT) vezérlése, és hátrányai is, például az a tény, hogy a betűtípusok nem töltődnek be azoknak a felhasználóknak, akiknek ki van kapcsolva a JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Ezeket az osztályneveket, pl. .wf-loadingAlkalmazzák az elemre. Tehát vegye észre, amikor a betűtípusok „betöltődnek”, ezzel az osztálynévvel elrejtheti a szöveget. Majd amikor megjelennek, tegye őket ismét láthatóvá. Így irányítják a FOUT-ot.