-
font-familiy 속성으로 폰트를 지정한다.
-
폰트 이름이 여러 단어로 구성된 경우 폰트이름을
' '로 감싸준다. -
모든 브라우저 상에서 나타날 수 있도록 web safe 폰트를 사용하는 것이 바람직하다.
https://www.cssfontstack.com/ 참조
지정한 글꼴을 가져올 수 없을 경우에 대비하여 대체글꼴(fallback font)을 뒤에 붙여준다.(예비 폰트 지정) -
삐침이 있는 글꼴은 "serif", 삐침이 없는 글꼴은 "san-serif"로 계열 구분, 한글로는 "세리프", "산세리프"로 사용
사용할 글꼴 선언을 할 때는 다음과 같이 사용하려는 글꼴의 계열에 맞춰 "serif" 또는 "san-serif"를 끝에 명시해줌으로써 사용하려는 글꼴이 없을 때 최대한 같은 계열의 글꼴을 가져오도록 해야 한다.
다음과 같이 선언하면 앞에서부터 순서대로 글꼴이 있는지 확인한 후, 모두 없으면 마지막 선언된 "san-serif" 그러니까 삐침 없는 돋움체 계열의 사용 가능한 시스템 글꼴 중 산세리프 글꼴, 또는 웹 브라우저의 기본 설정 산세리프 글꼴을 가져오게 된다. (출처 https://blogpack.tistory.com/1008) -
font-weight 속성으로 폰트 굵기 조절
bold: 두껍게(=700)
normal: 기본값. 보통 굵기(=400)
lighter: 부모요소 보다 얇음
bolder: 부모요소 보다 굵음 -
font-style 속성으로 이탈릭체 변형 가능.
italic, nomal(기본값) 있음 -
text-transform 속성
uppercase, lowercase 대문자 ,소문자 지정 -
텍스트 레이아웃
-letter-spacing : 글자 간의 간격(자간) 조정, px, em 단위를 사용하여 값을 지정한다.
-word-spacing : 단어 간의 간격 조정. em 단위(부모요소 기준으로 상대적 비율 조정) 사용 권장.
-line-height : 줄간격 조정. 단위 없이 사용하기도 하고 px, %, em 단위 사용하기도 함.
-
text-align : 텍스트 배열 조정. left, center, right, justify 값 사용.
-
button의 입체효과 : border-radius와 border-bottom-width를 이용
- 반응형 유닛
-
em
1em == 16px
html의 기본적으로 지정된 폰트 사이즈는 16px이다.
em은 부모의 폰트 크기에 대해 상대적인 값으로 적용된다.
부모요소: 8em == 800% == 128px
자식요소: 0.5em == 50% == 64px (부모요소의 절반 크기로 적용) -
rem
r은 root를 나타낸다.
부모에따라 지정되는 것이 아니라 root에 지정된 폰트사이즈에 따라 상대적으로 크기가 지정된다.
부모요소: 8rem == 16px*8 == 128px
자식요소: 0.5rem == 16px*0.5 == 8px
