Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- transform
- FE
- jquery
- word-spacing
- sass설치
- 프론트엔드
- CSS
- scss
- toggleClass
- 밑줄
- css3font
- Whitespace
- 여백
- 간격조절
- transition
- 어휘력
- issue
- mime-type
- sass
- 2dtransform
- gulp
- 폰트설정
- 2D
- 퍼블리싱
- css5
- 언더스코어
- CSS3
- css폰트
- 마음사전
- 제이쿼리
Archives
- Today
- Total
포부리
[CSS] 폰트 스택 설정 본문
엘리먼트에 대한 폰트 패밀리 정의
font-family: Helverica, "Times New Roan", Serif;
- 사용할 주요 폰트명을 정의하고 콤마로 구분한다.
- 폰트명은 대소문자를 구분하지 않는다.
- 폰트명에 공백이 있는 경우, "", ''로 감싸야한다.
폰트 vs 폰트패밀리
폰트패밀리는 'Times' 처럼 외관을 담당하고, 폰트는 italic, bold, normal, bold italic 등 특정 버전을 가리킨다.
폰트의 높이
디센더 ~ 아센더까지 측정한 값.x-height
는 소문자 글자의 높이를 말한다.
⚠️디센더?
g,j,p,y 대문자+소문자, q 소문자(대문자 제외) 처럼 글자의 구조상 그 아랫 부분이 기준선 아래로 내려 오게 되는 글자
⚠️아센더?
b,d,f,h,k,l,t처럼 선이나 스트로크가 x-height
보다 높은 경우
엘리먼트의 폰트 크기 정의
font-size: 100%;
폰트 크기 속성을 입력하고 크기를 정한다.
이떄 크기는 다음 항목 중 하나를 사용한다.
- 상대 또는 절대값
- 기본 페이지 크기에 대한 상대값을 갖는 절대 크기 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
- 부모 엘리먼트와 관련해 폰트 크기를 지저아는 smaller, larger 상대 크기 키워드
'dev > HTML5 CSS' 카테고리의 다른 글
[CSS3] 엘리먼트 트랜지션/transition (0) | 2020.04.19 |
---|---|
[CSS3] 엘리먼트 변형/transform /2D (0) | 2020.04.19 |
[CSS] 글자 사이 간격 조절 ? word-spacing! (0) | 2019.11.29 |