記錄

CSS) 폰트 크기, 글꼴, 줄간격, 정렬, 글꼴 꾸미기 본문

Web/CSS

CSS) 폰트 크기, 글꼴, 줄간격, 정렬, 글꼴 꾸미기

surhommejk 2018. 5. 7. 13:21

참고 : https://www.cssfontstack.com/

참고 사이트를 보면 각 OS별로 어떤 font를 가지고 있는지 통계치를 알 수 있다

CDN방식이 아닌 font를 사용할 경우 위 사이트를 참고하면 좋을 것 같다




font-size, font-family

/* 글씨 크기와 폰트는 아래와 같이 설정 */
/* 글씨 크기 : font-size */
/* 글씨체 : font-family */
/* cf) em은 상대적 크기로 상위 태그 기준으로 xN배 설정 */
/* 참고 : http://zinee-world.tistory.com/131 */

body {
  font-size: 10px
}

p {
font-family: Arial;
/* p의 상위 태그인 body 태그를 기준으로 상대적 크기 설정 */
  font-size: 2.0em;
}

span {
/* span의 상위 태그인 p 태그를 기준으로 상대적 크기 설정 */
  font-size: 4.0em;
}








font-weight

/* font-weight */
/* EX) bold, normal */
p{
  font-weight: bold;
}







line-height

/* line-height */
/* 줄간격 1.0, 1.5, 2.0 .. */
p {
  line-height: 1.5;
}







text-align


/* text-align */
/* 텍스트 정렬*/
h1 {
  text-align: right;
}

p {
  text-align: center;
}







text-decoration

/* text-decoration */
p {
  text-decoration: underline;
}

h1 {
  text-decoration: line-through;
}


'Web > CSS' 카테고리의 다른 글

CSS) 구글 폰트 적용  (0) 2018.05.07
CSS) Selector, Selector 우선순위  (0) 2018.05.03
CSS) 색깔 설정, 배경 설정, border  (0) 2018.05.02
CSS) Basic, 외부 CSS 연결  (0) 2018.05.02
Comments