[Tistory] hELLO 스킨 화살표로 표시하기

배경

이제 막 개발 블로그를 시작해보려고 열심히 글을 작성하고 있었습니다. 평소에도 화살표를 텍스트 대치로 두고 자주 사용해왔기 때문에 글을 쓰거나 정리할 때 주로 사용해왔습니다.

하지만 에디터 상에서 괜찮았던 화살표가 이상하게 티스토리 hELLO 스킨에서는 >로 표시되는 현상이 나타나서 문제를 해결해보게 되었습니다

화살표를 내놓으시오..

 

---

원인

이 문제의 원인은 바로 SUIT 폰트에 있는데요.

사실 문제도 아닌게, 이 폰트의 개발자는 화살표의 기본 값을 >로 지정해놨을 뿐이지 간단한 설정을 통하여 → 로 변경할 수 있습니다!

화살표 뿐만 아니라 다른 옵션도 제공하니, 사이트를 참고하세요!

https://sun.fo/suit/

---

해결 방법

1. 티스토리 hELLO 스킨 편집

티스토리 관리 → 스킨 편집 → html 편집

 

2. CSS로 이동

 

3. Ctrl + F로 검색

#article .contents_style p 검색

#article .contents_style p

4. 코드 추가

font-feature-settings: 'ss01' 1, 'ss18' 1;

위의 코드를 --tw-text-opacity: 1; 위에 붙여넣어 주시면 됩니다!

 

5. 적용 후 마무리

 

화살표가 잘 표시되는 것을 확인할 수 있습니다😊

 

 

 

 

 

참고 : https://mytory.net/archives/16917 [SUIT 폰트 화살표 꼬리(샤프트) 나오게 하기(CSS, font-feature-settings)]