반응형
⭕ CSS | 폰트 : 구글 폰트(Google Fonts), 기본(권장) 설정, Google Material Icons
➡️ 구글 폰트(Google Fonts)
- https://fonts.google.com/
- 일반적으로 9가의 다른 두께를 지정할 수 있음
- 폰트 파일은 생각보다 용량이 크므로 웹 성능에 영향을 줄 수 있음
- HTML 문서 내 main CSS 파일보다 상위에 위치해야 함
적용 방식
- Link 방식 (병렬 로딩): 권장 방식
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
- Import 방식 (직렬 로딩)
@import url('https://fonts.googleapis.com/css?family=Roboto');
➡️ 기본(권장) 설정
/* 폰트 색상 설정: UI 디자인에서 세련된 느낌을 주는 회색을 사용함 */
color: #333;
/*크기 설정 */
font-size: 16px;
/*두께 설정 */
font-weight: 400;
/* 줄 간격 설정 */
line-height: 1.4;
➡️ Google Material Icons
- https://fonts.google.com/icons
- Google Fonts를 통해 제공되는 아이콘 세트
- HTML에 클래스 material-icons를 추가하고, 폰트 사이즈로 아이콘 크기를 지정함
<span class="material-icons" style="font-size: 24px;">home</span>반응형