Anda boleh menggunakanfont-stretchuntuk memilih fon padat atau dikembangkan antara fon ini. Sifat ini tidak mempunyai kesan jika fon yang anda gunakan tidak menyediakan fon yang dimampatkan atau dikembangkan.

UI Google Fonts pada masa ini masih lebih suka output CSS statik/berat tunggal.

Tetapi anda boleh memaksa API untuk mengeluarkan@font-faceperaturan secara manual untuk fon berubah:

https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900

Penting untuk menggunakan'..' sebagai pemisah julat- jika tidak, anda akan mendapat CSS yang mengandungi berbilang URL fail statikwoff2.

Selain itu, API Google menggunakan beberapapengesanan ejen pengguna (juga dikenali sebagai menghidu penyemak imbas)untuk menyediakan keserasian ke belakang (untuk penyemak imbas yang tidak menyokong fon berubah-ubah). Ini masuk akal... Malangnya, ini tidak berfungsi dengan baik: sesetengah penyemak imbas seperti Opera (yang menyokong VF dengan sempurna) juga menerima fon statik. (Ini mungkin juga berfungsi untuk penyemak imbas berasaskan Chromium/Blink lain)

Sebagai penyelesaian, saya mengesyorkan membuka URL CSS di atas dalam Firefox. Hasilnya sepatutnya kelihatan seperti:

@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 200 900; font-stretch: 50% 200%; src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2'); }

Notafont-weight和font-stretchNilai atribut mengandungi 2 nilai, menunjukkan julat berat/lebar. Ini adalah penunjuk yang baik bahawa anda telah memperoleh peraturan (pembolehubah) yang betul.

Contoh: Fon berubah Inconsolata

@font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 200 900; font-stretch: 50% 200%; src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2"); } body { font-size: 36px; font-family: sans-serif; } h2 { font-size: 0.5em; color: red; } p { font-family: Inconsolata; transition: 0.8s; } .customMap { font-family: sans-serif; } @font-face { font-family: "Inconsolata2"; src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2"); font-stretch: 50%; } @font-face { font-family: "Inconsolata2"; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2'); font-stretch: 200%; font-style: normal; font-weight: normal; } .customMap { font-family: "Inconsolata2"; font-style: normal; }

Font-stretch: 
 
Font-weight: 
 
Hamburgefons
 
Variable fonts Example
 
 P P P P P P P P P 
 
Static fonts Example (custom fonts to widths mapping)
 
 g g