CSS 글꼴

CSS 자산 속성은 글자 시리즈, 크기, 강조, 스타일(예: 기울임) 및 변형(예: 소형 대문자)을 정의합니다.

CSS 글꼴 시리즈

CSS에서는 두 가지 다른 유형의 글자체 시리즈 이름이 있습니다:

  • 일반적인 글자체 시리즈 - 유사한 외관을 가진 글자체 시스템 조합(예: "Serif" 또는 "Monospace")
  • 특정 글자체 시리즈 - 구체적인 글자체 시리즈(예: "Times" 또는 "Courier")

특정한 글자체 시리즈 외에도, CSS는 5가지 유형의 일반적인 글자체 시리즈를 정의합니다:

  • Serif 글자체
  • Sans-serif 글자체
  • Monospace 글자체
  • Cursive 글자체
  • Fantasy 글자체

글자체 시리즈에 대한 더 많은 정보를 알고 싶다면, 다음을 읽어보세요 CSS 글꼴 시리즈.

지정된 글자체 시리즈

사용 font-family 속성 문자의 글자체 시리즈 정의

일반적인 글자체 시리즈 사용

문서가 sans-serif 글자체를 사용하려고 하지만 특정 글자체를 관심지 않는 경우, 다음과 같은 선언이 적합합니다:

body {font-family: sans-serif;}

직접 테스트해 보세요

이렇게 하면 사용자 대리자는 sans-serif 글자체 시리즈에서 글자체를 선택하고(예: Helvetica) 이를 body 요소에 적용합니다. 상속이 있기 때문에, 이 글자체 선택은 body 요소에 포함된 모든 요소에 적용되며, 더 구체적인 선택자가 덮어쓰지 않는 한.

지정된 글자체 시리즈

일반적인 글자체 시리즈를 사용하는 것 외에도, font-family 속성을 통해 더 구체적인 글자체를 설정할 수 있습니다.

아래의 예제는 모든 h1 요소에 Georgia 글자체를 설정합니다:

h1 {font-family: Georgia;}

직접 테스트해 보세요

이 규칙은 또 다른 문제를 동시에 발생시킬 수 있습니다. 사용자 대리자에 Georgia 글자체가 설치되어 있지 않으면, h1 요소를 표시하기 위해 사용자 대리자의 기본 글자체를 사용할 수밖에 없습니다.

특정 글자체 이름과 일반적인 글자체 시리즈를 결합하여 이 문제를 해결할 수 있습니다:

h1 {font-family: Georgia, serif;}

직접 테스트해 보세요

읽는 사람이 Georgia를 설치하지 않았지만 Times 글자체(serif 글자체 시리즈 중 하나)를 설치했을 때, 사용자 대리자는 h1 요소에 Times를 사용할 수 있습니다.尽管 Times와 Georgia는 완전히 일치하지 않지만, 적어도 충분히 가깝습니다.

따라서 모든 font-family 규칙에 일반적인 글자체 시리즈를 제공하는 것을 추천합니다. 이렇게 하면 사용자 대리자가 규칙과 일치하는 특정 글자체를 제공할 수 없을 때 후보 글자체를 선택할 수 있는 후속 경로를 제공합니다.

만약 글자체에 매우 익숙하다면, 주어진 요소에 유사한 글자체 시리즈를 지정할 수도 있습니다. 이를 위해 이 글자체를 우선 순서대로 정렬하고, 콤마로 연결해야 합니다:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

직접 테스트해 보세요

이 목록에 따라 사용자代理는 나열된 순서로 이들 글꼴을 찾습니다. 나열된 모든 글꼴이 사용할 수 없다면, 단순히 사용할 수 있는 serif 글꼴을 선택합니다.

quotes 사용

아마도 알고 계신 것처럼, 위의 예제에서는 단quotes를 사용했습니다. 글꼴 이름에 공백이 하나 이상이 있을 때(예: New York) 또는 글꼴 이름에 #나 $와 같은 기호가 포함되어 있을 때만 font-family 선언에 quotes를 추가해야 합니다.

단quotes나 양quotes 모두가 수용됩니다. 하지만, font-family 속성을 HTML의 style 속성에 두면, 속성 자체가 사용하지 않은 quotes를 사용해야 합니다:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,",
 'New York', serif;">...</p>

직접 테스트해 보세요

글꼴 스타일

font-style 속성가장 많이 사용되는 것은 slant 텍스트를 정의하는 데 사용됩니다.

이 속성은 세 가지 값이 있습니다:

  • normal - 텍스트 정상 표시
  • italic - 텍스트 slant 표시
  • slant - 텍스트 기울임 표시

예제

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

직접 테스트해 보세요

italic과 slant의 차이

font-style은 매우 간단합니다: normal 텍스트, italic 텍스트, oblique 텍스트 중에서 선택합니다. 유일하게 복잡한 것은 italic 텍스트와 oblique 텍스트의 차이를 명확히 하는 것입니다.

slant는 간단한 글꼴 스타일로, 각 글자의 구조에 약간의 변경을 통해 변화된 외관을 반영합니다. 이와는 달리, slant 텍스트는 정상적인 세로 텍스트의 기울어진 버전입니다.

일반적으로, italic과 oblique 텍스트는 웹 브라우저에서 완전히 같게 보입니다.

글꼴 변형

font-variant 속성소형 대문자를 설정할 수 있습니다.

소형 대문자는 일반 대문자도 아니고 소문자도 아닌, 다른 크기의 대문자를 사용하는 글자입니다.

예제

p {font-variant:small-caps;}

직접 테스트해 보세요

폰트 두께

font-weight 속성텍스트의 두께를 설정합니다.

