CSS Fonts

CSS 글꼴 속성은

Serif와 Sans-serif 글꼴의 차이점

 

글꼴 모음, 굵게, 크기 및 텍스트 스타일을 정의합니다.

 

Font Family

텍스트의 글꼴 군은 font-family속성으로 설정됩니다 .

이 font-family속성에는 "대체"시스템으로 여러 글꼴 이름이 있어야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴 등을 시도합니다.

다른 글꼴을 사용할 수없는 경우 브라우저가 일반 패밀리에서 유사한 글꼴을 선택할 수 있도록 원하는 글꼴로 시작하고 일반 패밀리로 끝납니다.

참고 : 글꼴 모음 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다.

쉼표로 구분 된 목록에 둘 이상의 글꼴 패밀리가 지정되었습니다.

p {
  font-family: "Times New Roman", Times, serif;
}

 

Font Style

이 font-style속성은 주로 기울임 꼴 텍스트를 지정하는 데 사용됩니다.

이 속성에는 세 가지 값이 있습니다.

• normal-텍스트가 정상적으로 표시됩니다
• 이탤릭체-텍스트가 이탤릭체로 표시됩니다
• oblique-텍스트가 "기울다"(사위는 기울임 꼴과 매우 유사하지만 덜 지원됨)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

 

Font Size

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

웹 디자인에서 텍스트 크기를 관리 할 수 ​​있어야합니다. 그러나 단락을 제목처럼 보이거나 제목을 단락처럼 보이도록 글꼴 크기 조정을 사용해서는 안됩니다.

제목에는 <h1>-<h6>, 단락에는 <p>와 같은 올바른 HTML 태그를 항상 사용하십시오.

글꼴 크기 값은 절대 또는 상대 크기 일 수 있습니다.

절대 크기 :

• 텍스트를 지정된 크기로 설정합니다
• 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없음 (접근성 이유로 인해 나쁨)
• 절대 크기는 출력의 실제 크기를 알 때 유용합니다

상대 크기 :

• 주변 요소를 기준으로 크기를 설정합니다
• 사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다

참고 : 글꼴 크기를 지정하지 않으면 단락과 같은 일반 텍스트의 기본 크기는 16px (16px = 1em)입니다.

 

Set Font Size With Pixels

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

 

Set Font Size With Em

사용자가 브라우저 메뉴에서 텍스트의 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신 em을 사용합니다.

em 크기 단위는 W3C에서 권장합니다.

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 1em의 기본 크기는 16px입니다.

아래 사이트를 사용하여 픽셀에서 em까지 크기를 계산할 수 있습니다. pixels / 16 = em

http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.

 

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

위의 예에서 em의 텍스트 크기는 이전 예와 동일합니다 (픽셀 단위). 그러나 em 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

불행히도 이전 버전의 IE에는 여전히 문제가 있습니다. 텍스트는 크게 만들 때보 다 커지고 작아 질 때보 다 작아집니다.

 

Font Weight

font-weight속성은 글꼴의 무게를 지정합니다.

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

 

Responsive Font Size

텍스트 크기는 vw"뷰포트 너비"를 의미 하는 단위 로 설정할 수 있습니다 .

이렇게하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

Responsive Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

https://www.w3schools.com/css/css_font.asp

CSS Fonts