[HTML5&CSS3] 폰트

1. font-size

 

글자의 크기를 지정합니다. 단위로는 small, large와 같은 키워드나 10px, 20em과 같은 수치 단위를 적용할 수 있습니다.

<style type="text/css">
span
{
   font-size: large;
}
</style>

---

2. font-family

 

글자의 폰트를 지정합니다.

<style type="text/css">
span
{
   font-family: Arial;
}
</style>

만약 폰트의 이름이 'Font Awesome 5 Free'과 같이 여러 단어로 구성된 형태라면 따옴표(')를 사용해서 폰트를 지정해야 합니다.

 

또한 지정한 폰트가 사용자의 컴퓨터에 설치되어 있지 않거나 기타 이유로 해당 폰트가 적용될 수 없는 경우를 대비하여 다음과 같이 여러 개의 폰트를 지정하는 경우도 있습니다.

<style type="text/css">
span
{
   font-family: Arial, 'Font Awesome 5 Free';
}
</style>

위 예제에서는 첫번째 지정된 Arial 폰트가 없으면 두 번째 Font Awesome 5 Free 찾게 됩니다.

---

3. font-style

 

폰트의 기울기를 설정합니다.

<style type="text/css">
    span
    {
       font-family: Arial;
       font-style: italic;
    }
</style>

---

4. font-weight

 

폰트의 두께를 설정합니다.

<style type="text/css">
    span
    {
       font-family: Arial;
       font-weight: bold;
    }
</style>

여기에는 bold나 lighter, thin같은 키워드가 올 수 있고, 숫자로 된 값으로도 지정할 수 있습니다.

---

5. text-align

 

글자를 정렬합니다.

<style type="text/css">
p
{
   font-family: Arial;
   font-weight: bold;
   text-align: right;
}
</style>

다만 p태그와 같이 너비가 존재하는 태그에서만 사용이 가능합니다.

---

6. text-decoration

 

a 링크 전용 속성으로 링크에 밑줄을 표현할지를 지정합니다.

<style type="text/css">
a
{
   text-decoration: none;
}
</style>

---

7. line-height

 

글자를 수직정렬하는데 사용됩니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
span
{
   font-family: Arial;
   font-weight: bold;
   line-height: 75px;
}
</style>