cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menyelesaikan masalah bahawa atribut regangan fon tidak boleh dimulakan

<p>font-stretch属性根本不起作用。这是我的代码：</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <kepala> <meta charset="utf-8"> <tajuk>font-stretch</title> <gaya> p { saiz fon: 5em; font-family: 'Myriad Pro'; } </style> </head> <badan> <p> <span style="font-stretch: ultra-condensed">P</span> <span style="font-stretch: extra-condensed">P</span> <gaya span="regangan fon: pekat">P</span> <gaya span="regangan fon: separa pekat">P</span> <span style="font-stretch: normal">P</span> <gaya span="regangan fon: separa kembang">P</span> <span style="font-stretch: dikembangkan">P</span> <span style="font-stretch: extra-expanded">P</span> <span style="font-stretch: ultra-expanded">P</span> </p> </badan> </html></pre> <p>我已经尝试了很多其他字体，问题仍然存在。请帮忙解决</p>
P粉676821490P粉676821490449 hari yang lalu508

membalas semua(2)saya akan balas

  • P粉787934476

    P粉7879344762023-08-27 11:21:36

    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.

    balas
    0
  • P粉567112391

    P粉5671123912023-08-27 10:45:57

    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;
}
    <p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontStretch" value="50" min="50" max="200" step="5"></p>
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="200" min="200" max="900" step="10"></p>
<p id="variableTest" style="font-stretch:50%" class="inconsolata variableTest">Hamburgefons</p>

<h2>Variable fonts Example</h2>

<p>
  <span style="font-stretch: ultra-condensed">P</span>
  <span style="font-stretch: extra-condensed">P</span>
  <span style="font-stretch: condensed">P</span>
  <span style="font-stretch: semi-condensed">P</span>
  <span style="font-stretch: normal">P</span>
  <span style="font-stretch: semi-expanded">P</span>
  <span style="font-stretch: expanded">P</span>
  <span style="font-stretch: extra-expanded">P</span>
  <span style="font-stretch: ultra-expanded">P</span>
</p>

<h2>Static fonts Example (custom fonts to widths mapping)</h2>
<p class="customMap">
  <span style="font-stretch: 50%">g</span>
  <span style="font-stretch: 200%">g</span>
</p>


<script>
  fontStretch.addEventListener('change', (e) => {
    variableTest.style.fontStretch = e.currentTarget.value + '%';
  });

  fontWeight.addEventListener('change', (e) => {
    variableTest.style.fontWeight = e.currentTarget.value;
  })
</script>

    balas
    0
  • Batalbalas