Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

텍스트 및 서체

CSS 팟캐스트 - 036: 텍스트 및 서체

텍스트는 웹의 핵심 구성요소 중 하나입니다.

웹사이트를 만들 때 텍스트에 스타일을 지정할 필요는 없습니다. HTML에는 실제로 꽤 적절한 기본 스타일이 있습니다.

하지만 텍스트가 웹사이트의 대부분을 차지할 가능성이 높으므로 텍스트를 꾸미기 위한 스타일을 추가하는 것이 좋습니다. 몇 가지 기본 속성을 변경하면 사용자의 독서 환경을 크게 개선할 수 있습니다.

이 모듈에서는 맞춤 글꼴을 웹페이지로 가져올 수 있는 @font-face 규칙부터 시작합니다. 이렇게 하면 사용자가 설치한 글꼴과 관계없이 필요한 정확한 서체를 사용할 수 있습니다.

그런 다음 font-family, font-style, font-weight, font-size를 비롯한 필수 CSS 글꼴 속성을 살펴봅니다. 이러한 기본사항을 숙지하면 스타일과 가독성을 위해 텍스트를 조작할 수 있습니다.

또한 text-indent 및 word-spacing와 같은 단락별 속성도 살펴본 후, 가변 글꼴 및 가상 요소와 같은 고급 주제로 마무리하여 서체 설정을 더욱 세부적으로 조정해 보겠습니다.

이러한 CSS 기법을 이해하고 적용하는 데 도움이 되는 실용적인 예시와 팁이 제공됩니다.

`@font-face` 규칙

@font-face CSS at-rule은 웹 디자인에 중요한 역할을 하며, 맞춤 글꼴을 지정하고 사용하여 텍스트를 표시할 수 있습니다. @font-face의 장점은 다목적성입니다. 원격 서버 또는 사용자 기기에 설치된 글꼴에서 글꼴을 가져올 수 있습니다.

구문

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

기술어

ascent-override: 상승 측정항목을 맞춤설정하여 기준선 위의 공간에 영향을 줍니다.
descent-override: 하강 측정항목을 조정하여 기준선 아래의 공간에 영향을 줍니다.
font-display: 다운로드 상태에 따라 글꼴의 표시 동작을 제어합니다.
font-family: 글꼴 관련 속성 내에 사용할 글꼴의 이름을 지정합니다.
font-stretch: 허용되는 가로 확장입니다(단일 값 또는 범위로 지정됨).
font-style: 경사 스타일의 각도 범위를 지원하는 글꼴 스타일을 정의합니다.
font-weight: 사용 가능한 글꼴 두께 또는 두께 범위를 결정합니다.
font-feature-settings: OpenType 글꼴 기능에 대한 액세스를 사용 설정합니다.
font-variation-settings: 변수 글꼴 설정을 미세하게 제어합니다.
line-gap-override: 글꼴의 기본 줄 간격을 재정의합니다.
size-adjust: 글꼴의 윤곽선과 측정항목에 배율을 적용합니다.
src: 로컬 또는 원격 글꼴 소스를 정의합니다. 이는 @font-face 규칙에 필요합니다. src 내에서 url()와 local()를 결합하는 것은 사용 가능한 경우 로컬 글꼴을 사용하고 대체로 원격 글꼴 파일로 되돌아가는 일반적인 전략입니다. 브라우저는 선언 순서에 따라 리소스의 우선순위를 지정하므로 일반적으로 local()가 url() 앞에 있어야 합니다.
unicode-range: 이 글꼴을 사용해야 하는 문자를 제한합니다.

설명

@font-face를 사용하면 디자이너가 맞춤 서체를 사용할 수 있으므로 '웹 안전' 글꼴의 제약조건에서 벗어날 수 있습니다. local() 함수의 사용자 기기에서 글꼴을 검색하는 기능은 인터넷 연결에 꼭 의존하지 않는 원활한 환경을 제공합니다.

글꼴 MIME 유형

방식	MIME 유형
TrueType	`font/ttf`
OpenType	`font/otf`
웹 오픈 글꼴 형식	`font/woff`
웹 오픈 글꼴 형식 2	`font/woff2`

@font-face와 font-family의 차이점

CSS에서 @font-face와 font-family는 종종 혼동되지만 서로 다른 목적으로 사용됩니다.

앞서 설명한 대로 @font-face는 웹 애플리케이션에서 사용하려는 맞춤 글꼴을 정의하는 데 사용되는 규칙입니다. 브라우저에 글꼴을 다운로드할 위치, 로드 중에 글꼴을 표시하는 방법 (font-display 속성 사용)을 알려주고 다운로드할 문자 하위 집합을 지정합니다 (unicode-range 사용).

반면 font-family는 CSS 규칙 내에서 특정 글꼴 또는 글꼴 목록을 요소에 할당하는 데 사용되는 CSS 속성입니다. font-family 아래에 나열된 글꼴은 웹에 적합한 글꼴, 시스템 글꼴 또는 @font-face로 정의된 맞춤 글꼴일 수 있습니다.

요약하면 @font-face는 글꼴을 선언하고 이름을 지정하며 font-family는 선언된 이 글꼴을 HTML 요소에 적용합니다.

다음은 둘 다 사용하는 예입니다.

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

이 예에서 @font-face는 'CustomFont'를 정의하고 브라우저에 이를 찾을 위치를 알려줍니다. 그런 다음 font-family 속성이 'CustomFont'를 사용할 수 없는 경우 Arial을 대체로 사용하여 본문 요소에 적용합니다.

서체 변경

Browser Support

텍스트 및 서체

CSS 팟캐스트 - 036: 텍스트 및 서체

@font-face 규칙

구문

기술어

설명

글꼴 MIME 유형

@font-face와 font-family의 차이점

서체 변경

기울임꼴 및 기울어진 글꼴 사용

텍스트 굵게 표시

텍스트 크기 변경

줄 간격 변경

문자 간격 변경

단어 사이의 공백 변경

font 약어

텍스트 대소문자 변경

텍스트에 밑줄, 윗줄, 취소선 추가

텍스트에 들여쓰기 추가

오버플로 또는 숨겨진 콘텐츠 처리

공백 제어

단어 줄바꿈 방식 제어

텍스트 정렬 변경

텍스트 방향 변경

텍스트 흐름 변경

텍스트 방향 변경

텍스트에 음영 추가

가변 글꼴

가상 요소

::first-letter 및 ::first-line 가상 요소

::selection 의사 요소

font-variant

이해도 확인

리소스

`@font-face` 규칙

`font` 약어

`::first-letter` 및 `::first-line` 가상 요소

`::selection` 의사 요소