iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

挑戰 CSS 30 天系列 第 12

day12_font

  • 分享至 

  • xImage
  •  

今天介紹有關字體的CSS,包含:

  1. font-family
  2. font-size
  3. font-weight
  4. font-style
  5. font-variant

font-family 屬性是用來設定字體的類別。

font-size 屬性是用來設定字體的大小。大小可以是以數字顯現 (絕對的或是相較的均可),或是以下其中之一的值:"xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。

font-weight 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外,我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。

font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。

font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中,所有的字母都是大寫,可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。

如以下範例:

<!DOCTYPE html>
<html>
<head>
  <title>CSS font</title>
  <meta charset="utf-8">
  <style type="text/css">
	#p1{
		font-family: verdana;
	}
	#p2{
		font-family: arial;
	}
	#p3{
		font-family: impact;
	}
	#p4{
		font-size:9px;
	}
	#p5{
		font-size:150%;
	}
	#p6{
		font-size:0.8cm;
	}
	#p7{
		font-size:small;
	}
	#p8{
		font-size:large;
	}
	#p9{
		font-weight: 100;
	}
	#p10{
		font-weight: 900;
	}
	#p11{
		font-weight: bold;
	}
	#p12{
		font-style: italic;
	}
	span { 
		font-variant:small-caps; 
	}
  </style>
</head>
<body>
    <p id="p1">Font Family Verdana.</p>
	<p id="p2">Font Family Arial.</p>
	<p id="p3">Font Family Impact.</p>
	<p id="p4">字體大小為 9px。</p>
	<p id="p5">字體大小為 150%。</p>
	<p id="p6">字體大小為 0.8 cm。</p>
	<p id="p7">字體大小為 small。</p>
	<p id="p8">字體大小為 large。</p>
	<p id="p9">這是厚度 100。</p>
	<p id="p10">這是厚度 900。</p>
	<p id="p11">這是 bold 厚度。</p>
	<p id="p12">這是斜體字。</p>
	<span>initial in small caps</span> AND LATER IN LARGE CAPS.
</body>
</html>

結果如下圖:
https://ithelp.ithome.com.tw/upload/images/20171215/20106496rKo5szhfsM.jpg


上一篇
day11_text-indent&text-transform&word-spacing
下一篇
day13_template 參考
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言