font-family(글꼴)
font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다.
h1{
font-family: "Times New Roman", Times, serif;
}
위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다. 사용자의 컴퓨터에는 폰트가 깔려있지 않을 수 잇다 그래서 폰트를 여러개 적는다
그러면 앞에 적힌 폰트순으로 사용된다
이 때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.
serif (장식이 있는 폰트)
sans-serif
cursive (흘림체)
fantasy
monospace (고정폭)
serif:장식
고정폭은 monospace고 글자의 폭이 일정하다 가변폭은 글자마다 폭이 다르다 가변폭이 자연스럽다
일목요연한 데이터가 필요할 때 고정폭을 쓴다
font-weight:폰트의 두께 폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.
line-height는 자간이란 뜻이다 기본값이 1.2이며 기본적으로 폰트 사이즈의 1.2배만큼 줄간격이 떨어진다
픽셀로 표시할 수도 있다
행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 수치로는 1.2에 해당합니다. 이 쉬치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다.
font
폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
h1{
font: 15px arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<style>
#type1{
font-size:5rem;
font-family:arial, verdana, "Helvetica Neue", serif;
font-weight:bold;
line-height:2;
}
#type2{
font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
}
</style>
</head>
<body>
<p id="type1">
Hello world<br>
Hello world
</p>
<p id="type2">
Hello world<br>
Hello world
</p>
</body>
</html>
댓글