Header Ads Widget

HTML에서 영문과 한글 폰트를 따로 지정하는 방법

 

📌 HTML에서 영문과 한글 폰트를 따로 지정하는 방법

HTML & CSS에서 영문과 한글 폰트를 각각 다르게 설정하려면 lang 속성 또는 unicode-range를 활용할 수 있습니다.


✅ 방법 1: CSS에서 한글과 영문을 개별적으로 설정 (추천)

📌 CSS에서 :lang(ko)를 활용하면 한글에만 특정 폰트를 적용할 수 있습니다.

css
body { font-family: 'Arial', sans-serif; /* 기본적으로 영문 폰트 적용 */ } :lang(ko) { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; /* 한글 전용 폰트 */ }

이렇게 하면 한글은 "Noto Sans KR"이 적용되고, 영문은 "Arial"이 적용됩니다.
글 안에 영문과 한글이 섞여 있어도 자동으로 폰트가 분리 적용됩니다.


✅ 방법 2: unicode-range를 이용한 폰트 적용

📌 unicode-range를 활용하면 한글과 영문을 더 정밀하게 구분할 수 있습니다.

css
@font-face { font-family: 'EnglishFont'; src: url('path-to-english-font.woff2') format('woff2'); unicode-range: U+0020-007F; /* 영문, 숫자, 특수문자 */ } @font-face { font-family: 'KoreanFont'; src: url('path-to-korean-font.woff2') format('woff2'); unicode-range: U+AC00-D7A3; /* 한글 유니코드 범위 */ } body { font-family: 'EnglishFont', 'KoreanFont', sans-serif; }

이 방법은 폰트를 더 세밀하게 적용할 수 있지만, 웹폰트를 직접 지정해야 합니다.
영문과 한글을 확실하게 분리하고 싶을 때 유용합니다.


✅ 방법 3: HTML 태그에 클래스 지정하여 개별 적용

📌 span 태그를 사용하여 한글과 영문에 각각 다른 폰트를 적용할 수도 있습니다.

html
<p><span class="eng">Hello, World!</span> <span class="kor">안녕하세요!</span></p>
css
.eng { font-family: 'Arial', sans-serif; /* 영문 폰트 */ } .kor { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; /* 한글 폰트 */ }

이 방법은 HTML을 직접 수정해야 하지만, 특정 부분만 선택적으로 적용할 때 유용합니다.


🎯 최적의 방법 선택

자동으로 폰트를 구분하고 싶다면? → ✅ 방법 1 (:lang(ko)) 추천!
더 세밀한 폰트 설정을 원한다면? → ✅ 방법 2 (unicode-range) 활용!
특정 부분만 개별적으로 지정하려면? → ✅ 방법 3 (span 태그) 사용!

🎨 이제 영문과 한글을 원하는 스타일로 자유롭게 조합할 수 있습니다! 🚀 😊

댓글 쓰기

0 댓글