CSS의 다중 외곽선 텍스트 효과

(yuanchuan.dev)

CSS text-stroke는 단일 값만 받지만, 같은 글자를 여러 레이어로 겹치고 각 레이어의 외곽선 두께와 색을 다르게 지정하면 복고풍 다중 외곽선 텍스트 효과를 만들 수 있음
Graphic Japan : from woodblock and zen to manga and kawaii의 텍스트 효과를 참고해 여러 요소의 text-stroke-width를 다르게 지정하자 더 가까운 결과가 나옴
레이어별 text-stroke-width, text-stroke-color, z-index 를 조합해 외곽선의 순서와 색을 제어하며, 두께가 커져도 원래 글자 형태는 유지됨
브라우저마다 렌더링 결과가 달라 Chrome과 Safari보다 Firefox가 더 부드럽게 보이고, 여러 글자를 한 줄에 넣으면 글자 형태가 서로 병합됨
결과는 선택한 폰트에 크게 좌우되고 큰 font-size에서는 깜빡임이 보일 수 있어, 실험이나 css-doodle 이미지 생성에는 괜찮지만 프로덕션 사용에는 적합하지 않음

구현 방식

같은 글자를 여러 레이어로 겹치고 각 레이어의 text-stroke-width를 다르게 지정해 Graphic Japan : from woodblock and zen to manga and kawaii에서 본 텍스트 효과에 더 가까운 결과를 만듦

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));

레이어마다 다른 색을 주고 원하는 순서로 겹치면 외곽선의 색과 순서를 제어할 수 있음

-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

렌더링과 한계

Chrome과 Safari보다 Firefox가 더 부드러운 렌더링을 제공함
여러 글자를 한 줄에 넣으면 글자 형태가 서로 병합됨

@content: '秋收冬藏';

다양한 폰트를 빠르게 실험하기 위해 @google-font 함수를 추가해 폰트 로딩을 빠르게 함

font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';

성능은 CSS 필터처럼 좋지 않고, 특히 font-size가 커질수록 깜빡임이 보일 수 있음
추가 예제는 css-doodle로 생성됐으며, 첫 번째 예제의 CodePen은 https://codepen.io/yuanchuan/pen/ogzarGo에서 확인 가능함

▲

GN⁺ 3시간전 [-]

Hacker News 의견들

이 글은 css-doodle의 작성자가 css-doodle로 만든 것임. 이 웹 컴포넌트는 블로그에서 쓴 CSS 변형 문법을 HTML 안에 바로 넣게 해줌
예시는 이런 식임:
@grid: 15 / 90%;
border-radius: 50%;
background: hsl(@t(/20), 70%, 60%);
scale: sin(@atan2(@dx, @dy) + @ts);
컴포넌트 정의를 불러오는 것 말고는 JavaScript가 필요 없고, 일반 HTML, Markdown, 프레임워크 등에서 동작함
https://css-doodle.com/
- 설명 고마움. 2018년에 프런트엔드 일을 떠난 뒤로는 CSS가 이제 뭘 할 수 있는지 거의 모르겠음
  이 페이지의 CSS 상당수가 내게는 암호처럼 보임. 표준화된 스타일이 많은 시대에 새롭고 멋진 걸 올린 작성자에게 박수를 보냄
