Bagaimana untuk menyelesaikan masalah bahawa atribut regangan fon tidak boleh dimulakan

Question

Sifat regangan fon tidak berfungsi sama sekali. Ini ialah kod saya: font-stretch

P粉787934476 · Answer

Anda boleh menggunakan font-stretch untuk 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.

P粉567112391 · Answer

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 statik woff2.

Selain itu, API Google menggunakan beberapa pengesanan 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