CSS3

プロパティ

font-weight

→●、mdn

フォントのウェイト（太さ）。

font-weight プロパティは、フォント内の一連のグリフのウェイト、すなわち それらの 黒っぽさ／描線の太さ の程度を指定する。

100、200、300、400、500、600、700、800、900

これらの値の各数が指示するウェイトは、大きいもの程、少なくともより小さいもの以上の濃さを表す。これらは概ね、次に挙げる、よく利用されるウェイト名に対応する：

• 100 ─ Thin【最も細い／薄い／軽い】
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:100; 
  ">ABCabcijk012</SPAN>
  
  
  
• 200 ─ Extra Light（Ultra Light）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:200; 
  ">ABCabcijk012</SPAN>
  
  
  
• 300 ─ Light（細字）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:300; 
  ">ABCabcijk012</SPAN>
  
  
  
• 400 ─ Normal（通常）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:400; 
  ">ABCabcijk012</SPAN>
  
  
  
• 500 ─ Medium
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:500; 
  ">ABCabcijk012</SPAN>
  
  
  
• 600 ─ Semi Bold（Demi Bold）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:600; 
  ">ABCabcijk012</SPAN>
  
  
  
• 700 ─ Bold（太字）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:700; 
  ">ABCabcijk012</SPAN>
  
  
  
• 800 ─ Extra Bold（Ultra Bold）
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:800; 
  ">ABCabcijk012</SPAN>
  
  
  
• 900 ─ Black（Heavy）【最も太い／濃い／重い】
  

  <SPAN style="font-family:Calibri; font-size:50px;
   font-weight:900; 
  ">ABCabcijk012</SPAN>
  
  
  

normal

400 と同じ。

<SPAN style="font-family:Calibri; font-size:50px;
 font-weight:normal; 
">ABCabcijk012</SPAN>

bold

700 と同じ。

<SPAN style="font-family:Calibri; font-size:50px;
 font-weight:bold; 
">ABCabcijk012</SPAN>

bolder

継承値より bold なウェイトを指定する。

<SPAN style="font-family:Calibri; font-size:50px;
 font-weight:100;
">ABC
 <SPAN style="font-weight:bolder;">ABC
  <SPAN style="font-weight:bolder;">ABC
  </SPAN>
 </SPAN>
</SPAN>

lighter

継承値より light なウェイトを指定する。

<SPAN style="font-family:Calibri; font-size:50px;
 font-weight:700;
">ABC
 <SPAN style="font-weight:lighter;">ABC
  <SPAN style="font-weight:lighter;">ABC
  </SPAN>
 </SPAN>
</SPAN>

テスト