CSS - 폰트: 초보자를 위한 종합 가이드

안녕하세요, 야심찬 웹 개발자 여러분! 오늘 우리는 CSS 폰트의 fascinле는 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 이 여정을 단계별로 안내해 드리겠습니다. 따뜻한 커피(또는 차, 만약 그게 당신의 취향이라면)를 한 잔 들고, 시작해 보세요!

CSS 폰트 소개

먼저, 폰트에 대해 이야기해 보겠습니다. 책을 읽다가 전체가 코믹 sans로 되어 있으면 기분 좋지 않죠? 그래서 웹사이트에 적절한 폰트를 선택하는 것이 중요합니다. 첫 데이트에 적절한 옷을 입는 것과 같은 이유입니다. 좋은 인상을 싣고 싶죠!

CSS 폰트 축약 문법

폰트 스타일링의 마법의 단축키인 폰트 축약 문법으로 시작해 보겠습니다. 이 것은 다용도의瑞士军刀와 같은 것입니다!

body {
font: italic small-caps bold 16px/2 Arial, sans-serif;
}

이 한 줄로 여러 폰트 속성을 동시에 설정할 수 있습니다. 이를 쉽게 풀어보면:

• italic: 폰트 스타일
• small-caps: 폰트 변형
• bold: 폰트 무게
• 16px: 폰트 크기
• 2: 줄 높이
• Arial, sans-serif: 폰트 가족

이게 정말 멋지죠? 콤보 메뉴를 주문하는 것과 같은 느낌입니다!

CSS 폰트 - 여러 값을 사용할 때

때로는 하나의 폰트만으로는 충분하지 않습니다. 여기서 여러 값을 사용하는 방법이 도움이 됩니다:

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

이 것은 예비 계획과 같은 것입니다. "Trebuchet MS"가 사용할 수 없다면, Verdana를 시도하고, 그것도 실패하면 sans-serif 폰트를 사용합니다.

CSS 폰트 - 폰트 가족

폰트 가족에 대해 조금 더 깊이 이야기해 보겠습니다:

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

여기서 우리는 제목과 본문에 다른 폰트 가족을 사용하고 있습니다. 제목은 비싼 정장을 입고, 본문은 스마트 캐주얼 옷을 입는 것과 같습니다!

CSS 폰트 - 폰트 기능 설정

이제 폰트 기능 설정으로 더 멋을 내 보겠습니다:

p {
font-feature-settings: "smcp" on, "swsh" 2;
}

이것은 소문자를 소문자로 변환하고, 스와시를 레벨 2로 설정합니다. 폰트에 슈퍼파워를 부여하는 것과 같습니다!

CSS 폰트 - font-feature-settings 속성

다른 폰트 기능 설정 예제를 보겠습니다:

.stylish-text {
font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

이것은 표준 결합자, 선택적 결합자, 역사적 결합자를 활성화합니다. 텍스트를 콜라주 마스터pieces로 변환하는 것과 같습니다!

CSS 폰트 - 폰트 kerning

kerning은 문자 사이의 공간에 대해 다룹니다:

.kerned-text {
font-kerning: normal;
}

이것은 문자 사이의 적절한 간격을 보장합니다. 텍스트가 숨을 쉬는 공간을 주는 것과 같습니다!

CSS 폰트 - 폰트 언어 오버라이드

때로는 언어 설정을 오버라이드해야 합니다:

.japanese-text {
font-language-override: "JAN";
}

이것은 브라우저가 일본어 특정 글리프 변형을 사용하도록 합니다. 텍스트가 일본어로 말하는 것과 같습니다!

CSS 폰트 - 폰트 광학 크기 조정

광학 크기 조정은 폰트 크기를 조정합니다:

.headline {
font-optical-sizing: auto;
}

이것은 폰트가 다른 크기에서 최적의 외관을 가지도록 합니다. 변신하는 폰트와 같습니다!

CSS 폰트 - 폰트 팔레트

폰트 팔레트를 사용하여 사전 정의된 색상 계획을 사용할 수 있습니다:

@font-palette-values --custom-palette {
font-family: Pixelify Sans;
base-palette: 1;
}

.colored-text {
font-palette: --custom-palette;
}

이것은 텍스트에 커스텀 색상 팔레트를 적용합니다. 텍스트에 마이크로 make-over를 주는 것과 같습니다!

CSS 폰트 - 폰트 크기

폰트 크기는 매우 간단합니다:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}

여기서 우리는 본문에 기본 크기를 설정하고, 제목은 두 배 크기로 합니다. 텍스트에 성장 약을 주는 것과 같습니다!

CSS 폰트 - 폰트 크기 조정

폰트 크기 조정은 다양한 폰트 간의 가독성을 유지하는 데 도움이 됩니다:

