폰트

한수킴·2025년 2월 2일

CSS

목록 보기
11/17
post-thumbnail

1.제네릭패밀리와 폰트패밀리

제네릭패밀리 (Generic Family)

  • 글꼴의 일반적인 분류(그룹)를 나타냅니다. serif, sans-serif, monospace, cursive, fantasy, system-ui 등.
  • 사용 가능한 특정 폰트를 찾지 못했을 때, 브라우저는 제네릭 패밀리에 해당하는 시스템 기본 글꼴로 대체합니다. 항상 마지막에 배치하여 폰트 목록의 마지막 옵션으로 사용됩니다.

폰트패밀리 (Font Family)

  • 특정한 글꼴(폰트)의 이름을 지정합니다. "Helvetica", "Arial", "Times New Roman" 등.
  • 사용자가 시스템에 설치했거나, 웹폰트로 불러온 구체적인 글꼴을 지정합니다. 여러 개를 쉼표(,)로 구분하여 우선순위에 따라 나열할 수 있습니다.
font-family: "Open Sans", Arial, sans-serif;
  • "Open Sans"가 우선적으로 사용되고, 없다면 Arial을, 그마저 없으면 시스템의 sans-serif 계열 글꼴이 사용됩니다.

2. 폰트를 설정하는 방법

1) 로컬 폰트 (Local Fonts)

사용자의 컴퓨터나 디바이스에 이미 설치된 폰트를 사용하는 방식. css-font-stack

2) 웹 폰트 (Web Fonts)

폰트를 서버나 외부 서비스(예: Google Fonts, Adobe Fonts)에서 불러와 사용하는 방식.

<!-- HTML에서 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
CSS @import
/* CSS에서 @import 사용 */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

3) 서버에서 직접 제공하는 폰트 (@font-face)

자신의 서버에 호스팅한 폰트 파일을 불러와 사용하는 방식.

@font-face 규칙
  • 웹페이지에 사용할 커스텀 폰트를 서버 또는 외부 소스에서 불러와 사용할 수 있게 해줍니다.
  • 사용자가 특정 폰트를 설치하지 않아도, 원하는 스타일의 폰트를 웹사이트에 적용할 수 있음.
  • 브랜드 일관성, 독창적인 디자인 구현이 가능함.
