ไวยากรณ์ของพร็อพเพอร์ตี้ Font-Family
การออกแบบ Typographic เป็นส่วนสำคัญอย่างยิ่งสำหรับการออกแบบเว็บไซต์ที่ประสบความสำเร็จ การสร้างเว็บไซต์ที่มีข้อความที่ อ่านง่ายและดูดี เป็นเป้าหมายของการออกแบบเว็บทุกรูปแบบ เพื่อให้บรรลุเป้าหมายนี้คุณจะต้องสามารถกำหนดแบบอักษรเฉพาะที่ต้องการใช้บนหน้าเว็บของคุณได้ หากต้องการระบุแบบอักษรหรือแบบอักษรในเอกสารเว็บของคุณคุณจะใช้คุณสมบัติแบบอักษรแบบครอบครัวใน CSS ของคุณ
รูปแบบตัวอักษรแบบครอบครัวที่ง่ายที่สุดที่คุณสามารถใช้จะมีตระกูลแบบอักษรเพียงตัวเดียว:
p {ตระกูลแบบอักษร: Arial; }ถ้าคุณใช้สไตล์นี้กับเพจย่อหน้าทั้งหมดจะปรากฏในตระกูลแบบอักษร "Arial" นี่เป็นสิ่งที่ยอดเยี่ยมและตั้งแต่ "Arial" เป็นที่รู้จักกันในชื่อ "web-safe font" ซึ่งหมายความว่าคอมพิวเตอร์ส่วนใหญ่ (ถ้าไม่ทั้งหมด) จะติดตั้งไว้คุณสามารถพักผ่อนได้อย่างง่ายดายโดยรู้ว่าหน้าเว็บของคุณจะแสดงในแบบอักษรที่ต้องการ .
แล้วจะเกิดอะไรขึ้นหากไม่สามารถหาแบบอักษรที่คุณเลือก ตัวอย่างเช่นหากคุณไม่ได้ใช้ "เว็บเซฟฟอนต์" บนหน้าตัวแทนผู้ใช้จะทำอย่างไรหากไม่มีแบบอักษรดังกล่าว พวกเขาทำให้การทดแทน
ซึ่งอาจส่งผลให้หน้าเว็บที่ดูตลกมาก ฉันเคยไปที่หน้าเว็บที่คอมพิวเตอร์ของฉันแสดงผลอย่างสมบูรณ์ใน "Wingdings" (ไอคอนชุด) เนื่องจากคอมพิวเตอร์ของฉันไม่มีแบบอักษรที่นักพัฒนาซอฟต์แวร์ได้ระบุไว้และเบราว์เซอร์ของฉันมีทางเลือกที่ไม่ดีในแบบอักษรที่จะใช้ ใช้แทน หน้านี้ไม่สามารถอ่านได้! นี่คือที่กอง font เข้ามาเล่น
แยกครอบครัวแบบอักษรหลายแบบด้วยเครื่องหมายจุลภาคในกองแบบอักษร
"สแต็คแบบอักษร" คือรายการแบบอักษรที่คุณต้องการให้เพจใช้ คุณจะใส่ตัวเลือกแบบอักษรตามลำดับความชอบที่คุณต้องการและแบ่งแต่ละส่วนด้วยเครื่องหมายจุลภาค ถ้าเบราว์เซอร์ไม่มีตระกูลแบบอักษรตัวแรกในรายการระบบจะลองใช้แบบอักษรที่สองและจากนั้นเป็นต้นไปจนกว่าจะพบคำที่มีอยู่ในระบบ
ครอบครัวแบบอักษร: Pussycat, แอลจีเรีย, บรอดเวย์;ในตัวอย่างข้างต้นเบราว์เซอร์จะค้นหาแบบอักษร "Pussycat" จากนั้น "Algerian" และ "Broadway" หากไม่พบแบบอักษรอื่น ๆ ซึ่งจะทำให้คุณมีโอกาสที่จะใช้แบบอักษรที่คุณเลือกอย่างน้อยหนึ่งแบบ มันไม่สมบูรณ์แบบซึ่งเป็นเหตุผลที่เรามีมากขึ้นเราสามารถเพิ่มสแต็คแบบอักษรของเรา (อ่านต่อ!)
ใช้แบบอักษรทั่วไปล่าสุด
เพื่อให้คุณสามารถสร้างสแต็คแบบอักษรที่มีรายการแบบอักษรและยังไม่มีเบราว์เซอร์ใดที่สามารถค้นหาได้ คุณชัดไม่ต้องการให้หน้าของคุณแสดงขึ้นไม่สามารถอ่านได้หากเบราว์เซอร์ทำให้ทางเลือกการทดแทนที่ไม่ดี โชคดี CSS มีทางออกสำหรับการนี้เช่นกัน: แบบอักษรทั่วไป
คุณควรจะสิ้นสุดรายการแบบอักษรของคุณ (แม้ว่าจะเป็นรายการแบบครอบครัวเดียวหรือเว็บแบบอักษรที่ปลอดภัยเท่านั้น) ด้วยแบบอักษรทั่วไป มีห้าอย่างที่คุณสามารถใช้:
- เล่นหาง
- จินตนาการ
- monospace
- Sans-serif
- serif
สองตัวอย่างข้างต้นอาจเปลี่ยนเป็น:
แบบอักษรครอบครัว: Arial, sans-serif; ครอบครัวแบบอักษร: Pussycat, แอลจีเรีย, บรอดเวย์, แฟนตาซี;ชื่อครอบครัวแบบอักษรบางตัวมีสองคำหรือมากกว่า
หากครอบครัวแบบอักษรที่คุณต้องการใช้เป็นมากกว่าหนึ่งคำคุณควรล้อมรอบด้วยเครื่องหมายอัญประกาศเดี่ยว แม้ว่าเบราว์เซอร์บางประเภทสามารถอ่านตระกูลแบบอักษรโดยไม่มีเครื่องหมายอัญประกาศอาจมีปัญหาหากมีการย่อหรือละเว้นช่องว่าง
แบบอักษรครอบครัว: "Times New Roman", serif;ในตัวอย่างนี้คุณจะเห็นว่าชื่อแบบอักษร "Times New Roman" ซึ่งเป็นคำหลายคำถูกซ่อนไว้ในเครื่องหมายคำพูด นี้บอกเบราว์เซอร์ว่าทั้งสามคำเหล่านี้เป็นส่วนหนึ่งของชื่อแบบอักษรที่เป็นนอกคอกสามแบบอักษรที่แตกต่างกันทั้งหมดที่มีชื่อหนึ่งคำ
บทความต้นฉบับโดย Jennifer Krynin แก้ไขเมื่อ 12/2/16 โดย Jeremy Girard