웹 개발에서 올바른 글꼴 스타일 사용은 응용 프로그램에 매력적인 모양을 제공합니다. 이러한 글꼴 스타일은 문서의 읽기 순서에 대한 시각적 단서를 제공합니다. 예를 들어, 문서 제목의 글꼴 스타일은 다른 사람보다 굵고 중요해야 합니다. 스타일링은 또한 중요한 콘텐츠를 다른 콘텐츠와 구별하는 데 도움이 됩니다.
이 기사의 학습 결과는 다음과 같습니다.
Google 웹 글꼴이란 무엇입니까?
Google 웹 글꼴은 수백 가지 글꼴 스타일 또는 글꼴 모음이 포함된 오픈 소스 라이브러리입니다. 또한 Android 및 CSS에서 웹 글꼴을 사용하는 데 도움이 되는 API를 제공합니다. Google 글꼴은 다른 글꼴 라이브러리보다 훨씬 가볍고 업무용으로 무료로 사용할 수 있습니다. 이는 모든 웹 사이트에서 구현하기가 더 쉽습니다.
기본적으로 CSS는 판타지, 세리프, 산세리프, 필기체 및 모노스페이스 글꼴 스타일을 제공합니다. 다른 글꼴 스타일을 사용하려는 경우 Google 글꼴을 활용할 수 있습니다.
HTML에서 Google 글꼴을 가져오는 방법은 무엇입니까?
HTML 페이지에서 Google Fonts를 사용하려면 다음 단계를 따르십시오.
1단계: 글꼴 패밀리 선택
먼저, 구글 글꼴 공식 웹 사이트에서 원하는 글꼴을 선택하십시오. 예를 들어 ' 랍스터 투 ” 글꼴 모음:
2단계: 스타일 선택
그런 다음 아래로 스크롤하여 스타일 목록을 봅니다. '를 클릭하여 컬렉션에 추가하십시오. + ' 징후:
3단계: 선택한 가족 보기
선택한 패밀리를 보려면 아래 강조 표시된 아이콘을 클릭하십시오.
4단계: HTML에 삽입할 링크 복사
그런 다음 아래로 스크롤하여 강조 표시된 '를 사용하여 font-family 링크를 복사합니다. 복사 ” 아이콘:
CSS 파일에서 Google 글꼴을 활용하는 방법은 무엇입니까?
스타일 지정을 위해 CSS에서 Google Fonts 사본을 사용하려면 주어진 예를 살펴보십시오.
예 1
'를 포함 ” 일부 콘텐츠 또는 단락을 지정하는 요소:
< 피 > “최고의 튜토리얼 웹사이트” 피 >Google 글꼴을 가져오려면 복사한 코드를 ' <스타일> ” HTML 파일의 태그:
@ URL 가져오기 ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;스타일 'p' 요소
피 {글꼴 모음: '랍스터 투' , 필기체;
텍스트 정렬: 가운데;
글꼴 크기: 45px;
색상: RGBA ( 64 , 삼 , 162 , 0.8 ) ;
}
아래 설명된 CSS 속성은 HTML ' ” 태그:
- “ 글꼴 모음 '는 '값으로 지정됩니다. '랍스터 투', 필기체 '. 이 글꼴 모음은 Google 글꼴에서 가져옵니다.
- “ 텍스트 정렬 ” 텍스트 정렬을 조정합니다.
- “ 글꼴 크기 '는 글꼴 크기를 결정합니다.
- “ 색깔 ” 글꼴 색상을 설정합니다.
이미지는 글꼴 모음이 성공적으로 적용되었음을 보여줍니다.
예 2
'를 가져오는 또 다른 예를 들어 보겠습니다. 네르코 원 ” 구글 글꼴. 이를 위해 'Nerko One' Google 글꼴 URL에 대한 코드를 다시 ' <스타일> ' 요소:
@ URL 가져오기 ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;스타일 'p' 요소
피 {글꼴 모음: '네르코 원' , 필기체;
글꼴 두께: 300 ;
글꼴 크기: 30px;
}
“ 글꼴 모음 ”, “ 글꼴 두께 ', 그리고 ' 글꼴 크기 ” 속성이 HTML에 적용됨 “ ' 요소.
산출
CSS 파일에서 Google 웹 글꼴을 가져오는 방법을 알려드렸습니다.
결론
CSS에서 Google 글꼴을 가져오려면 먼저 구글 글꼴 공식 웹 사이트에서 글꼴 스타일을 선택하십시오. 그런 다음 '가 포함된 코드를 복사합니다. @수입 ” 키워드를 CSS 파일 또는 “ <스타일> ” HTML 파일의 요소. 이 연구는 Google 글꼴을 CSS 파일로 가져오는 전체 절차를 시연했습니다.