หน้าหลัก
กิจกรรม
รายงาน และเอกสารเผยแพร่
ดัชนี เว็บไซท์
เอกสารแปล
โปรแกรม
ค้นหา
เนื้อหาเกี่ยวข้อง:
สไตล์
CSS
ทิป & ทริค
Bert Bosเขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT
|
Disclaimer: This page is a Thai translation from the W3C documents. The translation was written by Aliasa Brookshield, and may contain translation errors. For the original english version, please see Original Document คำปฏิเสธความรับผิดชอบ : บทความในหน้านี้เป็นบทความแปลซึ่งอาจมีข้อผิดพลาดจากการแปลเกิดขึ้น เอกสารต้นฉบับ เป็นของ W3C ซึ่งอาจมีการเปลี่ยนแปลงปรับปรุงเนื้อหา ท่านควรดูต้นฉบับประกอบการอ่านเพื่อความถูกต้อง |
(หน้านี้มีการใช้ 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
ทิป & ทริค
Bert Bos