CSS font 아는듯 모르는듯 한번더 이해를 튼튼!

임동현·2022년 8월 21일

CSS CSS font font family font-size letter-spacing ,word-spacing text align text overflow

CSS

font-size 프로퍼티
font-size 문자크기 설정
주요값

medium:웹브라우저 에서 정한 기본 글자 크기
xx-small,x-small,small,large,x-large,xx-large :medium 에 대한 상대적인 크기 설정값
small , large: 부모 요소의 글자 크기에 대한 상대적인 글자크기 설정값
length : rem ,px ,em, % css 단위를 사용한 설정값

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      .font-xx-small {
        font-size: xx-small;
        color: red;
      }
      .font-medium {
        font-size: medium;
        color: blue;
      }
      .font-larger {
        font-size: larger;
        color: blueviolet;
      }
      .font-px {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <p>default font size</p>
    <p class="font-medium">font-medium size</p>
    <p class="font-px">30px</p>
    <p class="font-larger">font-larger size</p>
    <p class="font-xx-small">font-xx-small size</p>
  </body>
</html>

font family 프로퍼티

일반적으로 font-family 에 여러 폰트를 설정하는경우가 많음

font-family : 첫번째 폰트 , 두번째 폰트 , 세번째 폰트 ....

폰트는 웹페이지를 보는 각 사용자 pc 에 해당 폰트가 설치가 되어 있어야만 하기 때문에 , font-family 를 통해 설정된 맨 앞 폰트를 먼저 찾고 , 해당 폰트가 없으면 다음 폰트 를 찾는다. 또 그 해당 폰트가 없으면 그 다음 폰트를 적용한다.
일반적으로 세가지 정도 폰트를 설정하고 , 마지막 폰트는 어디 pc 에서도 있을법한 generic-family 폰트 시리즈를 설정한다.

web font

웹폰트 사용법
1. 폰트는 각 pc 에 해당 폰트가 설치가 되어있어야 웹페이지에 표시
2. 웹 폰트를 사용하면 , 각 사용자 pc 에 해당 폰트가 설치 되지 않아도 , 웹브라우저에서 해당 폰트를 다운받아서 , 웹 페이지에 표시
- 웹 폰트는 pc에 설치되는 폰트 파일 보다 경량화된 형태

웹 폰트는 다운로드 받아야 하므로 각 사용자 pc에 설치되어 있는 폰트를 사용하는것보다 느릴수 있음.
하지만 , 갈수록 CDN 서버 성능이 좋아지고 있고, 꼭 필요한 경우에만 사용 추천 !

font-weight
글자 굵기 설정

number : 100,200,300,400,...900(숫자로 굵기 설정 , 폰트에서 지원해줘야함)
normal: 보통굵기 , number: 400 숫자와 같음
bold: 굵기가 두껍다 , number:700 와 같음
bolder: 상속된값 (font-weight 미 설정시의 굵기값) 보다 굵은 굵기
lighter: 상속된값 (font-weight 미 설정시의 굵기값) 보다 얇은 굵기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>폰트 웨이트 테스트</p>
    <p style="font-weight: normal;">font-weight:normal 테스트</p>
    <p style="font-weight: 400;">font-weight:400 테스트</p>
    <p style="font-weight: bolder;">font-weight:bolder 테스트</p>
    <p style="font-weight: lighter;">font-weight:lighter 테스트</p>
    <p style="font-weight: 100;">font-weight:100 테스트</p>
  </body>
</html>

font -variant 프로퍼티

소문자를 소문자 크기로 대문자로 바꾸는 설정

normal : 소문자를 그대로 표시
small-caps: 소문자를 소문자크기의 대문자로 설정

line - height 프로퍼티

라인 높이 설정

normal : 웹브라우저에서 정한 기본값, 보통 1.2
length : px , % , em , rem 등의 css 단위의 라인 높이 설정
number: 글자 크기의 몇배인지로 높이 설정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>테스트</p>
    <p style="line-height: normal;">normal 테스트</p>
    <p style="line-height: 1.2;">normal 테스트</p>
    <p style="line-height: 32px;">
      32px설정: css에 대한 공부는 쉽다고 생각이 들지만서도 , 실제로 자신의
      코드에 적용시키기엔 고민이 굉장히 많이 드는, 처음에는 다소 시간이 걸릴수도
      있지만, 이후에는 새로운 기술을 빠르게 익힐 수 있습니다.
    </p>
    <p style="line-height: 50%;">
      50% 라인 설정: css에 대한 공부는 쉽다고 생각이 들지만서도 , 실제로 자신의
      코드에 적용시키기엔 고민이 굉장히 많이 드는, 처음에는 다소 시간이 걸릴수도
      있지만, 이후에는 새로운 기술을 빠르게 익힐 수 있습니다.
    </p>
    <p style="line-height: 4;">
      number4 설정:css에 대한 공부는 쉽다고 생각이 들지만서도 , 실제로 자신의
      코드에 적용시키기엔 고민이 굉장히 많이 드는, 처음에는 다소 시간이 걸릴수도
      있지만, 이후에는 새로운 기술을 빠르게 익힐 수 있습니다.
    </p>
  </body>
</html>