CSS と SVG を使用してフォント サイズをコンテナに比例して拡大縮小するにはどうすればよいですか?

CSS および SVG テクニックを使用したコンテナのサイズに合わせたフォント サイズの調整

Q: コンテナ内のフォント サイズを設定して、コンテナの寸法に対して一定のサイズを設定しますか?

A: この課題に対処するには、主に 2 つのアプローチがあります。 CSS と SVG:

1. vw 単位を使用した CSS:

フォント サイズをビューポート幅のパーセンテージとして設定したい場合は、「vw」単位を利用します:

#mydiv {
  font-size: 5vw;
}

2 。 HTML に埋め込まれた SVG:

または、SVG を HTML に埋め込むこともできます。以下に例を示します:

<svg viewBox="0 0 100 100">
  <text x="0" y="50" font-size="1">
    Text Data
  </text>
</svg>

この場合、フォント サイズ「1」は SVG 要素のサイズの 100 分の 1 を表します。

追加情報:

パーセンテージは継承されたフォントに対して相対的に解釈されるため、CSS 計算を使用してこの効果を実現することはできないことに注意してください。コンテナのサイズではなく、サイズです。この目的には「bw」（ボックス幅）のような単位が便利ですが、現在 CSS では使用できません。

以上がCSS と SVG を使用してフォント サイズをコンテナに比例して拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。