Asas API Font Google - Trik CSS

Anonim

Pautan ke fail CSS

Anda pada dasarnya hotlink terus ke fail CSS di Google.com. Melalui parameter URL, anda menentukan jenis fon yang anda mahukan, dan variasi fon yang mana.

…
Idea: Anda boleh mengelakkan permintaan rangkaian tambahan dengan membuka helaian gaya itu dan menyalin-menampal barang @ font-face ke dalam helaian gaya utama anda. Tetapi berhati-hatilah: Google melakukan beberapa Agen Pengguna yang mengendus barang untuk kadang-kadang melayani perkara yang berbeza ke peranti yang berbeza apabila diperlukan. Anda tidak akan mendapat faedahnya jika dilakukan dengan cara ini.

CSS

Dalam CSS anda, anda boleh menentukan fon baru ini dengan nama pada elemen yang anda mahu menggunakannya.

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

Pemuat fon

Anda boleh menggunakan JavaScript FontLoader dan bukannya memaut ke CSS. Ini mempunyai kelebihan, seperti mengendalikan Flash of Unstyled Text (FOUT), dan juga kelemahan, seperti kenyataan bahawa fon tidak akan dimuat untuk pengguna dengan JavaScript yang tidak aktif.

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

Nama-nama kelas tersebut, misalnya .wf-loadingditerapkan pada elemen. Oleh itu, perhatikan ketika fon "memuatkan", anda boleh menggunakan nama kelas itu untuk menyembunyikan teks. Kemudian apabila ditunjukkan, buat mereka kelihatan lagi. Itulah cara FOUT dikawal.