[티스토리 오디세이 스킨] 본문 1~3 폰트, 글자 크기 바꾸기

 

저번에 본문1, 본문2, 본문3의 폰트를 바꾸는 방법을 포스팅했었다.

다시 보니 설명이 불친절한 것 같기도 하고, CSS에 이해도가 없는 사람도 알아볼 수 있도록 추가 보충을 해야할 것 같았다.

 

-지난 포스팅

2021/02/08 - [정보/블로그 운영] - 티스토리 오디세이 제목 폰트 글꼴 변경, 티스토리 오디세이 폰트 글꼴 변경

티스토리 오디세이 제목 폰트 글꼴 변경, 티스토리 오디세이 폰트 글꼴 변경

해서 오늘은 본문 1, 본문 2, 본문 3에 각각 별도의 스타일을 적용할 수 있는 방법을 다시 정리해보겠다.

 

폰트 변경

이건 지난 설명과 동일한 방법을 사용한다.

구글 웹폰트에서 불러온 폰트를 각 본문 항목마다 적용해주는 간단한 방법이다.

 

[블로그 관리 > 스킨 편집 > CSS] 으로 들어가서 아래의 폰트 패밀리 내용을

#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] {
	font-family: 'Sunflower', sans-serif !important; 
} 
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { 
	font-family: 'Sunflower', sans-serif !important; 
} 
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { 
	font-family: 'Sunflower', sans-serif !important; 
}

아래의 .article-view p { ~~~ } 아랫 줄에 넣어줍니다.

괄호가 닫힌 것 아래로 넣으셔야 합니다.

.article-view p {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 26px;
    color: #555;
}

그리고 적용을 하면 완성이다.

글자 크기(폰트 사이즈), 굵기 등의 스타일 변경

각 본문 종류 별로 폰트 외의 사이즈나 굵게 등을 설정하길 원할 때 별도의 스타일을 추가해줄 수 있다.

 

1. 글자 크기, 폰트 사이즈

현재 오디세이 스킨에서는 폰트 사이즈의 단위를 'em'으로 사용하고 있는데, em은 '지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기'라고 하는 단위로 사실 별로 상관하지 않아도 된다.

본문 1은 font-size: 1.12em;

본문 2는 font-size: 1em;

본문 3은 font-size: 0.87em;

을 기본 값을 가지고 있고 이 값들을 원하는 크기로 변경하면 된다.

그대로 em값을 가진 채로 기존 값을 가감해도 좋고, px(픽셀)단위로 변경해도 무방하다.

아래의 예문처럼 각 항목 별로 원하는 font-size를 추가하면 된다.

#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] {
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 1.5em;// 또는 20px; 등 원하는 크기 적용
} 
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { 
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 1.1em;// 또는 15px; 등 원하는 크기 적용
} 
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { 
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 0.75em;// 또는 11px; 등 원하는 크기 적용
}

2. 굵기

굵기를 굵게 하고 싶은 항목에만 font-weight: bold; 항목을 추가해주면 된다.

bold보다 굵은 bolder도 있지만, 이는 원하는 폰트에서 지원하는지를 먼저 확인해야 한다. 지원하지 않을 경우 bold와 똑같은 크기로 보여지니 별 의미 없을 것이다.

마냥 굵게가 아닌 각 굵기 별 차등을 주고 싶을 경우엔 숫자로도 표현이 가능하다. 100~ 600까지 100단위로 값을 지정할 수 있고 이 또한 각 폰트 별로 지원하는 굵기가 조금씩 차이가 있다.

font-weight: 100; //얇은 굵기

font-weight: 500; //bold와 같은(또는 거의 비슷한) 두꺼운 굵기

일반적으로 포스팅 작성할 때 에디터에서 지원하는 글자 굵게 표시 기능은 font-weight: bold; 와 같은 굵기를 가진다.

#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] {
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 1.5em;// 또는 20px; 등 원하는 크기 적용
    font-weight: bold;
} 
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { 
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 1.1em;// 또는 15px; 등 원하는 크기 적용
} 
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { 
	font-family: 'Sunflower', sans-serif !important; 
    font-size: 0.75em;// 또는 11px; 등 원하는 크기 적용
}

 

3. 기타 스타일

이태릭체(기울임 꼴)

   font-style: italic;

밑줄

   text-decoration: underline;

취소선

   text-decoration: line-through;

          ** 동시에 사용할 경우 두 항목을 한 줄에 같이 적는다.

          text-decoration: underline line-through;

글자 색깔 : 원하는 RBG값 사용

   color: #9015d0;

글자 배경 색깔 : 원하는 RBG값 사용

   background-color: #C0D1E7;

 

 

 

대충 결과는 이런 식

 

끝!