한자(漢字)도 글꼴을 정해야 보기 좋다.

이 블로그는 논어를 올리려고 개설하였다. 그래서 한자를 넣은 글이 많다. 한자를 쓰는 블로그가 많지는 않지만 도움이 될까 싶어 적는다. 한자를 쓰는 블로그를 보면 대체로 궁서체를 쓰고 있는 듯하다. 아마도 편집기에서 바로 선택할 수 있는 글꼴이기 때문일 것이다. 그런데 궁서는 가독성이 떨어진다. 한자 글꼴은 많지 않아 선택의 폭이 넓지 않다.

신영복체가 마음에 들어서 적용했지만 대체로 운영체제에 내려받지 않았을 것이다. 그래서 구글 폰트인 Noto Serif TC를 웹폰트로 보여주도록 설정하였다. 

1. Malgun Gothic

子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改

자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개

2. GungSeo, serif

子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改

자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개

3. Noto Serif TC

子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改

자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개

신영복체로는 아래와 같이 보인다. 그런데 이렇게 꾸밈이 많은 글꼴로 글을 쓰면 눈이 피곤하다. 그래서 한자 부분만 따로 글꼴을 정해주기로 했다. 한자는 한글보다 획이 많아서 글자 크기를 한글보다 키워야 잘 보인다. 상형문자이니 삐침이 있는 세리프체가 좋을 것 같다. 이름이 .noneo인 클래스에 아래와 같이 스타일을 정했다. div를 따로 정해주기 귀찮다면 인용문(blockquote)에 스타일을 정해주어도 된다.

HTML

<div class="noneo">

子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改

자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개

</div>

CSS

.noneo {
    font-family: 'J신영복_TT', 'Noto Serif TC', 'Nanum Myeongjo';
    font-size: 1.5em;
    line-height: 1.75em;
    border-radius: 5px;
    padding: 20px 40px 20px 40px;
}

子曰 君子不重則不威 學則不固 主忠信 無友不如己者 過則勿憚改

자왈 군자부중즉불위 학즉불고 주충신 무우불여기자 과즉물탄개

 

구글 폰트에서 글꼴을 불러오려면 스킨 편집 / CSS에 맨 위에 아래를 복사해 넣으면 끝이다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');

 

http://jikjisoft.com/freefont/5dcbe0f55c436d11a4cb20d9

직지소프트

https://fonts.google.com/noto/specimen/Noto+Serif+TC?query=noto+serif+tc 

Google Fonts: Noto Serif Traditional Chinese

https://noneo.tistory.com/591

한자 글꼴 내려받기