css3 언어별 다른 폰트 적용하기

/카테고리: , , /작성자:

 

CSS3에서는 다양한 방법으로 폰트를 적용할 수 있습니다. 다음은 CSS3에서 언어마다 다른 폰트를 적용하는 방법 몇 가지를 안내해 드리겠습니다:

  1. @font-face 규칙 사용:
    • @font-face 규칙을 사용하여 웹폰트를 추가하고 언어별로 다른 폰트를 적용할 수 있습니다. 예를 들어, 한글 폰트와 영문 폰트를 각각 다른 웹폰트로 지정하고 해당 언어로 사용하는 요소에 적용할 수 있습니다.
@font-face {
  font-family: 'KoreanFont';
  src: url('korean-font.woff2') format('woff2'),
       url('korean-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'EnglishFont';
  src: url('english-font.woff2') format('woff2'),
       url('english-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 한글 요소에 한글 폰트 적용 */
.korean {
  font-family: 'KoreanFont', sans-serif;
}

/* 영문 요소에 영문 폰트 적용 */
.english {
  font-family: 'EnglishFont', sans-serif;
}
  1. :lang() 가상 클래스 선택자 사용:
    • :lang() 가상 클래스 선택자를 사용하여 특정 언어로 작성된 요소에만 다른 폰트를 적용할 수 있습니다. 이 방법은 HTML 요소의 lang 속성을 활용하여 언어를 지정하고, 해당 언어에 대한 스타일을 지정합니다.

 

/* 한글 요소에 한글 폰트 적용 */
p:lang(ko) {
  font-family: 'KoreanFont', sans-serif;
}

/* 영문 요소에 영문 폰트 적용 */
p:lang(en) {
  font-family: 'EnglishFont', sans-serif;
}

특정 클래스나 ID를 활용하여 언어별로 다른 스타일을 적용:

  • 특정 클래스나 ID를 사용하여 각 언어에 대한 요소에 다른 스타일을 적용할 수 있습니다. 이 방법은 HTML 요소에 클래스나 ID를 추가하고, 해당 클래스나 ID에 대한 스타일을 지정합니다.

 

/* 한글 요소에 한글 폰트 적용 */
.korean {
  font-family: 'KoreanFont', sans-serif;
}

/* 영문 요소에 영문 폰트 적용 */
.english {
  font-family: 'EnglishFont', sans-serif;
}

위의 방법들은 CSS3에서 언어별로 다른 폰트를 적용하는 방법 중 일부입니다. 어떤 방법을 선택할지는 디자인 요구 사항과 상황에 따라 달라질 수 있습니다.

 

CSS는 언어 속성에 바로 적급하여 폰트를 바꿀수 있는 셀렉터를 지원한다

html상에 표기할때.

<p lang="zh">使劲儿</p>
<p lang="ja">がんばれ</p>
<p lang="ko">힘내</p>
<p lang="en">Fighting!</p>

style.css상에 표기할때.

:lang(zh) {font-family:'LiHei Pro Medium', sans-serif}
:lang(ko) {font-family:'nanum gothic', sans-serif}
:lang(ja) {font-family:osaka, sans-serif}
:lang(en) {font-family:'helvetica neue', sans-serif}

이렇게 설정할수 있지만, 다국어를 지원하는 폰트를 사용하는것이 가장 합리적인것으로 생각된다.

html상에 표기할때.

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap" rel="stylesheet">

style.css상에 표기할때.

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');

font-family: 'Noto Sans KR', sans-serif;