หมายเหตุ à¹€à¸­à¸à¸ªà¸²à¸£à¸‰à¸šà¸±à¸šà¸™à¸µà¹‰à¹€à¸›à¹‡à¸™à¹€à¸­à¸à¸ªà¸²à¸£à¹à¸›à¸¥à¸ˆà¸²à¸à¸•à¹‰à¸™à¸‰à¸šà¸±à¸šà¸ à¸²à¸©à¸²à¸­à¸±à¸‡à¸à¸¤à¸©à¸­à¸²à¸ˆà¸¡à¸µà¸‚้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document Fonts

เว็บสไตล์ชีท
CSS ทิป & ทริค

(หน้านี้มีการใช้ CSS สไตล์ชีท)

ชนิดฟอนท์

ฟอนท์สไตล์

ชนิดฟอนท์

    ถ้าไม่นับเรื่องสีของหน้าเพจแล้ว ฟอนท์ที่แสดงในหน้าเพจเป็นส่วนสำคัญรองลงมา ในการปรับแต่งหน้าเพจให้สวยงาม ในหน้านี้เราจะไม่กล่าวถึงทริคในการใช้งาน CSS แต่จะแสดงให้เห็นว่าฟอนท์แต่ละแบบ จะแสดงผลอย่างไรบนเบราเซอร์ตามชุดคำสั่ง CSS เครื่องคอมพิวเตอร์แต่ละเครื่่องนั้นมีฟอนท์ไม่เหมือนกันตามแต่ผู้ใช้จะติดตั้งใช้งานใน CSS ท่านสามารถกำหนดชุดฟอนท์ที่จะนำมาใช้งานในหน้าเพจได้ โดยเบราเซอร์จะใช้ฟอนท์เรียงตามลำดับก่อนหลังตามที่กำหนดไว้ใน CSS ขึ้นกับว่าคอมพิวเตอร์นั้นมีฟอนท์ใดอยู่ ในการกำหนดฟอนท์ใช้งาน มีีข้อแนะนำอย่างนึง คือ ในลำดับสุดท้ายของชุดฟอนท์ควรใช้ ฟอนท์ทั่วไป ซึ่งมีอยู่ 5 ฟอนท์ด้วยกัน คือ: serif, sans-serif, monospace, cursive และ fantasy.

   à¸•à¸²à¸£à¸²à¸‡à¸•à¹ˆà¸­à¹„ปนี้รวมฟอนท์แบบต่างๆไว้ (ซึ่งอาจไม่สามารถแสดงได้ในทุกเบราเซอร์) เพื่อให้ท่านได้ใช้ทดสอบว่าแต่ละเบราเซอร์จะแสดงผลอย่างไรเมื่อใช้ฟอนท์แต่ละแบบ:

'sans-serif': ฟอนท์ปกติไม่มีเชิง
Arial, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Lucida, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
'serif': ฟอนท์ปกติมีเชิง
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': ฟอนท์เว้นช่องไฟคงที่
Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog
monospace The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': ฟอนท์เลียนแบบลายมือ
Comic Sans, Comic Sans MS, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog
cursive The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': ฟอนท์สวยงาม , ใช้ในไตเติ้ล และอื่นๆ
Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
fantasy The Quick Brown Fox Jumps Over The Lazy Dog

ฟอนท์สไตล์

ฟอนท์ส่วนมากสามารถใส่สไตล์ได้้มากมาย โดยทั่วไปมี ตัวหนา ตัวเอียง ตัวเอียงหนา บางส่วนมีตัวใหญ่ให้ใช้ด้วย และอีกส่วนน้อยสามารถใช้ค่า ตัวหนาพิเศษหรือบางพิเศษ ตัวยืดหรือตัวหดได้อีกด้วย

ตารางข้างล่างแสดงสไตล์หลายๆแบบ ซึ่งหากท่านมีฟอนท์ไม่ครบ แถวที่เห็นจะไม่แตกต่างกัน

rule serif sans-serif
Styles
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Weights
font-weight: 100 The Quick… The Quick…
font-weight: 200 The Quick… The Quick…
font-weight: 300 The Quick… The Quick…
font-weight: normal The Quick… The Quick…
font-weight: 500 The Quick… The Quick…
font-weight: 600 The Quick… The Quick…
font-weight: bold The Quick… The Quick…
font-weight: 800 The Quick… The Quick…
font-weight: 900 The Quick… The Quick…
Variants
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Stretch
font-stretch: ultra-condensed The Quick… The Quick…
font-stretch: extra-condensed The Quick… The Quick…
font-stretch: condensed The Quick… The Quick…
font-stretch: semi-condensed The Quick… The Quick…
font-stretch: normal The Quick… The Quick…
font-stretch: semi-expanded The Quick… The Quick…
font-stretch: expanded The Quick… The Quick…
font-stretch: extra-expanded The Quick… The Quick…
font-stretch: ultra-expanded The Quick… The Quick…

ใน CSS3, มีสไตล์ให้เลือกมากว่านี้่เช่น : 'font-effect' ใช้เพื่อทำให้ตัวอักษรเป็นตัวสลักหรือตัวนูน

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
เขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT