ในขณะที่ภาพได้รับความรักมากเมื่อมาถึงเว็บไซต์ก็เป็นคำที่เขียนที่ดึงดูดให้เครื่องมือค้นหาและดำเนินเนื้อหาของเว็บไซต์ส่วนใหญ่ ด้วยเหตุนี้การออกแบบตัวอักษรจึงถือเป็นส่วนสำคัญอย่างหนึ่งของการออกแบบเว็บไซต์ ด้วยความสำคัญของข้อความของไซต์จำเป็นต้องให้แน่ใจว่าหน้าตาดีและอ่านง่าย นี่ทำด้วยสไตล์ชีต CSS (Cascading Style Sheets)
ตามมาตรฐานการออกแบบเว็บที่ทันสมัยเมื่อคุณต้องการกำหนดลักษณะเนื้อหาของเว็บไซต์คุณจะใช้ CSS ซึ่งจะแยกสไตล์ CSS ออกจากโครงสร้าง HTML ของเพจ ตัวอย่างเช่นถ้าคุณต้องการตั้งค่าแบบอักษรของหน้าเป็น "Arial" คุณสามารถทำได้โดยการเพิ่มกฎสไตล์ต่อไปนี้ลงใน CSS ของคุณ (หมายเหตุ - นี่น่าจะทำได้ในสไตล์ชีทภายนอกที่สนับสนุนรูปแบบ สำหรับทุกหน้าในเว็บไซต์):
ร่างกาย {แบบอักษรครอบครัว: Arial; }แบบอักษรนี้ถูกตั้งค่าไว้สำหรับ "body" ดังนั้น CSS cascade จะใช้สไตล์กับองค์ประกอบอื่น ๆ ทั้งหมดของหน้า เนื่องจากองค์ประกอบ HTML ทุกองค์ประกอบเป็นองค์ประกอบย่อยของ "body" องค์ประกอบแบบ CSS เช่นแบบอักษรหรือสีจะเนนไปมาจากองค์ประกอบหลักขององค์ประกอบลูก นี่จะเป็นกรณียกเว้นกรณีที่มีการเพิ่มสไตล์เฉพาะเจาะจงสำหรับบางองค์ประกอบ ปัญหาเดียวกับ CSS นี้คือระบุเฉพาะแบบอักษรเดียว หากไม่พบแบบอักษรดังกล่าวด้วยเหตุผลบางประการเบราเซอร์จะแทนที่ตัวอื่นแทน นี่เป็นเรื่องไม่ดีเพราะคุณไม่มีการควบคุมว่าจะใช้แบบอักษรใด - เบราว์เซอร์จะเลือกให้คุณและคุณอาจไม่ชอบสิ่งที่ตัดสินใจใช้ นั่นคือที่กองตัวอักษรเข้ามา
สแต็คแบบอักษรเป็นรายการแบบอักษรในการประกาศแบบอักษรของ CSS แบบอักษรจะแสดงตามลำดับความพึงพอใจที่คุณต้องการให้ปรากฏบนไซต์ในกรณีที่มีปัญหาเช่นแบบอักษรที่ไม่ได้โหลด กองแบบอักษรช่วยให้นักออกแบบสามารถควบคุมรูปลักษณ์ของแบบอักษรบนหน้าเว็บแม้ว่าคอมพิวเตอร์จะไม่มีแบบอักษรเริ่มต้นที่คุณเรียกใช้ก็ตาม
สแต็คแบบอักษรมีลักษณะอย่างไร? นี่คือตัวอย่าง:
ร่างกาย {font-family: Georgia, "Times New Roman", serif; }มีบางสิ่งแจ้งให้ทราบที่นี่
ขั้นแรกคุณจะเห็นว่าเราแยกชื่อแบบอักษรที่แตกต่างกันด้วยเครื่องหมายจุลภาค ระหว่างแต่ละคนคุณสามารถเพิ่มแบบอักษรได้มากเท่าที่คุณต้องการตราบเท่าที่พวกเขาจะคั่นด้วยเครื่องหมายจุลภาค เบราเซอร์จะพยายามโหลดแบบอักษรตัวแรกที่ระบุไว้ก่อน หากล้มเหลวก็จะทำงานลงบรรทัดพยายามแบบอักษรจนกว่าจะพบหนึ่งที่สามารถใช้แต่ละ ในตัวอย่างนี้เราใช้แบบอักษรปลอดภัยบนเว็บและ "Georgia" จะพบได้ในคอมพิวเตอร์ของบุคคลที่เข้าชมเว็บไซต์ (หมายเหตุ - เบราเซอร์จะค้นหาคอมพิวเตอร์ของคุณเพื่อหาแบบอักษรที่ระบุไว้ในหน้าเว็บ คอมพิวเตอร์ที่พิมพ์แบบอักษรจากระบบของคุณ) หากด้วยเหตุผลบางอย่างที่ไม่พบตัวอักษรก็จะย้ายลงกองและลองใช้แบบอักษรต่อไปที่ระบุ
ในแง่ของแบบอักษรถัดไปที่แจ้งให้ทราบว่ามันถูกเขียนขึ้นในสแต็ค ชื่อ "Times New Roman" ถูกใส่ไว้ในเครื่องหมายคำพูดคู่ เนื่องจากชื่อแบบอักษรมีหลายคำ ชื่อแบบอักษรใด ๆ ที่มีมากกว่าหนึ่งคำ (Trebuchet MS, Courier New ฯลฯ ) ต้องมีชื่อในเครื่องหมายคำพูดคู่เพื่อให้เบราว์เซอร์รู้ว่าคำเหล่านั้นทั้งหมดเป็นส่วนหนึ่งของชื่อแบบอักษร
ท้ายสุดเราวางสแต็คแบบอักษรด้วย "serif" ซึ่งเป็นแบบอักษรทั่วไป ในกรณีที่ไม่น่าสนใจว่าไม่มีแบบอักษรใดที่คุณตั้งชื่อไว้ในสแต็คของคุณเบราว์เซอร์จะค้นหาแบบอักษรที่อย่างน้อยที่สุดตรงกับการจำแนกประเภทที่คุณเลือก ตัวอย่างเช่นถ้าคุณใช้แบบอักษร sans-serif เช่น Arial และ Verdana การสิ้นสุดแบบอักษรกับการจัดหมวดหมู่ของ "sans-serif" อย่างน้อยจะทำให้ตัวอักษรในตระกูลทั้งหมดนั้นมีปัญหาในการโหลด เป็นที่ยอมรับว่าควรหายากมากที่เบราว์เซอร์ไม่สามารถหาแบบอักษรใด ๆ ที่ระบุในสแต็คได้และต้องใช้การจำแนกประเภทนี้เป็นหลักแทนที่จะเป็นวิธีที่ดีที่สุดในการรวมเอาไว้เพื่อความปลอดภัยเป็นทวีคูณ
ส่วนแบบอักษรและเว็บแบบอักษร
เว็บไซต์หลายแห่งในปัจจุบันใช้แบบอักษรบนเว็บที่รวมอยู่ในไซต์พร้อมกับแหล่งข้อมูลอื่น ๆ (เช่นรูปภาพของไซต์ไฟล์จาวาสคริปต์ ฯลฯ ) หรือเชื่อมโยงไปยังตำแหน่งแบบออฟไลน์เช่น Google Fonts หรือ Typekit ขณะที่แบบอักษรเหล่านี้ควรโหลดตั้งแต่คุณเชื่อมโยงไปยังไฟล์ด้วยตัวเองคุณยังคงต้องการใช้สแต็คแบบอักษรเพื่อให้แน่ใจว่าคุณสามารถควบคุมปัญหาต่างๆที่อาจเกิดขึ้นได้ สิ่งเดียวกันก็คือแบบอักษร "เว็บปลอดภัย" ที่ควรจะอยู่ในคอมพิวเตอร์ของใครบางคน (โปรดทราบว่าแบบอักษรที่เราใช้เป็นตัวอย่างในบทความนี้ ได้แก่ Arial, Verdana, Georgia และ Times New Roman เป็นแบบอักษรที่ปลอดภัยบนเว็บทั้งหมดที่ควรมี บนคอมพิวเตอร์ของบุคคลนั้น) แม้ว่าความเป็นไปได้ที่จะมีตัวอักษรหายไปต่ำมาก แต่การระบุสแต็คแบบอักษรจะช่วยให้ การออกแบบตัวอักษรของเว็บไซต์ ไม่ค่อย ปะทะ เท่าที่จะเป็นไปได้
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 8/9/17