글꼴 패밀리 CSS 규칙을 사용하면 HTML 웹 문서의 글꼴을 정의할 수 있습니다. 외부 글꼴을 참조하려면 url() 메서드를 사용하여 글꼴을 정의할 수 있습니다. 또는 Google Fonts와 같은 사이트에서 글꼴 CSS 파일을 포함할 수 있습니다.
개발자로서 HTML이 처리될 때 채워지는 기본 글꼴을 사용하고 싶지 않을 때가 있을 것입니다. 이 문서는 모범 사례를 사용하여 HTML 문서의 글꼴을 변경하는 방법을 보여주기 위한 것입니다.
HTML에서 글꼴을 변경하는 방법
HTML에서 웹 페이지의 글꼴을 변경하는 방법에는 세 가지가 있습니다.
- 글꼴 패밀리 규칙과 함께 내장 글꼴 사용.
- 글꼴 규칙을 사용하여 외부 글꼴 참조.
- 외부 CSS 스타일 시트를 사용하여 웹페이지의 글꼴 스타일 지정.
이 기사에서는 글꼴을 변경하는 이러한 각 방법에 대해 설명합니다.
HTML 글꼴 변경:내장 글꼴 모음
글꼴을 변경할 수 있는 첫 번째 방법은 인라인 스타일에서 font-family 속성을 사용하는 것입니다. 다음과 같이 할 수 있습니다.
<p style="font-family:wingdings;" id="wingdings">New York</p>
우리는 단순히 글꼴 모음을 사용합니다. 속성을 사용하여 텍스트 블록에서 사용하려는 글꼴을 나타냅니다. 많은 표준 글꼴을 쉽게 사용할 수 있습니다.
첫 번째 글꼴 선택을 로드할 수 없는 경우를 대비하여 백업 글꼴을 갖는 것이 좋습니다. 쉼표와 새 글꼴 패밀리 이름을 추가하는 것만 큼 쉽습니다. 나는 항상 처음 두 개를 사용할 수 없는 한 가지 예외적인 경우에 일반 그룹화로 끝납니다.
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
마지막에 있는 일반 그룹화는 클라이언트가 사용하는 장치에 대한 기본 sans-serif 글꼴입니다. 사용 가능한 일반 성:모노스페이스 , 세리프 , 산세리프 , 필체 , 그리고 판타지 . Times New Roman과 같은 특정 글꼴에 액세스할 수도 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
HTML 글꼴 변경:글꼴 사용
글꼴 규칙을 사용하여 외부 소스에서 웹 페이지로 글꼴을 가져올 수 있습니다.
이 접근 방식을 사용하려면 외부 글꼴 문서에 대한 액세스 권한이 있어야 합니다. 글꼴 문서의 확장자는 일반적으로 ".ttf"입니다.
font-face 속성을 사용하여 글꼴을 변경하는 방법을 살펴보겠습니다. 다음은 사용해야 하는 CSS 스타일 규칙입니다.
@font-face {
font-family: "Open Sans";
src: url(yoururl);
} font-face 스타일 속성을 사용하여 새 글꼴을 선언합니다. font-family 속성은 새 글꼴의 이름을 정의합니다. src:url()은 CSS 문서에 글꼴을 찾을 위치를 지시합니다. "yoururl"의 값은 텍스트 글꼴의 URL이어야 합니다.
우리의 글꼴은 아직 웹 페이지를 변경하지 않을 것입니다. 어떤 요소가 새 글꼴을 사용해야 하는지 CSS 스타일 시트에 알려야 합니다.
h1, h2, h3 {
font-family: "Open Sans";
} 이 코드는 CSS 스타일 시트에 "Open Sans" 글꼴을 웹 페이지의 일부 요소에 적용하도록 지시합니다. h1, h2, h3은 나열된 요소에 스타일을 적용하는 CSS 선택기입니다. 이러한 요소는 HTML 제목입니다.
글꼴 HTML 변경:외부 CSS 글꼴
Google Fonts와 같은 일부 사이트에서는 CSS 스타일 시트를 사용하여 사이트에 글꼴을 포함할 수 있습니다. 이러한 스타일을 사용하면 CSS 속성을 사용하여 글꼴 유형을 정의할 수 있습니다. 이 예에서는 Google Fonts의 'Bangers'와 'Yellowtail' 글꼴을 사용하려고 합니다.
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
선택한 IDE에서 위의 코드를 실행하고 로드하면 기본 글꼴이 일반 글꼴로 설정됩니다. 이 글꼴을 사용하려면 몇 번의 간단한 클릭으로 다음을 수행할 수 있습니다.
- Google 글꼴을 방문하세요.
- 원하는 경우 시간을 내어 사이트를 둘러보세요. 여기에 글꼴에 대한 많은 옵션이 있습니다. 원하는 대로 샘플 텍스트를 사용자 정의할 수 있습니다. 웹페이지 상단에 원하는 내용을 입력할 수 있는 입력부가 있습니다.
- 'Yellowtail'을 검색하고 클릭하세요. 글꼴에 대한 자세한 정보가 있는 화면으로 이동해야 합니다. "+ 이 스타일 선택을 찾습니다. " 버튼을 누르고 클릭하세요.
- 선택 항목에 대한 정보가 포함된 사이드바 서랍이 표시되어야 합니다. 더 많은 글꼴을 탐색하는 동안 열린 상태로 유지됩니다. 글꼴 찾아보기를 클릭합니다. 화면 상단에 링크하고 '뱅거스'를 검색하세요. 'Yellowtail'과 동일한 과정을 거칩니다.
- 사이드바에 '삽입' 탭이 표시됩니다. 클릭하세요.
- <링크> 옵션이 이미 강조 표시되어 있어야 합니다. 복사 및 붙여넣기 HTML의 헤드에 넣습니다.
- CSS에서 각 글꼴을 사용하는 방법에 대한 지침을 따르십시오. 권장 백업 글꼴도 제공합니다.
- 그렇군요! 문서에서 이 글꼴을 사용할 준비가 되었습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
위의 작업 데모는 사용 중인 내장 글꼴과 타사 글꼴을 모두 보여줍니다. 다른 글꼴 가져오기를 시도해 보세요!
결론
font-family 속성을 사용하거나 사용자 정의 글꼴이 있는 외부 CSS 스타일 시트를 사용하여 HTML 글꼴을 변경할 수 있습니다. 사이트의 CSS에 사용자 정의 글꼴을 포함하려면 글꼴 규칙을 사용할 수 있습니다.
HTML 코딩에 대해 더 알고 싶으십니까? HTML 학습 방법 가이드를 읽어보세요. 이 가이드에서는 HTML을 배우는 방법에 대한 최고의 팁과 최고의 온라인 과정에 대한 지침을 찾을 수 있습니다.