P粉7879344762023-08-27 11:21:36
font-stretch を使用して、これらのフォントの中から伸縮フォントを選択できます。使用しているフォントが圧縮または展開フォントを提供していない場合、このプロパティは効果がありません。
P粉5671123912023-08-27 10:45:57
Google Fonts のユーザー インターフェースは、現在でも静的/単一ウェイト CSS 出力を優先しています。
ただし、可変フォントの @font-face ルールを出力するように API を手動で強制することもできます:
範囲区切り記号として '..' を使用することが重要です - そうしないと、CSS に複数の静的な woff2 ファイル URL が含まれることになります。
さらに、Google の API は、下位互換性 (可変フォントをサポートしていないブラウザ向け) を提供するために、 ユーザー エージェント検出 (ブラウザ スニッフィングとも呼ばれます) を使用します。 これは理にかなっています...残念ながら、これはあまりうまく機能しません。Opera のような一部のブラウザ (VF を完全にサポートします) も静的フォントを受け取ります。 (これは他の Chromium/Blink ベースのブラウザでも機能する可能性があります)
回避策として、上記の CSS URL を Firefox で開くことをお勧めします。結果は次のようになります:
リーリーfont-weight および font-stretch 属性値には、太さ/幅の範囲を示す 2 つの値が含まれることに注意してください。これは、正しい (変数) ルールを取得したことを示す良い指標です。