티스토리 뷰
프로젝트를 하면서 웹폰트 설정 관련해서 이전엔 안 써본 font 속성에 대하여 정리!
- 웹 폰트 최적화 방법 : 텍스트가 항상 보이게 하기
* 웹폰트 적용시 텍스트 번쩍임 현상 발생
1) FOIT (Invisible) (Firefox, Chrome)
웹폰트가 적용되지 않은 “텍스트”가 보이지 않는 상태에서 폰트가 바뀌면 텍스트 번쩍임 현상 발생.
2) FOUT (Unstyled) (Internet Explorer)
웹폰트가 적용되지 않은 “폴백 폰트 상태”에서 폰트가 바뀌면서 텍스트 번쩍임 현상이 일어나는 현상 발생.
* CSS의 font-display 속성을 사용하면 외부 라이브러리를 사용하지 않고도 웹폰트의 로딩 상태에 따른 동작 설정이 가능함. (현, IE 미지원.)
font-display : auto (default) / block / swap / fallback / optional
- block : FOIT와 동일하게 작동하는 옵션.
- swap : FOUT와 동일하게 작동하는 옵션. 즉, “텍스트가 항상 보이게 처리함.”
'HTML5, CSS3' 카테고리의 다른 글
| [CSS] 모바일 화면에서 확대/축소 (안드로이드 및 아이폰 네이버브라우저 적용) (0) | 2024.04.12 |
|---|---|
| [SCSS] @each $key변수, $value변수 in { 실행문 } (0) | 2021.12.03 |
| [기초개념] 웹표준, 웹접근성, 웹호환성 정의비교 (0) | 2021.10.07 |
| [CSS] <link> 태그의 media 속성 (0) | 2021.10.07 |
| [CSS] transform 속성에 대하여 (0) | 2021.04.18 |
댓글
공지사항
최근에 올라온 글