728x90
반응형
font-family 속성 : 글꼴지정
font-family: 글꼴이름;
font-family: 글꼴이름, 글꼴이름;
font-family: "맑은 고딕", 돋음, 굴림;
※ 글꼴이 없을 경우 대비하여 여러 개 등록하는 것임.
CSS3가 웹 폰트를 표준으로 채택하면서 사용자에게 없는 글꼴도 웹 문서와 함께 다운로드하여 보여줄 수 있게 되었다.
자신의 글꼴을 적용하기 위해서는 ttf,EOT,WOFF,WOFF2포맷을 직접 업로드해야한다.
※ TTF은 용량커서 Woff를 먼저지정해야 함
@font-face {
font-family: 글꼴이름;
src: 글꼴파일, 글꼴파일;
}
@font-face {
font-family: 'HelloFont';
src: local('HelloFont'), url('font/hello-font.woff) format('woff'),
src: local('HelloFont'), url('font/hello-font.ttf) format('truetype'),
src: local('HelloFont'), url('font/hello-font.svg) format('svg');
}
.wfont {
font-family: 'HelloFont', "맑은 고딕";
}
구글 폰트에서 무료 웹 폰트를 링크와 함께 제공해준다.
link 또는 import를 코드에 복붙하면 된다.
/* test.html */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
/* css/style.css */
* {
font-family: 'Noto Sans KR', sans-serif;
}
font-size 속성 : 글꼴 크기지정
font-size: 절대크기; (브라우저 지정크기)
font-size: 상대크기; (부모 글자크기 기준으로 상대적인 크기)
font-size: 크기; (브라우저와 관계없이 지정)
font-size: 백분율; (부모 글자크기 기준으로 백분율(%) 크기)
※ 단위 : px(픽셀), pt(포인트), 백분율(%)
글꼴 키워드
xx-small < x-small < small < medium < larger < x-large < xx-large
글꼴 단위
종류 | 설명 |
em | 부모 요소 글꼴의 대문자 M 너비 기준 = 1em |
rem | 문서 시작 부분(root)에서 지정한 크기 기준 = 1rem |
ex | 해당 글꼴의 소문자 x의 높이 기준 = 1ex |
px | 모니터 1픽셀 기준 = 1px |
pt | 포인트, 일반 문서에서 사용됨 |
부모 글꼴 크기가 단위로 표기되어있어야 자식에서 백분율(%) 지정가능하다.
최근에는 모바일 기기등을 고려하여 em, rem을 많이 사용함
font-style 속성 : 이텔릭체 표현
font-style : normal; 기본
font-style : italic; 이텔릭체
font-style : oblique; 기울어지게
font-weight 속성 : 글자 굵기 지정
font-weight: normal; 기본 굵기
font-weight: bold; 굵게
font-weight: bolder; 원래보다 더 굵게
font-weight: lighter; 원래보다 더 가늘게
font-weight: 100...900; 100~900 사이의 값
반응형
'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글
CSS - Flexbox (플렉스 박스) (0) | 2021.09.06 |
---|---|
CSS - 텍스트 스타일 (0) | 2021.09.03 |
CSS - Cacading Style Sheet, Selector(선택자) (0) | 2021.09.03 |
CSS - html 파일에 css 적용시키는 방법 (0) | 2021.09.02 |
HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼) (0) | 2021.08.28 |