.adjusted-text {
font-size-adjust: 0.5;
}

이것은 x-height를 기준으로 폰트 크기를 조정합니다. 텍스트에 플랫폼 신발을 신는 것과 같습니다!

CSS 폰트 - 폰트 확장

폰트 확장은 폰트를 압축하거나 확장할 수 있습니다:

.stretched-text {
font-stretch: extra-expanded;
}

이것은 텍스트를 더 넓게 만듭니다. 텍스트가 체육관에 가서 근육을 키운 것과 같습니다!

CSS 폰트 - font-style 속성

폰트 스타일을 사용하여 텍스트를 이탤릭으로 만들 수 있습니다:

.emphasized {
font-style: italic;
}

이것은 텍스트에 기울기를 줍니다. 텍스트가 귀 기울여 중얼 중얼 말하는 것과 같습니다!

CSS 폰트 - font-weight 속성

폰트 무게는 텍스트의 강조를 조정합니다:

.important {
font-weight: bold;
}

이것은 텍스트를 강조시킵니다. 텍스트가 근육을 강조하는 것과 같습니다!

CSS 폰트 - font-synthesis 속성

폰트 합성은 브라우저가 폰트의 볼드나 이탤릭 버전을 생성하는 것을 제어합니다:

.no-fake-bold {
font-synthesis: none;
}

이것은 브라우저가 인공적인 볼드 버전을 생성하는 것을 방지합니다. "fake it till you make it"을 하지 말라는 것과 같습니다!

CSS 폰트 - font-variant 속성

폰트 변형을 사용하여 대체 글리프를 사용할 수 있습니다:

.smallcaps {
font-variant: small-caps;
}

이것은 소문자를 소문자로 변환합니다. 텍스트가 작은 정장을 입은 것과 같습니다!

CSS 폰트 - font-variation-settings 속성

폰트 변이 설정은 변이 폰트에 대한 세밀한 제어를 제공합니다:

.custom-font {
font-variation-settings: "wght" 375, "wdth" 80;
}

이것은 커스텀 무게와 너비 값을 설정합니다. 텍스트에 맞춤형 정장을 입는 것과 같습니다!

CSS 줄 높이

줄 높이는 텍스트 줄 사이의 공간을 조정합니다:

p {
line-height: 1.5;
}

이것은 줄 높이를 폰트 크기의 1.5배로 설정합니다. 텍스트가 다리를 뻗고 편안하게 쉬는 것과 같습니다!

CSS 폰트 - Google Fonts

Google Fonts는 무료로 사용할 수 있는 웹 친화적인 폰트의 보물 창고입니다:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: 'Roboto', sans-serif;
}

이것은 Roboto 폰트를 가져오고 사용합니다. 개인 폰트 스타일리스트를 가지는 것과 같습니다!

CSS 폰트 - 예비 폰트

언제나 예비 폰트를 제공하세요:

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

이것은 텍스트가 항상 좋게 보이도록 보장합니다. 예비 계획의 예비 계획과 같습니다!

CSS 폰트 - 요약

이제 우리가 다룬 모든 폰트 속성의 요약을 보겠습니다:

속성	설명	예제
font	여러 폰트 속성의 축약	font: italic bold 16px/2 Arial, sans-serif;
font-family	폰트 가족 지정	font-family: Arial, sans-serif;
font-feature-settings	고급 타이포그래피 기능 제어	font-feature-settings: "smcp" on;
font-kerning	폰트 kerning 제어	font-kerning: normal;
font-language-override	언어 특정 글리프 대체 오버라이드	font-language-override: "JAN";
font-optical-sizing	광학 크기 조정	font-optical-sizing: auto;
font-palette	폰트 팔레트 지정	font-palette: --custom-palette;
font-size	폰트 크기 설정	font-size: 16px;
font-size-adjust	x-height 기준 폰트 크기 조정	font-size-adjust: 0.5;
font-stretch	폰트 확장	font-stretch: extra-expanded;
font-style	폰트 스타일 설정	font-style: italic;
font-weight	폰트 무게 설정	font-weight: bold;
font-synthesis	폰트 합성 제어	font-synthesis: none;
font-variant	폰트 변형 지정	font-variant: small-caps;
font-variation-settings	변이 폰트 특성 제어	font-variation-settings: "wght" 375;
line-height	줄 높이 설정	line-height: 1.5;

이제 여러분은 CSS 폰트에 대한 종합적인 가이드를 가지고 있습니다. 타이포그래피는 예술이며, 이제 여러분은 진정한 예술가가 될 수 있는 도구를 가지고 있습니다. 행복하게 코딩하세요, 여러분의 폰트 항상 멋지하게 보이기를 바랍니다!

Credits: Image by storyset