การจำแนกแบบอักษรทั่วไปที่มีให้ใช้ในเว็บไซต์ของคุณ
เมื่อออกแบบเว็บไซต์หนึ่งในองค์ประกอบหลักของหน้าเว็บที่คุณจะใช้คือเนื้อหาข้อความ ดังนั้นเมื่อคุณสร้างหน้าเว็บและจัดรูปแบบด้วย CSS ส่วนสำคัญส่วนหนึ่งของความพยายามนั้นจะเน้นไปที่การพิมพ์ตัวอักษรของเว็บไซต์
การออกแบบ Typographic มีบทบาทสำคัญในการออกแบบเว็บไซต์ เนื้อหาข้อความที่วางไว้อย่างดีและเป็นรูปแบบจะช่วยให้เว็บไซต์ประสบความสำเร็จมากขึ้นโดยการสร้างประสบการณ์ในการอ่านที่สนุกสนานและใช้งานได้ง่าย ส่วนหนึ่งของความพยายามของคุณในการทำงานกับประเภทจะเป็นการเลือก แบบอักษรที่เหมาะสมสำหรับการออกแบบของคุณ และจากนั้นใช้ CSS เพื่อเพิ่มแบบอักษรและแบบอักษรเหล่านี้ในการแสดงผลของหน้าเว็บ นี้จะกระทำโดยใช้สิ่งที่เรียกว่า " font-stack "
font-กอง
เมื่อคุณ ระบุแบบอักษรที่ จะใช้บนเว็บเพจการปฏิบัติที่ดีที่สุดก็ควรรวมถึงตัวเลือกสำรองในกรณีที่คุณไม่สามารถเลือกแบบอักษรได้ ตัวเลือก fallback เหล่านี้ถูกนำเสนอใน "แบบอักษรสแตก" หากเบราเซอร์ไม่พบแบบอักษรตัวแรกที่แสดงในสแต็กจะย้ายไปยังหน้าถัดไป มันยังคงกระบวนการนี้จนกว่าจะพบแบบอักษรที่สามารถใช้หรือมันจะทำงานออกจากตัวเลือก (ในกรณีนี้มันก็เลือกแบบอักษรระบบที่ต้องการ) ต่อไปนี้เป็นตัวอย่างของวิธีที่กองแบบอักษรจะมีลักษณะเป็น CSS เมื่อใช้กับองค์ประกอบ "body":
ร่างกาย {font-family: Georgia, "Times New Roman", serif; }สังเกตว่าเราระบุแบบอักษร Georgia ไว้ก่อน โดยค่าเริ่มต้นนี่คือสิ่งที่เพจจะใช้ แต่ถ้าแบบอักษรดังกล่าวไม่สามารถใช้ได้เนื่องจากเหตุผลบางประการหน้าจะย้อนกลับไปยัง Times New Roman เราใส่ชื่อแบบอักษรนั้นไว้ในเครื่องหมายคำพูดแบบคู่เพราะเป็นชื่อที่มีหลายคำ ชื่อแบบอักษรชื่อเดียวเช่น Georgia หรือ Arial ไม่จำเป็นต้องมีเครื่องหมายคำพูด แต่ต้องใช้ชื่อแบบอักษรหลายคำเพื่อให้เบราว์เซอร์รู้ว่าคำเหล่านั้นประกอบด้วยชื่อแบบอักษร
ถ้าคุณมองหาจุดสิ้นสุดของสแต็คแบบอักษรคุณควรสังเกตด้วยว่าเราลงท้ายด้วยคำว่า "serif" นั่นคือชื่อครอบครัวแบบอักษรทั่วไป ในกรณีที่บุคคลไม่ได้มี Georgia หรือ Times New Roman บนคอมพิวเตอร์ของตนไซต์จะใช้แบบอักษร serif แบบใดก็ตามที่หาได้ นี่เป็นสิ่งที่ดีกว่าที่จะอนุญาตให้ไซต์สามารถเลือกแบบอักษรที่ต้องการได้เนื่องจากคุณสามารถบอกได้อย่างน้อยว่าควรใช้แบบอักษรใดเพื่อให้รูปลักษณ์และโทนโดยรวมของการออกแบบของไซต์มีความสมบูรณ์ที่สุดเท่าที่จะเป็นไปได้ ใช่เบราว์เซอร์จะเลือกแบบอักษรสำหรับคุณ แต่อย่างน้อยคุณจะให้คำแนะนำเพื่อให้ทราบว่าแบบอักษรใดจะทำงานได้ดีที่สุดภายในการออกแบบ
ครอบครัวอักษรทั่วไป
ชื่อแบบอักษรทั่วไปที่มีอยู่ใน CSS คือ:
- เล่นหาง
- จินตนาการ
- monospace
- serif
- Sans-serif
แม้ว่าจะมีการจำแนกแบบอักษรอื่น ๆ อีกมากมายที่มีอยู่ในการออกแบบเว็บและการพิมพ์ตัวอักษรรวมทั้งแผ่นกระดาน serif, blackletter, display, grunge และอื่น ๆ เหล่านี้เป็นชื่อ font ทั่วไป 5 ชื่อที่คุณจะใช้ใน font-stack ใน CSS ความแตกต่างในการจำแนกแบบอักษรเหล่านี้มีอะไรบ้าง? ลองมาดูสิ!
แบบอักษรตัวใหญ่มักมีรูปแบบตัวหนังสือที่หรูหราซึ่งมีจุดประสงค์เพื่อทำซ้ำข้อความที่เขียนด้วยลายมือแฟนซี แบบอักษรเหล่านี้เนื่องจากตัวหนังสือบางเฉียบของพวกเขาไม่เหมาะสำหรับเนื้อหาขนาดใหญ่เช่นสำเนาเนื้อหา แบบอักษรแบบใช้คำร้องส่วนใหญ่จะใช้สำหรับหัวเรื่องและความต้องการของข้อความที่สั้นกว่าซึ่งสามารถแสดงในแบบอักษรขนาดใหญ่ได้
แบบอักษร แฟนตาซี เป็นแบบอักษรที่ค่อนข้างบ้าที่ไม่ได้ตกอยู่ในหมวดหมู่อื่น ๆ จริงๆ แบบอักษรที่ทำซ้ำโลโก้ที่รู้จักกันดีเช่นรูปแบบตัวอักษรจาก Harry Potter หรือภาพยนตร์ย้อนหลังไปในอนาคตจะตกอยู่ในหมวดหมู่นี้ อีกครั้งแบบอักษรเหล่านี้ไม่เหมาะสำหรับเนื้อหาของเนื้อหาเนื่องจากมักจะเก๋เหมาะสำหรับการอ่านข้อความที่เขียนในแบบอักษรเหล่านี้เป็นเรื่องที่ทำได้ยากเกินไป
แบบ อักษร Monospace เป็นแบบอักษรที่มีขนาดเท่ากันและเว้นระยะเท่ากันเช่นคุณจะพบได้บนเครื่องพิมพ์ดีดรุ่นเก่า แตกต่างจากแบบอักษรอื่น ๆ ที่มีความกว้างของตัวแปรสำหรับตัวอักษรขึ้นอยู่กับขนาดของพวกเขา (เช่นทุน "W" จะใช้พื้นที่มากขึ้นกว่าตัวพิมพ์เล็ก "i") แบบอักษร monospace จะมีความกว้างคงที่สำหรับทุกตัวอักษร แบบอักษรเหล่านี้มักใช้เมื่อมีการแสดงโค้ดบนหน้าเว็บเพราะรูปลักษณ์เหล่านี้แตกต่างจากข้อความอื่น ๆ ในหน้าเว็บ
แบบอักษร Serif เป็นหนึ่งในการจำแนกประเภทที่เป็นที่นิยมมากขึ้น เหล่านี้เป็นแบบอักษรที่มี ligatures พิเศษเล็กน้อยในรูปแบบตัวอักษร ชิ้นพิเศษเหล่านี้เรียกว่า "serifs" แบบอักษร serif ทั่วไปคือ Georgia และ Times New Roman แบบอักษร Serif สามารถใช้สำหรับข้อความขนาดใหญ่เช่นหัวเรื่องและข้อความยาว ๆ ของข้อความและสำเนาร่างกาย
Sans-serif คือการจำแนกประเภทสุดท้ายที่เราจะดู เหล่านี้เป็นแบบอักษรที่ไม่มีตัวอักษรดังกล่าวข้างต้น ชื่อหมายถึง "ไม่มี serifs" แบบอักษรยอดนิยมในหมวดหมู่นี้คือ Arial หรือ Helvetica คล้ายกับ serifs แบบอักษร sans-serif สามารถใช้อย่างเท่าเทียมกันทั้งในหัวเรื่องรวมทั้งเนื้อหาของร่างกาย
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 10/16/17