การเปลี่ยนแปลงของขนาดตัวอักษร
เป็นเรื่องที่ต้องจัดการ
และวางแผนให้ดีตั้งแต่ขั้นตอนแรกองการออกแบบเวบไซต์
ทั้งนี้การใช้ขนาดตัวอักษรที่เหมาะสมจะทำให้การจัดรูปแบบเนื้อหาดูน่าสนใจ
1) การใช้หน่วย
Pixel
Pixel
เป็นหน่วยที่เล็กที่สุดของภาพดิจิตอล โดย 1 Pixel มีค่าเท่ากับ 1 จุด การใช้หน่วย Pixel เป็นกำหนดขนาดตัวอักษรแบบตายตัว คือถ้ากำหนดตัวอักษร 20 Pixel เมื่อแสดงผลหน้าจอ
ไม่ว่าหน้าจอจะละเอียดขนาดไหน ตัวอักษรก็จะมีขนาด 20 Pixel เท่านั้น
การปรับเปลี่ยนตัวอักษรทำได้โดยกำหนดค่าใน
Property “font-size” มีรูปแบบดังนี้ => font-size: valuepx; โดย
font-size หมายถึง Property หรือคำสั่งที่ใช้กำหนดขนาดตัวอักษร
value หมายถึง ค่าขนาดของตัวอักษร
px หมายถึง
หน่วยของขนาดตัวอักษร
ตย. span#pixel {
font-size: 12px; /* กำหนดขนาดตัวอักษรหน่วยเป็น pixel */
}
2) การใช้หน่วย
Keyword. Percentage และ Ems
a. Keyword
ใน CSS จะมี Keyword อยู่ 7 ค่า คือ xx-small, x-small, small, medium, large, x-large และ xx-large
ตารางเปรียบเทียบขนาดตัวอักษรที่ใช้
Keyword กับหน่วยเป็น Pixel
Keyword
|
Pixel
|
xx-small
|
9px
|
x-small
|
10px
|
small
|
13px
|
medium
|
16px
|
large
|
18px
|
x-large
|
24px
|
xx-large
|
32px
|
การกำหนดขนาดข้อความใน Property “font-size” โดยกำหนดหน่วยเป็น Keyword
span#keyword {
font-size: large; /*
กำหนดขนาดัวอักษรหน่วยเป็น Keyword */
}
b. Percentage
100% มีค่าเท่ากับ
16px โดยทั่วไปจะนำไปใช้ร่วมกับหน่วยอื่น ๆ
เพื่อกำหนดเป็นค่าเริ่มต้น
การกำหนดขนาดตัวอักษรใน Property “font-size” เป็น Percentage
span#percent {
font-size: 20% /* กำหนดขนาดตัวอักษรหน่วยเป็น Percentage */
}
c. Ems
เป็นหน่วยที่กำหนดขึ้นเพื่อแก้ไขข้อจำกัดของหน่วย
Pixel
โดย 1em มีค่าเท่ากับ 100% หรือ
16 Pixel
การกำหนดขนาดตัวอักษรใน
Property “font-size” เป็น Ems
span#em {
font-size: 2 em; /* กำหนดขนาดตัวอักษรหน่วยเป็น Ems */
}
ตย. การกำหนดขนาดตัวอักษรในรูปแบบต่าง ๆ
สร้างไฟล์ CSS ชื่อ “FontSize.css” เพื่อกำหนดขนาดตัวอักษรในรูปแบบต่างๆ
span#pixel {
font-size: 12px;
}
span#keyword {
font-size: large;
}
span#em {
font-size: 2em;
}
สร้างไฟล์ HTML ชื่อ “FontSize.html”
<body>
<p><span
id=”pixel”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Pixel</span></p>
<p><span
id=”keyword”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย
Keyword</span></p>
<p><span
id=”percent”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย Percentage</span></p>
<p><span id=”em”>ข้อความนี้ปรับขนาดข้อความโดยใช้หน่วย
Em</span></p>
</body>
เพิ่มคำสั่งเพื่อเรียกใช้ CSS จากไฟล์ “FontSize.css” ในแท็ก <head>
ของไฟล์ “FontSize.html” ดังนี้
<link rel=”stylesheet” type=”text/css” href=”FontSize.css”></link>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น