CSS Font Shorthand

description : CSS Font Property
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-08

Source of the article

CSS Font Property

CSS Font Property

코드를 줄이기 위해, 하나의 속성에서 모든 개별 폰트 속성을 지정하는 것도 가능합니다.

font속성은 하기의 속성들에 대한 shorthand 속성입니다.

font-style
font-variant
font-weight
font-size/line-height
font-family

Note:
font-size와 font-family값이 필요합니다. 다른 값 중 하나가 없는 경우, 기본 값이 사용됩니다.

예제

하나의 선언에서 여러 개의 폰트 속성들을 설정하기 위해 font속성을 사용합니다.

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}
 
p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
 
<h1>The font Property</h1>
 
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
 
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
 
</body>
</html>

All CSS Font Properties

Property	Description
font	하나의 선언에서 모든 폰트 속성들을 설정합니다.
font-family	텍스트를 위한 폰트 집합을 지정합니다.
font-size	텍스트의 폰트 크기를 지정합니다.
font-style	텍스트의 폰트 스타일을 지정합니다
font-variant	텍스트가 small-caps 폰트로 표시 여부를 지정합니다.
font-weight	한 폰트의 굵기를 지정합니다.

오션,, CSS, font, property

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Font Shorthand

Source of the article

CSS Font Property

예제

All CSS Font Properties

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Font Shorthand

Source of the article

CSS Font Property

예제

All CSS Font Properties

문서 도구