CSSだけ文字の縁取りをする方法
文字の縁取りをしてみたい
目次
text-shadowで縁取り
影を1pxほど全体に付けることにより縁取り感を演出します。
text-shadow: x y blur-radius color; この構文で1つの影を設置できます。4つの値ごとにカンマで区切って複数設置できます。
この影は文字の外側に描画されます。
blurとは
blurはぼかし効果です。
text-shadow: 0 0 4px black;
x、yが0、0なので影が文字の真後に設置されます。文字全体に薄っすら影が付きます。
Helloあい
影を左上に設置
text-shadow: -2px -2px 0 black;
←、↑（左上）に影。マイナス方向に設置します。blurは0です。
左上がマイナス方向で右下がプラス方向です。
Helloあい
4方向に影設置
text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
右下、左上、右上、左下に影。四隅に影を付けると縁取りっぽくなりました。
拡大するとシャギーが目立つ。”e”の終わり、”い”の払いの部分など。
Helloあい
8方向に影設置
text-shadow: 右下、左上、右上、左下、右、左、上、下。
4方向よりは良い仕上がりです。少しシャギーがあります。
平仮名よりアルファベットはシャギーが目立たないように感じました。
Helloあい
blurも当ててみる
Helloあい
Blurを1px。見た目はいい感じです。やわらかい感じです。
拡大するとパキッとしていないが、サイズが小さいなら目立たないと感じました。
strokeで縁取り
-webkit-text-stroke を使用します。このCSSプロパティは非標準のようです。
-webkit-text-stroke: 1px black;
これはショートハンドです。長い名前はこちらです。
-webkit-text-stroke-width
-webkit-text-stroke-color
Helloあい愛藍
綺麗に表示されますね。拡大しても綺麗です。（なんで非標準なのかな？）
Helloあい愛藍
小さいfontだと見難いです。stokeは輪郭線の幅のサイズを指定するので外側、内側にも描画されるようです。フォントが小さいと内側を圧迫してしまいますね。
Helloあい愛藍
ちなみに、背景色と文字色を同じにすると縁だけ目立ちます。
1remサイズ
HELLOあい愛藍 normal
HELLOあい愛藍 4方向
HELLOあい愛藍 8方向
HELLOあい愛藍 stroke
HELLOあい愛藍 stroke2HELLOあい愛藍 stroke2 ←重ね合わせ
strokeを使用した縁取りは綺麗だが、文字の内側にも描画されるので、小さめのサイズは潰れてしまう。
stroke2は同じ文字を重ねて中身の潰れを軽減してみた。
SVGにてテキスト描画
SVGでも文字の縁取りができるようです。
SVGのfillとstrokeで描画
.text1 {
fill: red;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
}
<svg viewBox="0 0 200 50" class="svg1">
<text x="0" y="65%" class="text1">HELLOあい愛藍SVG</text>
</svg>拡大しても綺麗です。
漢字は少し中身が潰れている様に見える。
font-sizeは独自です。1remを指定してもviewBoxとの相対的な関係のようです。詳細はSVGの学習が必要のようですね。
paint-orderを使用してみる。
実験的な機能のようです。
stroke, fill, markersの描画順を指定します。既定の描画順序は fill, stroke, markers です。
.text2 {
fill: red;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
paint-order: stroke fill;
}
stroke fill…
縁描画後の塗りつぶしなので中身が潰れない。
fill stroke…
最後に淵なので、淵が強調されているように見えますね。そして中身が潰れてしまいますね。
ぼかしてみる
縁取りとは関係ありませんがぼかしてみました。
同じ文字を重ねてみました。後ろはstroke-widthが太目です。
link
SVGなんか難しいな