การกำหนดลักษณะให้ตัวอักษร ใน HTML เราจะใช้ tag <font face=”ชนิดตัวอักษร” size=”number” color=”สี”>ข้อความ</font> น่าจะพอจำกันได้อยู่ แต่ในเอกสาร HTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำมาใช้งานได้ ให้เราใช้ CSS แทนค่ะ

เรา็สามารถใช้ CSS กำหนดลักษณะให้ตัวอักษรได้ โดยกำหนดรูปแบบ font ผ่าน Property ต่างๆ ให้กับ HTML element เช่น <p>,<div>,<span>,<h1> และอื่นๆ

Property Description Values
font-family ใช้กำหนดชนิด font ที่ต้องการจะให้แสดงผล โดยที่ font นั้นจะต้องมีอยู่ในเครื่องของผู้ใช้งานด้วย เช่น Arial, Helvetica, sans-serif
font-size ใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล /td> xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
18px
70%
150%
font-style ใช้กำหนดรูปแบบของตัวอักษรในลักษณะต่างๆ normal
italic
oblique เอียง 45 องศา
font-variant
ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็กให้เป็นพิมพ์ใหญ่
โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก
normal
Small-Caps
font-weight ใช้กำหนดความหนาของตัวอักษร normal
bold
bolder
lighter
100
200
300
400
500
600
color ใช้กำหนดสีให้ตัวอักษร red
#000099
font เราสามารถกำหนด property ให้กับ font ได้ในคำสั่งประกาศเดียว font-style
font-variant
font-weight
font-size
font-family Example
<p style=”font-family:AngsanaUPC; font-size:16pt; color:green”>
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
</p>
Output
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML

Example
<p style=”font-weight:bold”>Love me Love my dog</p>

<p style=”font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF0033″>Love me Love my dog</p>

<!– เขียนอย่างย่อได้เป็น –>
<p style=”font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033″>Love me Love my dog</p>

Output
Love me Love my dog

Love me Love my dog

Love me Love my dog