문제

css에서 이상없이 폰트를 불러오고 폰트 디자인도 해당 폰트로 제대로 표시되지만 테두리가 각이 지고 깨져보일 경우가 있다.

이런 경우는 폰트를 import 방식으로 웹 상에 올라와 있는 것을 불러왔을 경우 한글 폰트에서 생길 수 있는 문제이다. (특히 폰트 크기가 작을 경우 잘 깨짐)

Try(but not solved)

treansform: skew() /* 글자에 기울임을 주면 덜 깨져보인다 */

시도해보니 글씨가 덜 깨지지만 나의 경우 다른 요소들도 함께 기울여져서 ui가 망가진다. 그래서 이 방법을 채택하지 않았다.

Solution

해결 방법은 해당 폰트를 font 폴더 만들어 직접 넣은 뒤에 다이렉트로 css에서 불러오면 깨지는 문제를 해결할 수 있다.

그리고 나의 경우 추가적으로 폰트 파일의 확장자를 .OTF 변경했을 때 문제를 해결할 수 있었다!

프로젝트를 할 때, 폰트는 웹 상으로 불러와도 되기는 하지만 가능한 폰트 폴더에 파일을 넣어서 불러오는 것과 함께, 확장자는 OTF로 하는 것을 추천한다.