CSSでの文字縁取りを考える

全2回

CSSで文字表現を突き詰めると、単純な指定では済まない描画上の制約やブラウザ差に直面します。本シリーズでは、縁取り文字を題材に、CSSが持つ描画モデルの特性と限界を整理し、実用的な表現の選択肢を前後編で掘り下げます。

後編 描画上の制約と、その対策

-webkit-text-strokeは手軽に文字の縁取りを実現できますが、ブラウザ間の差異や仕様上の制限もあります。後編ではその制約を整理し、text-shadowやSVGフィルターなどの代替手法を紹介します。

前編 文字縁取りの基本

文字の縁取りは、CSSでは意外と悩みがちです。太さを変えると文字が潰れたり、ブラウザごとに見え方が違ったり。この記事では縁取り文字を安定して制御する考え方と実践的な表現テクニックを整理します。