친효스킨! 본문 "이롭게 바탕체" 폰트 (글꼴 글씨체) 적용 방법
친효스킨 1.16 버전 이상부터는 본문에 "리디바탕체"가 기본 글꼴 입니다. 1.17 버전에서는 "이롭게 바탕체"로 변경될 예정 입니다. 둘 다 큰 차이는 없습니다. 모바일에서도 두 글꼴 모두 가독성이 뛰어납니다. 하지만 윈도우에서는 리디바탕체가 다소 두껍게 보이는 듯 합니다. 이 부분의 단점을 해결하기 위해서 이롭게 바탕체로 변경을 진행 합니다. 1.17 버전에서는 기본으로 적용되어 있지만 수동으로 사용해보고자 하시는 분들은 아래의 방법대로 진행하시면 됩니다.
이롭게 바탕체 다운받기
아래의 홈페이지에 방문하시어 "이롭게 바탕체"를 다운로드 받으시기 바랍니다.
다운로드 완료 후 압축을 풀면 폰트파일이 총 4개가 있을 것 입니다.
이 네개의 파일 중, IropkeBatangM.otf 파일만 사용 합니다. 원래 다 사용하지만 티스토리 파일 업로드에는 용량 제한이 있습니다. 따라서 OTF 폰트 하나만 사용합니다. 이 파일을 자신의 티스토리 스킨 파일저장소에 업로드 합니다. 경로는 다음과 같습니다.
관리자화면 > 꾸미기 > 스킨편집 > HTML편집 > 파일업로드
CSS 세팅
이제 이롭게바탕체를 CSS에서 불러오기를 해야 합니다. 아래의 CSS 매소드 스타일을 친효스킨 CSS에 붙여넣기를 합니다. 빈 공간 확보 후 붙여넣기를 해주시면 됩니다.
@font-face {
font-family: "IropkeBatangM";
font-style: normal;
font-weight: normal;
src: url('./images/IropkeBatangM.eot'); /* IE9+ Compat Modes */
src: url('./images/IropkeBatangM.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./images/IropkeBatangM.woff') format('woff'), /* Modern browsers */
url('./images/IropkeBatangM.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('./images/IropkeBatangM.otf') format('opentype');
}보시면 이롭게바탕체의 다양한 확장자를 불러오도록 설정되어 있습니다. 만약 친효스킨을 이롭게바탕체만 완벽 적용을 하겠다고 하신다면 기존 리디바탕체를 지우고 이롭게바탕체의 4개 폰트 파일을 모두 업로드 하시면 됩니다. 용량 제한 때문에 업로드가 안 되면 OTF 확장자 폰트 하나만 올리시면 됩니다. 위의 코드는 아래의 첨부파일에 있습니다.
이제 이롭게바탕체를 로드할 수 있게 되었습니다. 실질적으로 본문에 적용하는 일만 남았습니다. 이번에도 친효스킨 CSS에서 아래의 부분을 찾아줍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다.
/* 진짜본문 (article_rep_desc) */
#contents .article {
word-break: normal;
-webkit-word-break: normal;
padding: 20px;
border: 1px solid #E5E5E5;
border: 1px solid var(--subColor);
font-family: "IropkeBatangM", "RIDIBatang", "Nanum Gothic" serif;
font-size: 1.1em;
line-height: 1.6em;
}여기에서 수정해줘야 할 부분은 두 군데 입니다. font-family와 font-size 입니다. 폰트패밀리에는 이롭게바탕체를 추가해 줍니다. 그리고 폰트 사이즈를 1.1em 으로 변경합니다. 폰트 크기 단위가 px면 제대로 적용이 안 됩니다. 반드시 em으로 변경해줘야 합니다. 이렇게해서 친효스킨에 이롭게바탕체를 적용하는 방법이 끝났습니다. 저장을 하시고 한번 본문에 들어가서 직접 확인해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
