Mendapatkan sebahagian besar fon berubah -ubah di fon google

Saya telah menghabiskan masa bertahun -tahun membangunkan keluarga rekursif Sans & Mono Font (dengan pasukan yang hebat!), Dan akhirnya ia boleh didapati di Google Fonts!

Ingin menggunakannya dengan segera? Inilah kod embed untuk keluarga fon pembolehubah rekursif lengkap dari font Google (tetapi untuk fleksibiliti dan prestasi yang optimum, baca!).

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Rekursif bermula sebagai tesis induk reka bentuk jenis saya di Kabk Typemedia. Kemudian, jenis saya, jenis anak panah, telah ditugaskan oleh fon Google untuk melengkapkan dan melepaskan rekursif sebagai sumber OFL sumber terbuka.

Terokai rekursif dan keupayaannya di Recursive.Design.

Rekursif adalah keluarga fon yang serba boleh untuk laman web dan kod, yang menawarkan pemaju dan pereka gabungan estetika moden dan teknologi fon canggih.

Mari jelaskan: Fon pembolehubah mengandungi pelbagai gaya dalam satu fail, yang membolehkan pengguna memilih Styles dengan lancar. Rentang ini dipanggil paksi berubah -ubah , mewakili parameter seperti berat, lebar, saiz optik, slant, dan banyak lagi. Rekursif membolehkan anda mengawal "monospacedness" (dari mono hingga sans) dan "kasual" (dari linear ke gaya berus). Setiap keluarga fon boleh mempunyai pelbagai paksi, pertimbangan reka bentuk utama.

Font Google telah menambah fon berubah -ubah, tetapi banyak (termasuk rekursif) menawarkan pilihan yang jauh lebih gaya daripada menunjukkan antara muka lalai. Untuk kemudahan penggunaan, fon Google memudahkan paparan, terutamanya menunjukkan paksi "berat". Walau bagaimanapun, ini menyembunyikan gaya pratetap 64 rekursif dan lima paksi berubah -ubah. Halaman Google Fonts menunjukkan lapan gaya dan satu paksi, manakala rekursif sebenarnya menawarkan lebih banyak lagi.

Rekursif boleh dibahagikan kepada empat "subfamili":

• SANS Linear: Font SANS-SERIF berkadar standard (ditunjukkan pada font Google).
• Sans kasual: font "berus kasual" berkadar.
• Mono Linear: Font Monospace Standard.
• Mono kasual: fon monospace "berus kasual".

Menggambarkan ini lebih mudah daripada menerangkannya. Dua jadual (satu untuk sans, satu untuk mono) menggambarkan 64 contoh bernama (tidak ditunjukkan di sini untuk keringkasan). Antara muka Font Google hanya menunjukkan lapan, ditambah paksi berat.

Walaupun pendekatan berat sahaja ini dapat difahami memandangkan asas pengguna Google Fonts, ia mengehadkan potensi font. API Font Google menawarkan penyelesaian.

Memahami fon berubah -ubah dan kecekapan mereka

Pemaju web tahu tidak berkhidmat JPEG yang besar. Prinsip yang sama berlaku untuk fon. Aksara subsetting dan menggunakan mampatan Woff2 mengurangkan saiz fail.

Fon berubah -ubah adalah seperti fail video: ia mengandungi julat maklumat (paksi berubah -ubah) yang boleh dipangkas atau "disematkan" kepada nilai tertentu, mengurangkan saiz fail. Tidak seperti video, fon menggunakan bentuk vektor. Fon pembolehubah mempunyai pelbagai "lokasi sumber" (kerangka key). Gaya dicipta secara matematik interpolasi di antara lokasi -lokasi ini (delta). Pemangkasan fon berubah bermakna mengeluarkan delta yang tidak perlu.

Sebagai contoh, paksi kasual rekursif interpolat antara "linear" dan "kasual" huruf. Animasi Ampersand Glyph (tidak ditunjukkan di sini) menunjukkan ini.

