안녕하세요 무택입니다 :)
오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이 세 개 적용에 따라 차이점이 있을까 궁금해졌습니다. 아래에서 바로 확인해 보시죠🤔
폰트 적용 방법 차이
1. CDN
적용하는 방법 중 하나인 CDN에서 불러오는 방법은 파일이 업로드된 서버에서 바로 불러오는 방법입니다.
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />위처럼 파일 경로에 'cdn'이 들어가는 곳에서 파일을 불러다 쓰는 게 cdn 방식이고 위 코드 두 가지 중 하나의 코드를 HTML `<head>`와 `</head>`사이에 넣어줌으로써 폰트를 적용할 수 있습니다.
장점
- 가져다 쓰기가 편하다
단점
- CDN서버가 다운되면 가져다 쓰고 있는 파일들도 모두 에러가 난다.
2. OTF
OTF적용 방법은 로컬파일을 직접 적용하는 방법입니다. "font-name.otf"라는 실제 파일을 FTP에 업로드해서 사용하는 방법입니다. 하지만 주로 OTF파일은 웹용 폰트가 아니라 문서 작업용 파일이기 때문에 웹과는 어울리지 않습니다.
장점
- CDN처럼 서버와 상호작용하지 않기 때문에 로컬 파일만 잘못 건드리지 않으면 오류가 나지 않는다.
단점
- 폰트 파일의 크기가 크면 불러오는데 시간 소요↑
3. WOFF
WOFF는 OTF나 TTF를 웹용폰트로 변환한 파일을 말합니다. 폰트에 따라 기본적으로 WOFF파일이 있을 수도 있고 없다면 만들 수도 있습니다. OTF와 마찬가지로 로컬에 업로드해서 사용하는 방식으로 CDN과 상호작용하지 않습니다.
장점
- 로컬 방식이라 오류가 잘 안 난다.
- 웹용으로 처리된 파일이라 불러오는데 짧은 시간 소요
적용 방법별 차이(Noto Sans 폰트)
가장 흔한 폰트인 노토 산스를 가지고 테스트를 진행해 봤습니다. 테스트 환경은 제 FTP 서버에서 진행해 봤습니다. 비교 대상은 가장 기본적인 폰트인 맑은 고딕을 비교 대상으로 넣었습니다.
왼쪽 노토산스 폰트를 보면 정말 거의 차이가 없습니다. 하지만 오른쪽 맑은 고딕 폰트를 보면 뚜렷해 보이지 않나요? 이게 안티앨리어싱 적용 차이인 것 같습니다. 노토산스는 기본적으로 안티앨리어싱이 들어가고 맑은 고딕은 안티앨리어싱이 들어가지 않아서 또렷하게 보이는 것 같습니다.
그리고 왼쪽 노토산스 세 가지는 정말 차이가 없지만 자세히 보면 CDN방식은 안티앨리어싱이 조금 더 들어가서 약간, 아주 약간 흐릿하게 보입니다. 그 외에 OTF와 WOFF는 차이가 없어 보입니다.
그리고 노토산스만 이런 것인지 확인하기 위해 노토산스 기반의 폰트 'Pretendard' 폰트도 같이 가져와서 테스트해 봤습니다.
적용 방법별 차이(Pretendard 폰트)
Pretendard 폰트도 노토 산스와 똑같이 안티앨리어싱이 적용되는 걸로 보입니다. UI용 폰트로 나와서 약간의 기대를 했지만 안티앨리어싱이 기본적으로 적용되는 건 어쩔 수가 없나 봅니다😭 마찬가지로 CDN 방식은 조금 더 흐릿하게 나오는 감이 있네요.
안티앨리어싱이 나쁘다는 건 아니지만 맑은 고딕 폰트처럼 안티앨리어싱이 없는 폰트가 가독성이 더 좋아 보이는 건 어쩔 수 없나 봅니다.
'🧑💻개발 > HTML·CSS' 카테고리의 다른 글
| [HTML/CSS]HTML에서 이미지 편집하기(imageKit API) (0) | 2023.09.18 |
|---|---|
| [HTML/CSS]Animation에서 step기능 알아보기 (0) | 2023.09.13 |
| [HTML/CSS] P태그 안에 DIV를 넣지 마세요! (0) | 2023.05.31 |
| [HTML/CSS]홀수, 짝수 선택자 (0) | 2023.05.04 |
| HTML 콘텐츠 영역 구성 방법 (0) | 2023.04.25 |
