CSS - แบบอักษร
บทนี้จะสอนวิธีตั้งค่าแบบอักษรของเนื้อหาที่มีอยู่ในองค์ประกอบ HTML คุณสามารถตั้งค่าคุณสมบัติแบบอักษรขององค์ประกอบต่อไปนี้ -
font-family คุณสมบัติถูกใช้เพื่อเปลี่ยนใบหน้าของแบบอักษร
font-style คุณสมบัติถูกใช้เพื่อสร้างแบบอักษรตัวเอียงหรือเฉียง
font-variant คุณสมบัติถูกใช้เพื่อสร้างเอฟเฟกต์ขนาดเล็ก
font-weight คุณสมบัติถูกใช้เพื่อเพิ่มหรือลดลักษณะที่ตัวอักษรปรากฏเป็นตัวหนาหรือสว่าง
font-size คุณสมบัติถูกใช้เพื่อเพิ่มหรือลดขนาดของฟอนต์
font คุณสมบัติถูกใช้เป็นชวเลขเพื่อระบุคุณสมบัติแบบอักษรอื่น ๆ
ตั้งค่าตระกูลฟอนต์
ต่อไปนี้เป็นตัวอย่างซึ่งแสดงให้เห็นถึงวิธีการตั้งค่าแบบอักษรขององค์ประกอบ ค่าที่เป็นไปได้อาจเป็นชื่อตระกูลแบบอักษรใดก็ได้
<html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่ารูปแบบตัวอักษร
ต่อไปนี้เป็นตัวอย่างซึ่งสาธิตวิธีการตั้งค่ารูปแบบตัวอักษรขององค์ประกอบ ค่าที่เป็นไปได้ตามปกติและเอียงเอียง
<html>
<head>
</head>
<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่า Font Variant
ตัวอย่างต่อไปนี้สาธิตวิธีตั้งค่าแบบอักษรขององค์ประกอบ ค่าที่เป็นไปได้ตามปกติและขนาดเล็กหมวก
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่าน้ำหนักตัวอักษร
ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าน้ำหนักแบบอักษรขององค์ประกอบ คุณสมบัติ font-weight มีฟังก์ชันในการระบุว่าฟอนต์เป็นตัวหนาเพียงใด ค่าที่เป็นไปได้อาจจะเป็นปกติตัวหนาโดดเด่นยิ่งขึ้น, น้ำหนักเบา, 100, 200, 300, 400, 500, 600, 700, 800, 900
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่าขนาดตัวอักษร
ตัวอย่างต่อไปนี้สาธิตวิธีกำหนดขนาดฟอนต์ขององค์ประกอบ คุณสมบัติขนาดฟอนต์ถูกใช้เพื่อควบคุมขนาดของฟอนต์ ค่าที่เป็นไปได้อาจจะxx ขนาดเล็ก x ขนาดเล็กขนาดเล็กขนาดกลางขนาดใหญ่, X-Large, xx ขนาดใหญ่ขนาดเล็กขนาดใหญ่ขนาดพิกเซลหรือใน%
<html>
<head>
</head>
<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่าปรับขนาดตัวอักษร
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการตั้งค่าการปรับขนาดแบบอักษรขององค์ประกอบ คุณสมบัตินี้ช่วยให้คุณสามารถปรับความสูง x เพื่อทำให้แบบอักษรอ่านง่ายขึ้น ค่าที่เป็นไปได้อาจเป็นตัวเลขใดก็ได้
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตั้งค่าการยืดแบบอักษร
ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าการยืดแบบอักษรขององค์ประกอบ คุณสมบัตินี้อาศัยคอมพิวเตอร์ของผู้ใช้เพื่อให้มีการใช้แบบอักษรขยายหรือย่อ
ค่าที่เป็นไปได้อาจจะเป็นปกติกว้างแคบพิเศษข้นพิเศษข้นข้นกึ่งข้นกึ่งขยายขยายพิเศษขยายพิเศษขยาย
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ทรัพย์สินชวเลข
คุณสามารถใช้คุณสมบัติฟอนต์เพื่อตั้งค่าคุณสมบัติฟอนต์ทั้งหมดพร้อมกัน ตัวอย่างเช่น -
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -