상담문의 010-7482-0702

Home > 고객센터 > 자료실

자료실

자료실

폰트스타일

  • 하나솔루션
  • 2017-12-11 10:47:34
  • hit2228

font-weight: normal | bold | bolder | lighter | number | initial | inherit
normal : 보통 굵기입니다. 숫자 400과 같습니다.
bold : 굵은 굵기입니다. 숫자 700과 같습니다.
bolder : 상속된 값보다 굵은 굵기입니다.
lighter : 상속된 값보다 얇은 굵기입니다.
number : 100, 200, 300, 400, 500, 600, 700, 800, 900
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
 

나타낼 수 있는 굵기는 글꼴에 따라 다릅니다.

예를 들어, 본고딕(Noto Sans CJK KR)이 맑은 고딕(Malgun Gothic)보다 표현할 수 있는 굵기가 더 많습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
      }
      th {
        text-align: left;
        color: blue;
      }
      td {
        vertical-align: top;
      }
      .jb-font-1 {
        font-family: "Malgun Gothic";
      }
      .jb-font-2 {
        font-family: "Noto Sans CJK KR";
      }
      .jb-normal {
        font-weight: normal;
      }
      .jb-bold {
        font-weight: bold;
      }
      .jb-100 {
        font-weight: 100;
      }
      .jb-200 {
        font-weight: 200;
      }
      .jb-300 {
        font-weight: 300;
      }
      .jb-400 {
        font-weight: 400;
      }
      .jb-500 {
        font-weight: 500;
      }
      .jb-600 {
        font-weight: 600;
      }
      .jb-700 {
        font-weight: 700;
      }
      .jb-800 {
        font-weight: 800;
      }
      .jb-900 {
        font-weight: 900;
      }
    </style>
  </head>

    <table>
      <tr>
        <th>Malgun Gothic</th>
        <th>Noto Sans CJK KR</th>
      </tr>
      <tr>
        <td class="jb-font-1">
          <p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p>
          <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
          <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
          <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
          <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
          <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
          <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
          <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
          <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
          <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
          <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
        </td>
        <td class="jb-font-2">
          <p class="jb-normal">font-weight normal  - Lorem Ipsum Dolor</p>
          <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p>
          <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p>
          <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p>
          <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p>
          <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p>
          <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p>
          <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p>
          <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p>
          <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p>
          <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p>
        </td>
      </tr>
    </table>
</html>

 

bolder나 lighter은 상속된 값에 따라 다른 굵기로 나옵니다.

다음은 상속된 굵기가 300일 때와 700일 때, bolder와 lighter가 어떻게 나오는지 비교하는 예제입니다.

 

<!doctype html> 
<html lang="ko"> 
<head>
<meta charset="utf-8"> 
<title>CSS</title> 

<style>

body { font-family: "Noto Sans CJK KR"; } 
.jb-300 { font-weight: 300; } 
.jb-700 { font-weight: 700; } 
.jb-bolder { font-weight: bolder; } 
.jb-lighter { font-weight: lighter; }

</style>

</head> 
<body> 
<div class="jb-300">
<p>font weight 300 - Lorem Ipsum Dolor</p> 
<p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p>
<p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p>
</div> <div class="jb-700">
<p>font weight 700 - Lorem Ipsum Dolor</p> 
<p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p> 
<p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p> 
</div> 
</body> 
</html>

게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • s**님이 문의하셨습니다.
    상담신청
  • e**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 개**님이 문의하셨습니다.
    상담신청
  • 쇼**님이 문의하셨습니다.
    상담신청
  • K**님이 문의하셨습니다.
    상담신청
  • 조**님이 문의하셨습니다.
    상담신청
  • (**님이 문의하셨습니다.
    상담신청
  • 주**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • T**님이 문의하셨습니다.
    상담신청
  • 로**님이 문의하셨습니다.
    상담신청
  • d**님이 문의하셨습니다.
    상담신청
  • 정**님이 문의하셨습니다.
    상담신청
  • 아**님이 문의하셨습니다.
    상담신청
  • 행**님이 문의하셨습니다.
    상담신청
  • (**님이 문의하셨습니다.
    상담신청
  • 신**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    상담신청
  • 주**님이 문의하셨습니다.
    상담신청

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 221.139.47.17
2차 ns2.webit.kr 121.125.73.38

서버 호스팅 주소

서울 서초구 서초동 1710-1 SK 브로드밴드 IDC

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기