CSSによるマルチストロークテキストエフェクト
CSSの`text-stroke`プロパティでレトロなマルチストロークテキストエフェクトを再現しようとした際、単一値しか受け付けないため、要素を重ねて調整する必要があった。
各レイヤーで`text-stroke-width`を変化させることで、より本物に近い表現を実現できる。
異なるブラウザ間でのレンダリングに差があり、フォントの種類によっても結果が大きく左右される。
パフォーマンスはCSSフィルタと同程度と悪く、実用的な利用には向かないが、実験や画像生成には適している。
原文の冒頭を表示(英語・3段落のみ)
I used to see that retro multi-stroke text effect quite often and
tried to replicate it using the CSS text-stroke property,
but the results never quite matched.
※ 著作権に配慮し、引用は冒頭3段落までです。続きは元記事をご覧ください。