[CSS] 글자 Stroke 효과 주기

일반 웹에서 글자 외곽선 효과, 즉 stroke를 주려면 text-stroke를 사용해서 쉽게 효과낼 수 있다.

다만 text-stroke의 경우 browser compatibility 문제가 있을 수 있고 (IE(...)에서는 지원하지 않는다고 한다), 텍스트 내부로 그려지는 방식이라 stroke width가 두꺼워지는 경우 글자를 잡아먹는 듯이 보일 수 있다.

때문에 대체재로 가장 많이 사용되는 방식은 text-shadow를 이용하여 윤곽선을 그려내는 방식이다. 하지만 이 경우에도 stroke가 굵어진다면 글자 모양에 따라 깨져보일 수 있다.

굵어지면 아예 깨지는 현상을 방지할 순 없을까? 해서 혹시나 하는 마음에 text-stroke를 준 텍스트를 뒤로 깔고 그 위로 동일한 텍스트를 띄웠더니 글자가 잡아먹히지 않고 선명하게 보이되, stroke도 여전히 보였다! 다만 반대로 stroke width가 얇은 경우 윤곽선이 잘 안 보인다.

text-stroke가 inside에 그려지는 방식이라고 생각했는데 원 글자로 위를 덮어도 stroke border가 보이는 걸 보니 center 기준으로 그려지는 듯 싶다.

('Text Stroke With Pseudo *'로 적힌 텍스트는 data-text 속성과 :after, content을 이용하여 그렸고, 'Text Stroke With Real Element'로 적힌 텍스트는 div를 두 개 만들고 absolute position으로 뒤로 보내서 그렸는데, 둘 다 동일하게 보인다.)

다음은 각 방식을 모두 적용하여 비교해 본 CodePen 예시이다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow