Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #113 : [lesson] CSS > Styling Font ... เส้นสายลายอักษร

CSS สามารถกำหนด แบบอักษร ความหนา ขนาด และรูปแบบของฟอนต์ได้

Font Family ตระกูลฟอนต์ (หรือแบบอักษรนั่นแหละ)

ก็คือพวก Serif, Sans-serif, และ Monospace ที่เราใช้กันนั่นเอง (ยกตัวอย่างเช่น Angsana และ Cordia ในหน้านิยาย)

<style type="text/css">
p.ex1{font-family:"Angsana New";}
</style>

ย่อหน้านี้ใช้ Angsana New

Font Style รูปแบบอักษร

ที่สำคัญก็มี ตัวธรรมดา กับ ตัวเอียง

<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
</style>

ตัวเอียงคงไม่ต้องยกตัวอย่างอะไรมากหรอกเนาะ  ;)

Font Size ขนาดอักษร

กำหนดค่าได้สองแบบคืนเป็น px กับ em
px ก็จะ fix ขนาดตายตัว ส่วน em จะเป็นขนาดที่เทียบกับอย่างอื่น
คิดง่ายๆ ว่า px เป็นขนาดแบบสัมบูรณ์ ส่วน em เป็นขนาดแบบสัมพัทธ์ (หรือว่าจะเป็นการทำให้เข้าใจยากขึ้นหว่า?)

พวกเราไม่ได้เน้น web design อะไรมาก ก็ใช้แต่ px ตามที่คุ้นเคยไปก่อนล่ะกัน ที่เอ่ยๆ ไปนั่นก็บอกไว้เป็นความรู้เสริมสักหน่อย เดี๋ยวหาว่า รู้แล้วไม่ยอมสอน หรือคนสอนก็ไม่รู้

<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>


รวม properties ของ font ในบรรทัดเดียว

ก็รวมได้เหมือน background แหละนะ คิดว่าไม่จำเป็นต้องมีลำดับว่าคุณสมบัติไหนต้องมาก่อนมาหลังด้วย (คิดว่าเฉยๆ ยังไม่ได้ลองทดสอบ หรือหาข้อมูลยืนยัน) ดังนั้นมาดูตัวอย่างกันเลยดีกว่า...

<style type="text/css">
p.ex1 {
font:15px arial,sans-serif;
}
p.ex2 {
font:italic bold 12px/30px Georgia,serif;
}
</style>



Properties ที่น่าสนใจก็หมดเท่านี้ ที่เหลือก็คืออ้างอิง กับตารางสรุปล่ะ...

อ้างอิง...
http://www.w3schools.com/css/css_font.asp

Property	Description	Values	CSS
font	Sets all the font properties in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit	1
font-family	Specifies the font family for text	family-name generic-family inherit	1
font-size	Specifies the font size of text	xx-small x-small small medium large x-large xx-large smaller larger length % inherit	1
font-style	Specifies the font style for text	normal italic oblique inherit	1
font-variant	Specifies whether or not a text should be displayed in a small-caps font	normal small-caps inherit	1
font-weight	Specifies the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit	1