웹 페이지의 텍스트 스타일을 지정하는 것은 웹 디자인의 중요한 부분입니다. 예를 들어 헤더가 특정 글꼴로 나타나도록 하거나 페이지의 모든 텍스트가 serif를 사용하도록 할 수 있습니다. 폰트.

바로 여기에서 CSS font-family 속성이 필요합니다. CSS font-family 속성을 사용하면 웹 페이지의 텍스트 스타일을 지정하는 데 사용할 하나 이상의 글꼴 패밀리를 지정할 수 있습니다.

이 자습서에서는 예제를 참조하여 CSS font-family 속성의 기본 사항과 속성을 사용하여 웹 페이지의 텍스트 스타일을 지정하는 방법에 대해 설명합니다.

CSS 글꼴 모음

색상 설정에서 글꼴 크기에 이르기까지 CSS에서 글꼴 스타일 지정과 관련된 많은 측면이 있습니다. 그러나 글꼴 스타일 지정의 가장 중요한 부분 중 하나는 웹 페이지의 텍스트에서 사용하는 스타일인 글꼴 패밀리를 설정하는 것입니다.

웹 페이지의 텍스트에서 사용하는 글꼴 모음을 설정하려면 font-family 속성을 사용할 수 있습니다. font-family 속성의 구문은 다음과 같습니다.

font-family: fontFamilyOne, fontFamilyTwo, …;

font-family 속성은 단일 글꼴 또는 글꼴 목록을 허용합니다. 둘 이상의 글꼴을 지정하는 경우 각 글꼴을 쉼표로 구분해야 합니다.

글꼴이 나타나는 순서는 브라우저가 글꼴을 적용하려고 시도하는 순서입니다. 브라우저는 기본적으로 웹 브라우저에서 설치했거나 다운로드할 수 있는 목록의 첫 번째 글꼴을 사용합니다. 해당 글꼴을 사용할 수 없는 경우 두 번째 글꼴이 사용되는 식입니다.

font-family 속성은 텍스트 블록의 각 문자에 대한 글꼴을 선택합니다. 따라서 한 글꼴에서 특정 문자를 사용할 수 없는 경우 적절한 글꼴을 찾을 때까지 글꼴 모음 목록의 다음 글꼴을 시도합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

font-weight 속성을 사용할 때 최소한 하나의 일반 글꼴 패밀리 이름(예:serif, sans-serif 또는 monospace)을 포함하는 것이 가장 좋습니다. 이렇게 하면 목록에 있는 다른 글꼴을 사용할 수 없는 경우에도 브라우저가 웹 페이지의 텍스트에 표시할 글꼴을 선택할 수 있습니다.

font-family 속성을 사용하는 방법에는 두 가지가 있습니다. 먼저 속성을 사용하여 웹 페이지에 대한 사용자 정의 글꼴을 지정할 수 있습니다. 둘째, 속성을 사용하여 웹 페이지의 텍스트에 일반 글꼴 모음을 적용할 수 있습니다. font-family 속성과 함께 사용할 수 있는 일반 글꼴 모음은 다음과 같습니다.

serif:캐릭터는 serif 서체를 사용합니다(예:Lucida Bright, Palladio).
sans-serif:문자는 sans-serif 서체를 사용합니다(예:Open Sans, Trebuchet MS).
고정 폭:문자의 너비가 모두 동일합니다(예:고정 폭, Menlo).
cursive:문자에 결합 획이 있습니다(예:Lucida Calligraphy).
판타지:문자에 주의를 끌기 위해 사용되는 장식 글꼴(예:파피루스)

Mozilla CSS 글꼴 패밀리 문서에서 더 자세히 읽을 수 있는 다른 일반 글꼴 패밀리를 사용할 수 있습니다.

이제 font-family 속성의 기본 사항을 알았으므로 작동 방식에 대한 몇 가지 예를 살펴볼 수 있습니다.

CSS 글꼴 모음의 예

우리는 지역 우표 클럽인 시애틀 우표 클럽에서 웹사이트의 특정 부분의 글꼴을 사용자 정의해 달라는 요청을 받았습니다.

먼저, "연락처" 페이지의 모든

제목의 글꼴을 "Open Sans" 글꼴을 사용하도록 변경하라는 요청을 받았습니다. 따라서 예를 들어 웹사이트의 "연락처" 페이지에 있는 "연락처" 제목이 Open Sans에 나타나야 합니다. 해당 글꼴을 사용할 수 없는 경우 일반 "sans-serif" 패밀리를 사용해야 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<html>

<h1>Contact Us</h1>

<style>

h1 {
	font-family: "Open Sans", sans-serif;
}

CSS 글꼴 모음 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

HTML 코드에서 Contact Us 텍스트가 포함된

태그를 사용하여 제목을 지정했습니다. . 그런 다음 CSS 코드에서 font-family를 사용하여 웹 페이지의

요소 글꼴을 정의했습니다.

font-family 속성에 할당한 값은 모든

요소의 글꼴을 Open Sans로 설정합니다. , 해당 글꼴을 사용할 수 없는 경우 일반 sans-serif 가족이 사용됩니다. 이를 수행하기 위해 쉼표로 구분된 두 개의 글꼴을 지정했습니다.

이제 스탬프 클럽의 Contact에 있는 모든

요소의 스타일도 지정하고 싶다고 가정해 보겠습니다. Times 글꼴을 사용하는 페이지입니다. 해당 글꼴을 사용할 수 없는 경우 기본 세리프 글꼴을 사용해야 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<html>

<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>

<style>

p {
	font-family: "Times", serif;
}

CSS 글꼴 모음 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이 예에서는

태그를 사용하여 텍스트 단락을 선언했습니다. 그런 다음 CSS 스타일 시트에 있는 모든

태그의 font-family가 Times를 사용하도록 설정합니다. 및 serif 글꼴. 기본적으로 브라우저는 Times의 모든

태그를 렌더링하려고 시도합니다. 폰트. 이 글꼴을 사용할 수 없는 경우 serif 글꼴이 사용됩니다.

결론

CSS font-family 속성을 사용하면 웹 페이지의 텍스트 스타일을 지정할 수 있습니다. 예를 들어, font-family 속성을 사용하여 "Arial" 글꼴을 사용하거나 웹 페이지의 모든 텍스트에 "cursive" 일반 글꼴을 사용할 수 있습니다.

이 튜토리얼에서는 예제를 참조하여 CSS font-family 속성의 기본 사항과 이를 사용하여 웹 페이지의 텍스트 스타일을 지정하는 방법에 대해 설명했습니다. 이제 마스터 웹 디자이너처럼 font-family 속성을 사용할 준비가 되었습니다!

CSS 글꼴 모음

CSS 글꼴 모음

CSS 글꼴 모음의 예

태그를 사용하여 제목을 지정했습니다. . 그런 다음 CSS 코드에서 font-family를 사용하여 웹 페이지의

요소 글꼴을 정의했습니다. font-family 속성에 할당한 값은 모든

결론

요소 글꼴을 정의했습니다.

font-family 속성에 할당한 값은 모든