การกำหนดลักษณะให้ตัวอักษร ใน 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
|
ใช้กำหนดขนาดของตัวอักษร
ที่จะให้แสดงผล
|
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 |
ตัวอย่าง
<p
style="font-family:AngsanaUPC; font-size:16pt; color:green">
ในแต่ละวันร่างกายของมนุษย์เราต้องการพลังงานจากอาหารเพื่อนำไปใช้ในกิจกรรม
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล
</p>
ในแต่ละวันร่างกายของมนุษย์เราต้องการพลังงานจากอาหารเพื่อนำไปใช้ในกิจกรรม
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล
</p>
ผลลัพธ์
ในแต่ละวันร่างกายของมนุษย์เราต้องการพลังงานจากอาหารเพื่อนำไปใช้ในกิจกรรม
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล
ตัวอย่าง
<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>
<p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
ผลลัพธ์
Love me Love my dog
Love me Love my dog
Love me Love my dog
