본문 바로가기
ING.../메모

2/13 티스토리 글꼴 바꾸는 작업

by Anakii 2018. 2. 13.

2/13 CSS (em, letter-spacing, 웹폰트 eot)

2.2em 앞에 정한 크기의 상태 크기 2.2em은 앞 크기의 2.2.배

letter-spacing:1.2px;  글자가 점유하는 공간을 나타냄. 1.2px면 글꼴 크기의 120%. 장평의 개념.

블로그에 글꼴 적용하기 (제목 나눔 스퀘어라운드 볼드, 본문 나눔 바른펜 레귤러 또는 바른고딕 레귤러)

1. 글꼴 다운로드와 설치

2. TTF를 EOT 또는 WOFF 파일로 바꾸기 https://onlinefontconverter.com/
(안내 http://koreawebdesign.com/font-to-webfont-convert/)

onlinefontconverter.com(나눔바른펜).zip

onlinefontconverter.com(나눔스퀘어라운드).zip

onlinefontconverter.com(나눔바른고딕).zip


3. 티스토리에 적용 (안내글)

* 티스토리관리-스킨변경-스킨편집-HTML편집-파일업로드에 웹폰트를 업로드.

* CSS 항목 맨 위에 아래와 같은 방식으로 줄 추가 (이 폰트를 사용할 것이라고 정의함) 

※ 몇 가지 폰트를 동시에 사용하고 싶어서 이곳에 추가하여 기록하니 아무 변화가 없었다. 

@FONT-FACE {

font-family: "NanumBarunGothic";

src : url('./images/NanumBarunGothic.woff');

}

* css 에서 아래 부분을 찾아 수정한다. (보통 맨 위에 있음. 빨간 글씨가 바른고딕폰트를 위해 수정한 부분)

/* 반드시 들어가야 하는 스타일 시작 */

/* 1. 본문 전체  */

body, td, input, textarea {

font-family: NanumBarunGothic, "나눔 바른 고딕", "맑은 고딕", Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; 

         /* Lucida Grande for the Macs, Tahoma for the PCs */\




'ING... > 메모' 카테고리의 다른 글

포켓볼  (0) 2019.11.27
맥주 주문  (0) 2018.11.22
어쩌다 나들길 프로젝트 연습곡  (0) 2018.09.09
김상욱의 과학공부  (0) 2017.06.06
이지에듀 수행평가만들기 프로세스  (0) 2014.09.25