東京・小金井市のWEB制作会社の豆知識

MEMORANDUM

CSS「text-stroke」で文字の縁取りを実装する

CSSで文字を縁取りする際に「text-shadow」を複数回重ねて実装していたのだけれど、「text-stroke」を使用した方法を見つけたのでメモ

.storke {
	-webkit-text-stroke: 3px #0099d9;
	text-stroke: 3px #0099d9;
	paint-order: stroke;
}

尚、文字を透明にして縁取りする場合、「Noto Sans Jp」などの特定の文字では、フォントの合成が甘いのかうまく表示できないので、類似のフォントで代用することをお勧めします。

Noto Sans 日本語

Yu Gothic 日本語

「採用サイトを作ったが応募が増えない」「企業サイトをどう改善すべきか分からない」など、現状の課題整理からでもご相談いただけます。
目的や業種に合わせて、改善すべきポイントを整理し、実現可能な施策をご提案します。

制作・リニューアルありきではなく、まずは"成果につながる構造になっているか"を確認するところからサポートいたします。

※ご相談のみでも問題ありません。現状整理だけのご依頼も歓迎しています。

片寄輝生: 株式会社衆代表/WEB制作者; 実務20年以上。
Web制作全般に携わり、企画・設計から実装・運用まで一貫して対応。
現場で得た知見をもとに、実践的な内容を中心に発信しています。

RANKING