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

5 days ago 10

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: '+';