[HTML] 언어별 폰트적용 (Attribute - class 활용)

목표: 언어별로 다양한 폰트 적용하기

요약

1. link 태그를 이용한 Web Fonts 연결(Google Fonts)
2. style에서 class attribute 사용하기
3. class 사용하기(classname)

 

 

typographica.org

각 언어별로 어울리는 폰트가 있다는 것!

HTML에서 언어별로 다양한 폰트를 적용하고 싶은데!

 

1. link 태그를 이용한 Web Fonts 연결(Google Fonts)

 

Google에서 무료로 제공하는 Web Fonts를 이용해보자!

사용방법은 아래 게시글을 참고바람

2019/11/21 - [기타] - [Font] Google Fonts 사용하기

[Font] Google Fonts 사용하기

 

 

2. style에서 class attribute 사용하기

 

아주 지저분하지만, 직관적으로 파악하게 하기 위해 아래와 같이 코드를 작성했다

 

조건: paragraph 에 텍스르를 작성하고 싶어

paragraph에서 class를 classname으로 분류해 (latin, korean, japanese, arabic),

각 class에 font-family를 복사해줘

 

3. class 사용하기(classname)

 

paragraph (<p>)에 classname을 선언해줘

선언 방법은 제발 잊지말길 바래

 

기본 작성 방법

이렇게!!

 

 

 

---

 

언어에 안어울리는 폰트는 뭔데?

 

 

궁금하지? (난 궁금해;)

 

 

일본어에 한국어폰트, 한국어에 일본어폰트로 지정해볼게

 

 

 

아주 구려 🤢🤢🤢🤢

 

 

일본어는 반각(half-width), 전각(full-width) 문자열을 사용해

MS Japanese Keyboard IME

 

 

전각(full-width)는 가로가 뚱뚱하고

반각(half-width)는 가로가 날씬해

차이가 보이지?

 

한국어엔 전각, 반각 개념이 없어

그래서 한국어를 일본어 폰트로 표시하면 어색하고 이상해

 

반대로, 일본어를 한국어 폰트로 표시하면

반각, 전각개념이 문자열에 반영되지 않아서 일부 문자열이 출력되지 않아

 

---

 

 

 

---

 

Arabic 문자열은 어떻게 표시해?

 

 

궁금하지? (난 궁금해;)

 

Arabic 문자열은 왼쪽에서 오른쪽으로 진행되는 LTR(Left to Right) 특성을 갖는 언어야

한국어, 영어, 중국어 등 대부분의 언어는 RTL(Right to Left)잖아

그래서 방향 처리를 필수적으로 해줘야해

 

 

구글이 가장 정확하니까 구글이랑 동일한 결과가 나오면 되

나는 style attribute를 사용했고, direction:rtl 로 지정했어

 

짠

 

참 쉽죵

---

---

** 참고 사이트 **

 

 

https://www.tutorialrepublic.com

Tutorial Republic - Online Web Development Tutorials

---