คุณสมบัติที่กำหนดตัวอักษร CSS ครอบครัวตัวอักษรความกล้าหาญขนาดและรูปแบบของข้อความ
ความแตกต่างระหว่าง Serif อักษรและ Sans-serif
ครอบครัว CSS ตัวอักษร
ใน CSS, มีสองประเภทของชื่อตระกูลแบบอักษร:
- ครอบครัวทั่วไป - กลุ่มของครอบครัวตัวอักษรที่มีลักษณะคล้ายกัน (เช่น "Serif" หรือ "Monospace")
- ครอบครัวตัวอักษร - ครอบครัวตัวอักษรเฉพาะ (เช่น "Times New Roman" หรือ "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | หมายเหตุ: บนหน้าจอคอมพิวเตอร์แบบอักษร Sans-serif ได้รับการพิจารณาให้อ่านง่ายขึ้นกว่า Serif อักษร |
|---|
ครอบครัวตัวอักษร
ครอบครัวตัวอักษรของข้อความที่มีการตั้งค่าด้วย font-family สถานที่ให้บริการ
font-family คุณสมบัติควรถือชื่อตัวอักษรหลายเป็น "ทางเลือก" ระบบ หากเบราว์เซอร์ไม่สนับสนุนแบบอักษรแรกก็พยายามที่ตัวอักษรต่อไปและอื่น ๆ
เริ่มต้นด้วยตัวอักษรที่คุณต้องการและจบลงด้วยครอบครัวทั่วไปที่จะปล่อยให้เบราว์เซอร์เลือกตัวอักษรที่คล้ายกันในครอบครัวทั่วไปถ้าไม่มีแบบอักษรอื่น ๆ ที่มี
หมายเหตุ: หากชื่อของครอบครัวตัวอักษรที่เป็นมากกว่าคำหนึ่งก็จะต้องอยู่ในเครื่องหมายคำพูดที่ชอบ: "Times New Roman"
ครอบครัวตัวอักษรมากกว่าหนึ่งระบุไว้ในรายการคั่นด้วยเครื่องหมายจุลภาค:
ที่ใช้กันทั่วไปสำหรับการผสมตัวอักษรดูของเรา ปลอดภัยเว็บแบบอักษรผสม
รูปแบบตัวอักษร
font-style คุณสมบัติส่วนใหญ่จะใช้เพื่อระบุตัวเอียง
สถานที่ให้บริการนี้มีสามค่า:
- ปกติ - ข้อความจะปรากฏตามปกติ
- เอียง - ข้อความที่ปรากฏอยู่ในตัวเอียง
- อ้อม - ข้อความคือ "พิง" (อ้อมจะคล้ายกับตัวเอียง แต่ได้รับการสนับสนุนน้อยกว่า)
ตัวอย่าง
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} ลองตัวเอง» ขนาดตัวอักษร
font-size คุณสมบัติกำหนดขนาดของข้อความ
ความสามารถในการจัดการขนาดตัวอักษรที่มีความสำคัญในการออกแบบเว็บ แต่คุณไม่ควรใช้การปรับขนาดตัวอักษรเพื่อให้มีลักษณะเช่นย่อหน้าหัวหรือส่วนหัวมีลักษณะเช่นย่อหน้า
มักจะใช้แท็กที่เหมาะสมเช่น <h1> - <H6> สำหรับหัวเรื่องและ <p> สำหรับย่อหน้า
ค่า font-size สามารถเป็นที่แน่นอนหรือญาติขนาด
ขนาดแอบโซลูท:
- การตั้งค่าข้อความให้มีขนาดที่ระบุไว้
- ไม่อนุญาตให้ผู้ใช้สามารถเปลี่ยนขนาดของข้อความในเบราว์เซอร์ (ดีด้วยเหตุผลการเข้าถึง)
- ขนาดแอบโซลูทจะเป็นประโยชน์เมื่อขนาดทางกายภาพของการส่งออกเป็นที่รู้จักกัน
ขนาดที่สัมพันธ์:
- ตั้งค่าขนาดที่สัมพันธ์กับองค์ประกอบโดยรอบ
- ช่วยให้ผู้ใช้เปลี่ยนขนาดของข้อความในเบราว์เซอร์
| หมายเหตุ: หากคุณไม่ได้ระบุขนาดตัวอักษรขนาดเริ่มต้นสำหรับข้อความปกติเช่นย่อหน้าเป็น 16px (16px = 1em) |
|---|
กำหนดขนาดตัวอักษรด้วยพิกเซล
การตั้งค่าขนาดข้อความที่มีพิกเซลช่วยให้คุณควบคุมเต็มรูปแบบผ่านขนาดตัวอักษร:
เคล็ดลับ: หากคุณใช้พิกเซล, คุณยังสามารถใช้เครื่องมือซูมเพื่อปรับขนาดหน้าทั้งหมด
กำหนดขนาดตัวอักษรด้วยปืน
เพื่อให้ผู้ใช้สามารถปรับขนาดข้อความ (ในเมนูเบราว์เซอร์) นักพัฒนาจำนวนมากใช้ em แทนพิกเซล
หน่วยขนาด em ถูกแนะนำโดย W3C
1em เท่ากับขนาดตัวอักษรปัจจุบัน ขนาดข้อความเริ่มต้นในเบราว์เซอร์เป็น 16px ดังนั้นขนาดเริ่มต้นของ 1em เป็น 16px
ขนาดสามารถคำนวณได้จากพิกเซล emใช้สูตรนี้พิกเซล/ 16 =em
ตัวอย่าง
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} ลองตัวเอง» ในตัวอย่างข้างต้นขนาดตัวอักษรใน em เป็นเช่นเดียวกับตัวอย่างก่อนหน้านี้เป็นพิกเซล แต่ด้วยขนาด em มันเป็นไปได้ที่จะปรับขนาดของข้อความในเบราว์เซอร์
แต่น่าเสียดายที่ยังคงมีปัญหากับรุ่นเก่าเช่น ข้อความที่มีขนาดใหญ่กว่าที่ควรทำเมื่อมีขนาดใหญ่และมีขนาดเล็กกว่าที่ควรเมื่อทำขนาดเล็ก
ใช้การรวมกันร้อยละและ Em
วิธีการแก้ปัญหาที่ทำงานในเบราว์เซอร์ทั้งหมดคือการตั้งค่าเริ่มต้น font-size เปอร์เซ็นต์สำหรับ <body> องค์ประกอบ:
ตัวอย่าง
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} ลองตัวเอง» รหัสของเราตอนนี้ใช้งานได้ดี! มันแสดงให้เห็นขนาดตัวอักษรที่เหมือนกันในเบราว์เซอร์และช่วยให้เบราว์เซอร์เพื่อขยายหรือปรับขนาดข้อความ!
Font น้ำหนัก
font-weight คุณสมบัติระบุน้ำหนักของตัวอักษรที่:
ตัวอักษรตัวแปร
font-variant สถานที่ให้บริการจะระบุหรือไม่ว่าข้อความควรจะปรากฏในตัวอักษรขนาดเล็กหมวก
ในตัวอักษรขนาดเล็กหมวก, ตัวพิมพ์เล็กทั้งหมดจะถูกแปลงเป็นตัวอักษรพิมพ์ใหญ่ อย่างไรก็ตามการแปลงตัวอักษรพิมพ์ใหญ่ปรากฏในขนาดตัวอักษรขนาดเล็กกว่าตัวอักษรพิมพ์ใหญ่เดิมในข้อความ
ตัวอย่างเพิ่มเติม
ทุกคุณสมบัติตัวอักษรในการประกาศ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดของคุณสมบัติแบบอักษรในการประกาศ
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
คุณสมบัติทั้งหมด CSS ตัวอักษร
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |