フォントストレッチ属性が起動できない問題の解決方法
P粉676821490
2023-08-26 14:42:23
<p>font-stretch プロパティは根本的に機能しません。これは私たちの代コードです:</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<頭>
<meta charset="utf-8">
<title>font-stretch</title>
<スタイル>
p {
フォントサイズ: 5em;
フォントファミリー: 'Myriad Pro';
}
</スタイル>
</head>
<本体>
<p>
<span style="font-stretch: 超凝縮">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: 半展開">P</span>
<span style="font-stretch:expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: 超拡張">P</span>
</p>
</ボディ>
</html></pre>
<p>私たちは他にも多数のフォントを試してきましたが、問題はまだ存在します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
font-stretchを使用して、これらのフォントの中から伸縮フォントを選択できます。使用しているフォントが圧縮または展開フォントを提供していない場合、このプロパティは効果がありません。Google Fonts のユーザー インターフェースは、現在でも静的/単一ウェイト CSS 出力を優先しています。
ただし、可変フォントの
リーリー@font-faceルールを出力するように API を手動で強制することもできます:範囲区切り記号として '..' を使用することが重要です - そうしないと、CSS に複数の静的な
woff2ファイル URL が含まれることになります。さらに、Google の API は、下位互換性 (可変フォントをサポートしていないブラウザ向け) を提供するために、 ユーザー エージェント検出 (ブラウザ スニッフィングとも呼ばれます) を使用します。 これは理にかなっています...残念ながら、これはあまりうまく機能しません。Opera のような一部のブラウザ (VF を完全にサポートします) も静的フォントを受け取ります。 (これは他の Chromium/Blink ベースのブラウザでも機能する可能性があります)
回避策として、上記の CSS URL を Firefox で開くことをお勧めします。結果は次のようになります:
リーリーfont-weightおよびfont-stretch属性値には、太さ/幅の範囲を示す 2 つの値が含まれることに注意してください。これは、正しい (変数) ルールを取得したことを示す良い指標です。例: Inconsolata 可変フォント