CSS

font

font-family

font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다. 

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

위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다. 

이 때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.  

 출처 : http://matchwebdesign.com/Daily-Thoughts/why-typographically-thinking-ruins-your-site.html

font-weight

폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.  

h1{
    font-weight: bold;
}

line-height

행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 수치로는 1.2에 해당합니다. 이 쉬치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다. 

p{
    line-height: 1.3;
}

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;
}

예제 - font-famliy.html

예제의 이름은 font-family.html이지만 본 수업의 모든 속성에 대해서 다루고 있는 예제입니다. 오해마세요. ^^

<!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>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 숨니
    이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
    -> 'font-size와' 중복되었네요~
  2. 신병국
    font-family!
  3. 김종엽
    2016.08.25 완료!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기