Dasar-dasar Google Font API - Trik CSS

Anonim

Tautan ke file CSS

Anda pada dasarnya melakukan hotlink langsung ke file CSS di Google.com. Melalui parameter URL, Anda menentukan font mana yang Anda inginkan, dan variasi font tersebut.

…
Ide: Anda dapat menghindari permintaan jaringan tambahan dengan membuka stylesheet itu dan menyalin-dan-menempel hal @ font-face ke dalam stylesheet utama Anda. Namun berhati-hatilah: Google melakukan beberapa hal yang diendus Agen Pengguna untuk terkadang menyajikan hal yang berbeda ke perangkat yang berbeda sesuai kebutuhan. Anda tidak akan mendapatkan keuntungan dari itu jika dilakukan dengan cara ini.

CSS

Di CSS Anda, Anda kemudian dapat menentukan font baru ini berdasarkan nama pada elemen apa pun yang ingin Anda gunakan.

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

FontLoader

Anda dapat menggunakan FontLoader JavaScript daripada menautkan ke CSS. Ini memiliki kelebihan, seperti mengontrol Flash of Unstyled Text (FOUT), dan juga kerugian, seperti fakta bahwa font tidak dapat dimuat untuk pengguna dengan JavaScript nonaktif.

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

Nama kelas tersebut, misalnya .wf-loadingditerapkan ke elemen. Jadi perhatikan saat font "dimuat", Anda dapat menggunakan nama kelas itu untuk menyembunyikan teks. Kemudian saat mereka ditampilkan, buat mereka terlihat lagi. Begitulah cara FOUT dikendalikan.