Front-End/CSS

CSS 요소의 글꼴 지정

코드깎는머슴 2024. 2. 22. 10:41
728x90
반응형

font-family

    - 서체를 지정
    - 해당 속성 값은 콤마(,)로 구분하여 여러개를 사용할 수 있다.
    - 어떠한 텍스트에 대해 가장 먼저 언급된 서체부터 적용, 해당 텍스트에 적용할 수 없을 경우에 차순위 서체를 적용
    - 최종적으로 어떠한 텍스트를 표현할 서체가 없을 경우, 브라우저에 따라 다른데, 시스템 기본 폰트로 표시하거나 네모박스(ㅁ)로 표시
    - 값
        serif           : 명조체 계열의 기본 폰트
        sans-serif      : 고딕체 계열의 기본 폰트
        monospace       : 고정폭 기본 폰트 
        cursive         : 필기체 계열의 기본 폰트
        math            : 수식 폰트
        폰트 이름 문자열

font-size

    - 텍스트의 크기 지정
    - 값
        크기 리터럴

font-style

    - 텍스트의 스타일 지정
    - 기본 값   : normal
    - 값
        normal  : 스타일 없음
        italic  : 필기체를 지원하는 경우 흘려쓰기 스타일 적용. 아닐 경우 oblique와 동일
        obilique:  단순히 기울기 적용


font-weight

    - 텍스트의 굵기 지정
    - 값
        normal  : 숫자 400과 같음
        bold    : 숫자 700과 같음
        bolder  : 부모 요소의 font-weight가 가진 속성 값보다 한 단계 굵은 값
        lighter : 부모 요소의 font-weight가 가진 속성 값보다 한 단계 얇은 값
        숫자    : 주로 100단위 숫자. 폰트마다 지원하는 값이 다름

728x90
반응형