Setiap paksi tambahan biasanya menggandakan bilangan lukisan. API Font Google membolehkan anda memilih hanya paksi yang anda perlukan, menghasilkan saiz fail yang lebih kecil.

Tag paksi berubah -ubah

Singkatan paksi adalah tag empat huruf (huruf kecil untuk paksi microsoft yang ditakrifkan, huruf besar untuk paksi tersuai). Lima paksi standard wujud:

• wght - Berat
• wdth - Lebar
• opsz - Saiz Optik
• ital - Italic
• slnt - slant

Rekursif menggunakan tiga paksi tersuai ( MONO , CASL , CRSV ) ditambah wght dan slnt .

Google Fonts API

Antara muka Font Google menjana URL yang memanggil API Google Fonts. URL ini mempunyai bahagian:

1. URL API ( https://fonts.googleapis.com/css2 )
2. Parameter keluarga fon
3. font-display

Untuk menggunakan berat badan rekursif biasa (sans linear), gunakan:

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

Atau, dalam html:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

Kemudian, gunakan font dalam CSS:

 <code>body { font-family: 'Recursive', sans-serif; }</code>

Nilai paksi lalai: MONO 0 , CASL 0 , wght 400 , slnt 0 , CRSV 0 .

Menentukan gaya atau paksi

API menawarkan dua pendekatan:

1. Penyenaraian paksi dan nilai khusus.
2. Penyenaraian paksi dan julat.

Untuk mendapatkan gaya kasual, gunakan Recursive:CASL@1 . Untuk mono biasa biasa:

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

Untuk biasa dan berani:

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Fon Google sering berfungsi satu fon pembolehubah yang meliputi pelbagai gaya yang diminta. Untuk pengeluaran, permintaan hanya gaya yang diperlukan. Menggunakan paksi berubah menawarkan fleksibiliti.

Mendapatkan fon pembolehubah penuh

Untuk memaksimumkan fleksibiliti, gunakan paksi berubah -ubah. Daripada Recursive:wght@400;700 , gunakan Recursive:[email protected] (atau Recursive:[email protected] untuk julat berat penuh). Tambah paksi mengikut abjad: Recursive:wght,[email protected],0..1 .

URL font pembolehubah penuh:

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

Dalam HTML:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Mengimbangi fleksibiliti dan saiz fail

Setiap paksi meningkatkan saiz fail. Menghilangkan paksi yang tidak digunakan. Untuk gaya kasual mono dengan pelbagai berat:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

(Nota: di atas mungkin tidak berfungsi dengan betul. Rujuk artikel asal untuk kemas kini.)

Keluarga fon berganda boleh ditambah, abjad dengan nama.

Menggunakan fon berubah -ubah

Paksi standard menggunakan sifat CSS standard ( font-weight: 425; ). Semua paksi menggunakan font-variation-settings . Untuk gaya mono kasual yang sangat berat:

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings berfungsi dengan baik dengan sifat adat CSS.

Butiran lanjut mengenai reka bentuk fon berubah boleh didapati di VariableFonts.io dan CSS-Tricks.

Prestasi fon berubah -ubah

Menggunakan semua 64 gaya rekursif sebagai jumlah fail berasingan ~ 6.4 mb. Fon pembolehubah ialah ~ 537 kb. Woff2 rekursif yang disuburkan dengan julat berat penuh ialah 60 kb; Gaya tunggal ialah 25 kb. Menggunakan tiga berat menjimatkan ~ 15 kb dengan font pembolehubah. Subset font pembolehubah penuh ialah 281 kb. Di luar saiz fail, fon berubah -ubah menawarkan fleksibiliti reka bentuk. Font Google mengoptimumkan penghantaran fon.

Selebihnya artikel asal ditinggalkan untuk keringkasan, tetapi ia berterusan dengan maklumat tambahan mengenai penggunaan API, meneroka fon pembolehubah lain, dan mempromosikan kerja penulis.

Atas ialah kandungan terperinci Mendapatkan sebahagian besar fon berubah -ubah di fon google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!