/* 일반 스타일 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont-Regular.woff2') format('woff2'),
       url('/fonts/MyFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 굵은 스타일 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont-Bold.woff2') format('woff2'),
       url('/fonts/MyFont-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* 이탤릭 스타일 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont-Italic.woff2') format('woff2'),
       url('/fonts/MyFont-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display : auto;
}

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

font-display

웹 폰트가 로드되는 동안 텍스트가 어떻게 렌더링될지를 제어하는 중요한 옵션입니다.
1. auto

  • 브라우저의 기본 폰트 디스플레이 전략을 따릅니다.
  • 브라우저가 내부적으로 결정한 폰트 렌더링 전략(일반적으로 폰트 블록과 유사한 방식)을 사용합니다.
  • 모든 브라우저에서 일관되게 동작하지 않을 수 있으므로, 명시적으로 동작을 제어하고 싶을 때는 다른 값을 사용하는 것이 좋습니다.

2. block

  • 폰트가 준비될 때까지 텍스트 렌더링을 잠시 숨기는 전략입니다.
  • 동작 과정:
    - 초기 대기 기간 (최대 약 3초):폰트가 다운로드되기 전까지 텍스트가 보이지 않으며, 투명한(또는 숨김) 상태가 됩니다.
    - 폰트 로드 완료: 다운로드가 완료되면, 텍스트가 커스텀 폰트로 렌더링됩니다.
    - 폰트 로드 실패 시: 지정된 시간이 지나도 폰트 로드가 완료되지 않으면, 브라우저는 대체 폰트로 렌더링합니다.
  • 장점: 폰트가 완전히 로드된 후에야 텍스트가 표시되므로, "FOIT (Flash of Invisible Text)" 현상을 볼 수 있습니다.
  • 단점: 폰트 로드가 지연될 경우 사용자에게 빈 화면(또는 텍스트 없음)이 잠시 나타날 수 있습니다.

3. swap

  • 폰트가 로드되기 전에는 시스템 대체 폰트로 렌더링한 뒤, 폰트가 준비되면 즉시 교체하는 전략입니다.
  • 동작 과정:
    - 초기 렌더링: 텍스트를 시스템의 기본 대체 폰트로 즉시 표시합니다.
    - 폰트 다운로드 완료: 다운로드가 완료되면, 페이지에 표시된 텍스트를 커스텀 폰트로 바꿉니다.
  • 장점: "FOIT (Flash of Invisible Text)"를 방지하여 사용자에게 텍스트가 바로 보이게 합니다.
  • 단점: 폰트가 전환되면서 텍스트의 모양이 변경되는 "FOUC (Flash of Unstyled Content)" 현상이 발생할 수 있습니다.

4. fallback

  • 폰트 로딩에 대한 유예 기간(fallback 기간)을 두고, 그 기간 내에 폰트가 로드되지 않으면 대체 폰트를 사용한 채로 표시하는 전략입니다.
  • 초기 렌더링 지연을 최소화하면서, 폰트 로드 실패 시에도 사용자 경험을 유지할 수 있습니다.
  • 동작 과정:
    - 짧은 초기 대기 시간 (약 100ms 정도): 폰트가 곧 로드될 것이라 판단되면, 잠시 대기 후 폰트를 적용합니다.
    - 대기 시간 이후: 만약 지정된 시간이 지나도 폰트가 로드되지 않으면, 시스템 대체 폰트로 텍스트를 표시합니다.
    - 폰트가 나중에 다운로드되면: 이미 대체 폰트로 렌더링한 텍스트는 교체되지 않고 계속 대체 폰트가 유지됩니다.
    5. optional
  • 폰트가 다운로드되지 않아도 페이지 렌더링에 큰 영향을 주지 않도록 하는 전략입니다.
  • 낮은 우선순위의 폰트 로드 전략으로, 특히 모바일이나 네트워크 환경이 불안정한 경우 유용합니다.
  • 폰트 파일이 매우 크거나, 사용자가 데이터 요금제에 민감한 상황에서 사용하면 좋습니다.
  • 동작 과정:
    - 즉시 대체 폰트로 렌더링: 초기에는 시스템 대체 폰트를 사용하여 텍스트를 표시합니다.
    - 폰트 다운로드 시도: 폰트 다운로드를 시도하지만, 네트워크 상태가 좋지 않은 경우 다운로드를 포기할 수도 있습니다.
    - 폰트 교체 여부: 폰트가 빠르게 로드되면 교체되지만, 그렇지 않은 경우 계속 대체 폰트를 유지합니다.

3. 브라우저가 폰트를 선택하는 순서 및 원리

브라우저는 font-family에 지정된 폰트 목록을 왼쪽부터 오른쪽 순서로 차례대로 확인합니다.
1. 지정된 첫 번째 폰트
사용자의 시스템에 설치되어 있거나, 이미 다운로드된 웹/서버 폰트가 있다면 이를 사용합니다.
2. 대체 폰트로 순차 탐색
첫 번째 폰트가 없거나 사용할 수 없다면, 목록에 있는 다음 폰트로 넘어갑니다.
3. 제네릭 패밀리
목록의 마지막에 보통 제네릭 패밀리가 위치합니다. 이 경우 브라우저는 시스템 기본 글꼴에서 해당 제네릭 그룹의 폰트를 선택합니다.

font-family: 'NonExistentFont', 'AnotherFont', sans-serif;
  • 만약 NonExistentFont와 AnotherFont가 없으면, 브라우저는 sans-serif 계열의 시스템 폰트를 사용합니다.

4. 폰트 포맷

TrueType Fonts (TTF)

  • 1980년대 후반에 개발된 오래된 포맷.
  • 벡터 방식의 글꼴로, 다양한 운영체제에서 지원.
  • 상대적으로 파일 크기가 클 수 있음.

OpenType Fonts (OTF)

  • TTF를 기반으로 확장된 포맷.
  • 더욱 풍부한 타이포그래피 기능(예: 리가처, 대체 문자 등) 제공.
  • 다양한 언어와 고급 타이포그래피 기능 지원.
  • TTF와 마찬가지로 벡터 방식.

Web Open Font Format (WOFF)

  • 웹 전용으로 최적화된 포맷.
  • TTF/OTF 폰트를 압축한 형태.
  • 대부분의 최신 브라우저에서 지원.
  • 파일 크기가 작아 네트워크 전송에 유리.

Web Open Font Format 2 (WOFF2)

  • WOFF의 후속 버전으로, 더 높은 압축률 제공.
  • 지원하는 브라우저는 제한적일 수 있으나 최신 브라우저에서는 사용 가능.
  • 더욱 빠른 다운로드와 로딩 속도 제공.

5. 폰트 관련 프로퍼티

font-family

  • 사용할 폰트(패밀리) 목록 지정.
p {
  font-family: 'Roboto', Arial, sans-serif;
}

font-size

  • 텍스트의 크기 설정
  • px, em, rem, %, vw 등.
p {
  font-size: 16px;
}

font-weight

  • 텍스트의 두께 설정.
  • normal, bold, 숫자값(100 ~ 900).
p {
  font-size: 16px;
}

font-style

  • 텍스트의 기울임 여부 설정.
  • normal, italic, oblique.
p {
  font-style: italic;
}

font-variant

  • 소문자를 작은 대문자로 변환하는 등의 변형 옵션.
p {
  font-variant: small-caps;
}

letter-spacing

  • 글자 사이의 간격을 조절.
  • normal 또는 길이 단위(px, em 등).
p {
  letter-spacing: 1px;
}

white-space

  • 공백, 줄바꿈, 텍스트의 줄 바꿈 동작을 제어.
  • normal: 연속된 공백을 하나로, 자동 줄바꿈 허용.
  • nowrap: 줄바꿈 없이 한 줄에 모두 표시.
  • pre: HTML의 pre와 같이 공백과 줄바꿈을 그대로 유지.
  • pre-wrap: 공백과 줄바꿈은 그대로, 필요한 경우 줄바꿈 적용.
  • pre-line: 연속된 공백은 하나로, 줄바꿈은 유지.
p {
  white-space: pre-wrap;
}

line-height

  • 한 줄의 높이를 지정하여 줄 간격을 조절.
  • normal, 숫자(배수), 길이 단위, 퍼센트.
p {
  line-height: 1.6;
}

text-decoration

  • 텍스트에 꾸밈 효과(밑줄, 위줄, 취소선 등)를 적용.
  • none: 꾸밈 효과 없음.
  • underline: 밑줄.
  • overline: 위줄.
  • line-through: 취소선.
  • 또는 이들의 조합.
a {
  text-decoration: underline;
}

text-shadow

  • 텍스트에 그림자 효과를 적용.
  • 기본 형식: text-shadow: x-offset y-offset blur-radius color;
  • 여러 그림자는 쉼표로 구분하여 지정.
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

font (단축 속성)

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

p {
  font: italic small-caps bold 16px/1.5 "Open Sans", sans-serif;
}
profile
한수킴
이전 포스트

반응형 디자인

다음 포스트

css Flexbox

0개의 댓글