Firefox의 CSS 렌더링 엔진이 왜 부드럽게 처리하는 쪽을 선호하는지 궁금함. 구현이 극적으로 달라 보이지만, 렌더링의 경계 사례라서 그렇게 보이는 것일 수도 있음
- 획 확장은 복잡한 주제이고, 합리적인 결과가 하나만 있는 것도 아니며 주관적 선호와 수많은 경계 사례, 잘못된 답이 섞여 있음
  Firefox는 모든 지점에서 거리를 기준으로 확장하기로 했고, 이는 합리적인 답 중 하나이자 아마 가장 일반적인 방식임. 그래서 뾰족한 cusp가 곡선으로 확장됨
  다른 브라우저들은 cusp를 유지하기로 했는데, 이것도 합리적일 수 있고 계산 비용도 훨씬 낮다고 봄. 하지만 특징 크기, 즉 노드 사이 거리보다 더 확장하면 퇴화 사례가 많아져서 네 번째 빨간 링쯤에서는 명백히 틀려 보임
  box-shadow도 확장이 일어나는 또 다른 경우임. 네 번째 길이 값인 spread distance가 그것임. 모서리가 cusp면 그림자 모서리도 cusp가 되고, 둥글면 그림자 모서리도 둥글어짐. 유용한 그림은 https://drafts.csswg.org/css-backgrounds/#shadow-shape에 있음
  약간의 요령으로 0.1px border-radius를 주면 박스는 여전히 사각형처럼 보이지만 확장된 그림자는 곡선이 됨. 가끔 유용함. 원래 글의 내용으로 돌아가면, cusp 노드 대신 아주 미세한 곡선이 있는 글꼴을 쓰면 Chromium/Safari도 Firefox에 더 가까워질 것임
- Firefox의 둥글림 효과를 완전히 좋아하진 않지만, Chrome 해석은 가짜 뾰족한 돌기를 만들어서 그냥 틀린 것처럼 느낌
  직관적으로 별표 모양의 외곽선은 평범한 육각형에 가까워질 거라 기대하는데, 어느 브라우저도 그걸 해내지는 못함
- miter join은 Safari, round join은 Chrome 쪽임
- Firefox는 SDF처럼 보임. 객체까지의 최단 거리 기반 렌더링 같고, Chrome 쪽은 뭔지 잘 모르겠음
- Firefox 쪽은 해당 문자의 SDF 결과를 단계적으로 잘라낸 것에서 기대할 만한 모습과 정확히 같아 보임
  첫 번째 레이어의 둥근 모서리들은 원래 문자의 가장 가까운 모서리에서 모두 같은 거리에 있을 것임
이 블로그 디자인이 정말 좋음. 단순하고 명확하며 콘텐츠 우선임
- 맞음. CSS/SVG/canvas를 명확하게 보여주는 글이 많음
  Daily Sketch 시리즈나 CSS Animation with offset-path도 똑같이 재미있음
이 글을 읽고 https://css-doodle.com을 처음 알게 됨
몇 달 전에는 HTML Canvas API로 비슷한 걸 하고 있었는데, CSS로도 이런 재미있는 작은 작업을 할 수 있는 줄 몰랐음. 아주 마음에 듦
fiddle을 Apple 로고와 색상으로 바꿔 보니 첫 번째 링이 사과 일부를 먹어버림. 사과 윗부분이 잘리는데 왜 그런지 아는지 궁금함
--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
@content: '';
멋진 Unicode 문자를 쓰지 않으면서도 글꼴이 권장하는 표시를 유지한 채 이중 외곽선 텍스트를 만드는 최선의 방법이 궁금함
지금은 my blog에서 멋진 문자를 쓰고 있지만 검색 결과에는 해가 됨. 수동 HTML에서 11ty로 블로그를 옮기는 중이라, 동시에 블로그도 개선하고 싶음
덧붙여 현재 블로그 디자인에 대한 의견도 받고 싶음
멋짐. 다만 브라우저마다 렌더링 차이가 너무 큰 건 아쉬움
같은 걸 그림자로도 해봤는지 궁금함. 그림자도 쌓을 수 있을 것 같음
- 외곽선을 만들려면 그림자를 원형으로 퍼뜨려야 해서, 전체 모양은 결국 대략 원에 수렴하고 글자 모양은 거의 따라가지 않게 됨
제일 먼저 떠오른 건 content에 이모지를 넣는 것이었음. 그런데 알 수 없는 문자 사각형만 나옴. 마법 같은 걸 기대했던 것 같음
- 내 쪽에서는 이모지가 렌더링되긴 했지만 외곽선 효과는 전혀 없고, 그냥 맨 이모지만 보였음
- 글꼴로 Noto Emoji를 쓰면 동작함

답변달기

CSS의 다중 외곽선 텍스트 효과

구현 방식

렌더링과 한계

함께 보면 좋은 글 β

Hacker News 의견들