คู่มือปฏิบัติสำหรับการจัดรูปแบบฟอนต์โดยใช้ CSS

CSS มีบทบาทสำคัญในการจัดรูปแบบฟอนต์ คุณสมบัติฟอนต์ CSS ช่วยให้เราสามารถเปลี่ยนฟอนต์ตระกูล ขนาดฟอนต์ น้ำหนักฟอนต์ การจัดฟอนต์ และคุณสมบัติอื่น ๆ อีกมากมาย คุณสมบัติฟอนต์ CSS เป็นชวเลขสำหรับฟอนต์สไตล์ ฟอนต์ตัวแปร น้ำหนักฟอนต์ ขนาดฟอนต์/บรรทัดความสูง และตระกูลฟอนต์ นอกจากนี้ เราสามารถใช้สไตล์กับข้อความผ่านการตกแต่งข้อความโดยใช้ CSS text-shadow, text-stroke, text-fill-color, color ฯลฯ

สี

คุณสมบัตินี้ใช้เพื่อเปลี่ยนสีของข้อความ

ตระกูลแบบอักษร

คุณสมบัตินี้ใช้เพื่อกำหนดแบบอักษรสำหรับองค์ประกอบ

การจัดรูปแบบแบบอักษร

เพื่อให้การเว้นวรรคอักขระสม่ำเสมอและเพิ่มความสามารถในการอ่าน จะใช้คุณสมบัติการจัดรูปแบบแบบอักษร อย่างไรก็ตาม คุณสมบัตินี้เป็นแบบอักษรเฉพาะ

ขนาดตัวอักษร

คุณสมบัติขนาดแบบอักษรกำหนดขนาดของแบบอักษร

การยืดแบบอักษร

แบบอักษรบางตัวมีใบหน้าเพิ่มเติม เช่น ย่อ ตัวหนา ฯลฯ คุณสมบัติการยืดแบบอักษรใช้เพื่อระบุสิ่งเหล่านี้

รูปแบบตัวอักษร

ในการทำให้ข้อความเป็นตัวเอียงด้วยมุม ให้ใช้คุณสมบัติรูปแบบฟอนต์

รูปแบบตัวอักษร

font-variant ช่วยให้เราระบุว่าองค์ประกอบควรแสดงเป็นตัวพิมพ์เล็กหรือไม่

น้ำหนักแบบอักษร

ตัวหนาของอักขระถูกกำหนดโดยคุณสมบัติ font-weight

ความสูงของเส้น

คุณสมบัตินี้กำหนดระยะห่างระหว่างสองบรรทัด

การตกแต่งข้อความ

หากต้องการขีดเส้นใต้หรือขีดเส้นใต้และจัดรูปแบบ จะใช้การตกแต่งข้อความ

เงาข้อความ

เช่นเดียวกับ box-shadow คุณสมบัตินี้จะเพิ่มเงาให้กับตัวละครตามต้องการ

นอกจากนี้ยังมีคุณสมบัติการจัดวางข้อความ เช่น การเยื้องข้อความ ข้อความล้น พื้นที่สีขาว ตัวแบ่งคำ ทิศทาง ยัติภังค์ การวางแนวข้อความ การตัดคำ เป็นต้น

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติฟอนต์มีดังนี้ -

Selector {
   font-property: /*value*/
}

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติแบบอักษร CSS -

<!DOCTYPE html>
<html>
<head>
<style>
p {
   font: 1.6em arial;
   text-shadow: -3px -12px lightblue;
}
p + p {
   font: italic bold 12px/30px menu;
   text-shadow: unset;
   box-shadow: 0 0 5px 1px black;
}
div {
   width: 30%;
   font-size: 1.4em;
   font-family: cursive;
   background-color: tomato;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

คู่มือปฏิบัติสำหรับการจัดรูปแบบฟอนต์โดยใช้ CSS

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
p {
   font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
   border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

คู่มือปฏิบัติสำหรับการจัดรูปแบบฟอนต์โดยใช้ CSS