폰트 패밀리

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 18번째.

CSS에서 font-family 속성은 HTML 요소 내의 텍스트 서체를 지정하는 데 사용됩니다. 이 속성을 사용하면 텍스트에 대해 선호하는 글꼴 목록을 나열할 수 있습니다. 첫 번째 글꼴을 사용할 수 없는 경우, 브라우저는 목록의 다음 글꼴을 사용하여 유사한 외관을 보장합니다.

font-family 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: 선호하는 글꼴 패밀리 이름이며, 선호도 순으로 나열됩니다. font1을 사용할 수 없는 경우, 브라우저는 font2를 시도하며, 이런 방식으로 계속됩니다.

generic-family: serif, sans-serif, monospace, cursive 또는 fantasy와 같은 일반적인 글꼴 패밀리 이름입니다. 이는 지정된 글꼴을 모두 사용할 수 없을 때 폴백(fallback) 역할을 합니다.

글꼴 패밀리 이름을 지정할 때는 다음 지침을 따르는 것이 중요합니다:

글꼴 패밀리 이름에 공백이 포함된 경우 따옴표로 묶어야 합니다(예: "Times New Roman", "Courier New").

여러 개의 글꼴 패밀리 이름은 쉼표로 구분해야 합니다.

지정된 글꼴을 모두 사용할 수 없는 경우 적절한 대체 글꼴이 사용되도록 목록의 마지막 옵션으로 일반 글꼴 패밀리(generic font family)를 포함하는 것이 좋습니다.

예를 들어:

p {
    font-family: Arial, Helvetica, sans-serif;
}

챌린지

쉬움

제목(<h1>)과 단락(<p>)이 포함된 HTML 문서가 주어집니다. 여러분의 과제는 font-family 속성을 사용하여 이 요소들의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-family를 "Times New Roman", Times, serif로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-family를 Arial, Helvetica, sans-serif로 설정하세요.

치트 시트

font-family 속성은 텍스트의 글꼴을 지정합니다. 선호하는 글꼴을 순서대로 나열하세요. 첫 번째 글꼴을 사용할 수 없는 경우 브라우저는 다음 글꼴을 사용합니다.

기본 구문:

selector {
    font-family: font1, font2, generic-family;
}

지침:

공백이 포함된 글꼴 이름은 따옴표가 필요합니다: "Times New Roman"
여러 글꼴은 쉼표로 구분합니다
대체 글꼴로 일반 글꼴 계열(serif, sans-serif, monospace, cursive, fantasy)을 포함하세요

예제:

p {
    font-family: Arial, Helvetica, sans-serif;
}

직접 해보기

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>