bold 키워드를 사용하여 텍스트를 Kursiv으로 설정할 수 있습니다.

100 ~ 900 키워드는 폰트에 9단계의 두께를 지정합니다. 폰트에 이 두께 레벨이 내장되어 있다면, 이 숫자는 предопределенным уровням соответствуют: 100 - наиболее тонкая форма шрифта, 900 - наиболее толстая форма шрифта. Число 400 эквивалентно normal, а 700 - bold.

요소의 두껍게 설정을 bolder로 설정하면 브라우저는 상속된 값보다 더 두꺼운 폰트 두께를 설정합니다. 반대로, lighter 키워드는 두께를 줄이는 것이 아니라 늘리는 것입니다.

예제

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

직접 테스트해 보세요

폰트 크기

font-size 속성텍스트 크기를 설정합니다.

웹 디자인 분야에서 텍스트 크기를 관리할 수 있는 능력은 중요하지만, 텍스트 크기를 조정하여 구절이 제목처럼 보이거나 제목이 구절처럼 보이게 하지 않아야 합니다.

항상 올바른 HTML 제목을 사용하십시오. 예를 들어, <h1> - <h6>을 사용하여 제목을 표시하고, <p>를 사용하여 구절을 표시하십시오.

font-size 값은 절대적이거나 상대적인 값일 수 있습니다.

절대 값:

  • 텍스트를 지정된 크기로 설정합니다
  • 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록 허용하지 않습니다(사용성에 부정적입니다)
  • 물리적인 출력 크기를 결정하는 데는 절대 크기가 매우 유용합니다

상대 크기:

  • 상대적인 요소에 비례하여 크기를 설정합니다
  • 사용자가 브라우저에서 텍스트 크기를 변경할 수 있도록 허용합니다

주의:폰트 크기를 지정하지 않았을 경우 일반 텍스트(예: 구절)의 기본 크기는 16 픽셀(16px=1em)입니다.

폰트 크기를 설정하는 데 픽셀을 사용합니다

텍스트 크기를 픽셀로 설정하면 텍스트 크기를 완전히 제어할 수 있습니다:

예제

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

직접 테스트해 보세요

파이어폭스, 크롬, 그리고 사파리에서는 위의 예제 텍스트 크기를 다시 조정할 수 있지만, 인터넷 익스플로어에서는 안 됩니다.

텍스트 크기를 조정할 수 있는 브라우저의 확대 도구를 사용할 수 있지만, 이는 실제로는 전체 페이지를 조정하는 것이며 텍스트만을 제한하지 않습니다.

em을 사용하여 폰트 크기를 설정합니다

인터넷 익스플로어에서 텍스트 크기를 조정할 수 없는 문제를 피하기 위해 많은 개발자가 pixels 대신 em 단위를 사용합니다.

W3C는 EM 단위를 추천합니다.

1em은 현재의 글꼴 크기와 일치합니다. 만약元素的 font-size가 16 픽셀인 경우, 이 요소에 대한 1em은 16 픽셀입니다. 글꼴 크기를 설정할 때 EM 값은 부모 요소의 글꼴 크기에 비례합니다.

브라우저에서 기본적인 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본적인 크기는 16 픽셀입니다.

다음 공식을 사용하여 픽셀을 EM으로 변환할 수 있습니다:pixels/16=em

（주의: 16은 부모 요소의 기본 글꼴 크기입니다. 부모 요소의 font-size가 20px인 경우, 이 공식을 변경해야 합니다:pixels/20=em）

예제

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

직접 테스트해 보세요

위의 예제에서 EM 단위의 텍스트 크기는 이전 예제에서 픽셀로 계산된 텍스트 크기와 동일합니다. 하지만 EM 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

하지만, IE에서는 여전히 문제가 있습니다. 텍스트 크기를 재설정할 때 정상적인 크기보다 더 크거나 더 작게 됩니다.

백분율과 EM을 결합 사용

모든 브라우저에서 동일하게 작동하는 방법은 body 요소(부모 요소)에 비율로 기본적인 font-size 값을 설정하는 것입니다:

예제

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

직접 테스트해 보세요

우리의 코드는 모든 브라우저에서 동일한 텍스트 크기를 표시하고, 모든 브라우저에서 텍스트 크기를 확대할 수 있도록 합니다.

CSS 글꼴 예제:

텍스트 글꼴 설정
텍스트 글꼴을 설정하는 방법을 보여줍니다.
글꼴 크기 설정
글꼴 크기를 설정하는 방법을 보여줍니다.
글꼴 스타일 설정
글꼴 스타일을 설정하는 방법을 보여줍니다.
글꼴 변체 설정
글꼴 변체를 설정하는 방법을 보여줍니다.
글꼴 두께 설정
글꼴 두께를 설정하는 방법을 보여줍니다.
모든 글꼴 속성 하나의 선언 내에 설정됩니다
단축 속성을 사용하여 글꼴 속성을 하나의 선언에 설정하는 방법을 보여줍니다.

CSS 글꼴 속성

속성 설명
font 단축 속성. 모든 글꼴 속성을 하나의 선언에 설정하는 데 사용됩니다.
font-family 글꼴 시리즈를 설정합니다.
font-size 글꼴 크기를 설정합니다.
font-size-adjust 기본 글꼴이 사용할 수 없을 때, 대체 글꼴을 지능적으로 조정합니다。（CSS2.1에서는 이 속성이 제거되었습니다。）
font-stretch 글꼴을 수평으로 확장합니다。（CSS2.1에서는 이 속성이 제거되었습니다。）
font-style 글꼴 스타일을 설정합니다.
font-variant 소형 대문자 또는 일반 글자로 텍스트를 표시합니다.
font-weight 글꼴 두께를 설정하세요.