กำหนดค่า font family รูปแบบของตัวอักษร [font family: …………… ;] และถ้า font family มีมากกว่าหนึ่งคำ ให้ใช้เครื่องหมาย quotation marks (,)
<!doctype html><html lang="en">
<head>
<style>
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
}
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
}
</style>
</head><body>
<h1>CSS Font Families</h1>
<div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;Font Style ลักษณะตัวอักษร
กำหนด Font Style เป็นแบบธรรมดา หนา เอียง ตามคำสั่งนี้ [font-style: ………. ;]
normal - ธรรมดาitalic - ตัวเอียง
oblique - ตัวเอียง
มาลองทำกันเลย
<!doctype html><html lang="en">
<head>
<style>
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
font-style: italic; //ตัวอักษรเอียง
}
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
}
</style>
</head><body>
<h1>CSS Font Families</h1>
<div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
กำหนดค่าขนาดของตัวอักษร [font-size: ……….;]
Set Font Size With Pixels กำหนดขนาด Font ด้วย Pixels
<!doctype html><html lang="en">
<head>
<style>
h1.text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
font-style: italic; //ตัวอักษรเอียง
font-size: 50px; //ขนาดของตัวอักษร
}
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
}
</style>
</head><body>
<h1 class="text">CSS Font Families</h1>
<div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
font-size: 50px; //ขนาดของตัวอักษร
Set Font Size With Em กำหนดขนาด Font ด้วย Em
<!doctype html><html lang="en">
<head>
<style>
h1.text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
font-style: italic; //ตัวอักษรเอียง
font-size: 5em; //ขนาดของตัวอักษร ด้วยem /*80px/16=5em */ }
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
}
</style>
</head><body>
<h1 class="text">CSS Font Families</h1>
<div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
font-size: 5em; //ขนาดของตัวอักษร ด้วยem /*80px/16=5em */
Use a Combination of Percent and Em ใช้ % และ em ร่วมกัน
<!doctype html><html lang="en">
<head>
<style>
body {
font-size: 100%; //ขนาดตัวอักษร ด้วย percent
}
h1.text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
font-style: italic; //ตัวอักษรเอียง
font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */}
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
font-size: 1.5em; //ขนาดตัวอักษร ด้วยem /*24px/16=1.5em */
}
</style>
</head><body>
<h1 class="text">CSS Font Families</h1>
<div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
font-size: 100%; //ขนาดตัวอักษร ด้วย percent ; font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */ ; font-size: 1.5em; //ขนาดตัวอักษร ด้วยem/*24px/16=1.5em */Font Weight น้ำหนักตัวอักษร
การกำหนดค่าความหนา ความบางของตัวอักษร [font-weight: ……..;]
Responsive Font Size กำหนดค่าตัวอักษรด้วย vm (size. 1vw = 1%)
<!doctype html><html lang="en">
<head>
<style>
body {
font-size: 100%; //ขนาดตัวอักษร ด้วย percent
}
h1.text {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
font-style: italic; //ตัวอักษรเอียง
font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */
font-weight: bold; //อักษรตัวหนา
}
div {
color: rgb(24, 180, 58);
text-transform: capitalize;
line-height: 1.5;
word-spacing: 3px;
font-size: 1.5em; //ขนาดตัวอักษร ด้วยem /*24px/16=1.5em */
}
</style>
</head><body>
<h1 class="text">CSS Font Families</h1>
<div style="font-size: 2vw;"> //ขนาดตัวอักษร 2 vm
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
</div>
</body>
</html>
font-weight: bold; //อักษรตัวหนาFont Variant ตัวแรกจะมีขนาดใหญ่
จะมีอยู่ 2 แบบ ให้เรากำหนด ดังนี้ [font-variant: ………..;]
1.normal คือไม่มีอะไรเปลี่ยนแปลง2.small-caps คือจะแปลงตัวอักษรให้เป็นตัวอักษรตัวใหญ่ทั้งหมด ตัวอักษรตัวแรกของคำจะมีความแตกต่างจากพวก คือจะมีขนาดใหญ่ขึ้นไปอีก
มาลองเขียนกัน!!!
generic family : กลุ่มของ font families คล้ายกับ ("Serif" หรือ "Monospace") font family : ระบุ font family ( "Times New Roman" หรือ"Arial")0font-variant: small-caps; //ตัวแรกจะมีขนาดใหญ่
ส่งท้ายนี้
Font คือการเอาทุกอย่างมาเขียนรวม เช่น
generic family : กลุ่มของ font families คล้ายกับ ("Serif" หรือ "Monospace") font family : ระบุ font family ( "Times New Roman" หรือ"Arial")1font: italic 20px Verdana;
ยังลองดูน่ะ ติชมมาได้เลยเราจะได้ปรับปรุงแนวทางการเขียนถ้าเข้าใจ บางทีเราเองก็เริ่มงง ฮาๆๆ เรื่องนี้เกี่ยวกับ Font ล้วนๆ มีวัวผสมหน่อย มีการเอาเนื้อหาจากเรื่องอื่นมาแจมหน่อยๆ เพื่อให้มีสีสันมากขึ้นขึ้นขึ้น