Home

블로그 영어 한글 폰트 따로 지정하기

반응형

블로그를 운영하다 보면 영어를 종종 사용하는데 한글 폰트를 사용하면 영어 표현이 조금 아쉽고 영어 폰트를 사용하면 한글이 아쉽고 영어 폰트를 사용하면 한글은 굴림으로 표현되는 것 같은데 굴림 폰트가 마음에 든다면 문제가 없지만 나눔 고딕을 좋아하는 저로선 나눔 고딕의 영어체가 영 마음에 들지 않아 검색을 해봐도 영어와 한글 폰트를 별도로 지정하는 방법은 없다는 결론이더군요. 낙심하고 있던 중 블로그 스킨을 보면 여러 폰트를 지정하고 사용하는 것을 보고 힌트를 얻어 적용해 보았습니다.


font:12px/1.5 '돋움', 'dotum', 'Tahoma', 'AppleGothic', Sans-serif;

티스토리 기본 스킨중 하나의 스킨에 적용된 폰트 속성입니다. 폰트가 순서대로 나열되어 있는데 방문객이 "돋움" 폰트가 적용 안되면 두번째인 "dotum" 폰트를 적용하는데 한글 윈도우가 아닌 PC 환경에서 돋움 또는 "dotum" 폰트가 적용 안되기 때문에 "Tahoma" 또는 "AppleGothic" 폰트가 우선 적용 됩니다. 


이를 이용하여 한글을 지원하지 않는 영문 폰트를 앞에 놓고 뒤에 한글 폰트를 적용하면 대부분의 영문 폰트는 한글을 지원하지 않기에 뒤에 있는 한글 폰트가 먼저 적용 되고 영어나 아라비아 숫자일 경우 앞에 있는 영문 폰트가 적용됩니다.



적용 전과 후 비교 이미지 입니다. 한글 폰트는 그대로 인데 영문은 "Century Gothic" 폰트로 변경 되었음을 알 수 있습니다.


font:12px/1.5 'Century Gothic', 'Nanum Gothic', Sans-serif;

or

font-size: 12px;
line-height: 1.5;
font-family: 'Century Gothic', 'Nanum Gothic', Sans-serif;

제 블로그에 적용한 메인 폰트 입니다. 별도로 특정 태그에 폰트를 지정하지 않으면 영어와 숫자는 "Century Gothic" 폰트로 한글은 "Nanum Gothic" 폰트로 보여지며, "Century Gothic"는 웹폰트를 적용하지 않아 폰트 없는 PC에서는 표현되지 않고 나눔 고딕으로만 보입니다. 


일부 폰트나 블로그 스킨/PC 환경에 따라 적용되지 않을 수도 있습니다.

반응형
more

댓글을 달아 주세요

  1. 2014.10.22 23:31 신고
    이런 간단한 방법이 아주 간단한 방법을 대해 몰랐네요.

.

Secret