ในขณะที่รูปภาพได้รับความรักมากเมื่อกล่าวถึงเว็บไซต์ก็เป็นคำที่เขียนซึ่งดึงดูดใจให้กับเครื่องมือค้นหาและนำเนื้อหาของไซต์ส่วนใหญ่ออกไป ด้วยเหตุนี้การออกแบบตัวอักษรจึงถือเป็นส่วนสำคัญอย่างหนึ่งของการออกแบบเว็บไซต์ ด้วยความสำคัญของข้อความของไซต์จำเป็นต้องให้แน่ใจว่าหน้าตาดีและอ่านง่าย นี่ทำด้วยสไตล์ชีต CSS (Cascading Style Sheets)
ตามมาตรฐานการออกแบบเว็บที่ทันสมัยเมื่อคุณต้องการกำหนดลักษณะเนื้อหาของเว็บไซต์คุณจะใช้ CSS ซึ่งจะแยกสไตล์ CSS ออกจากโครงสร้าง HTML ของเพจ ตัวอย่างเช่นถ้าคุณต้องการตั้งค่าแบบอักษรของหน้าเป็น "Arial" คุณสามารถทำได้โดยการเพิ่มกฎสไตล์ต่อไปนี้ลงใน CSS ของคุณ (นี่น่าจะทำในสไตล์ชีทภายนอกที่กำหนดรูปแบบสำหรับทุกๆ ในเว็บไซต์):
ร่างกาย {
แบบอักษรครอบครัว: Arial;
}
แบบอักษรนี้ถูกตั้งค่าไว้สำหรับ "body" ดังนั้น CSS cascade จะใช้สไตล์กับองค์ประกอบอื่น ๆ ทั้งหมดของหน้า เนื่องจากองค์ประกอบ HTML ทุกองค์ประกอบเป็นองค์ประกอบย่อยของ "body" องค์ประกอบแบบ CSS เช่นแบบอักษรหรือสีจะเนนไปมาจากองค์ประกอบหลักขององค์ประกอบลูก นี่จะเป็นกรณียกเว้นกรณีที่มีการเพิ่มสไตล์เฉพาะเจาะจงสำหรับบางองค์ประกอบ ปัญหาเดียวกับ CSS นี้คือระบุเฉพาะแบบอักษรเดียว หากไม่พบแบบอักษรดังกล่าวด้วยเหตุผลบางประการเบราเซอร์จะแทนที่ตัวอื่นแทน นี้ไม่ดีเพราะคุณมีการควบคุมสิ่งที่ใช้ตัวอักษรไม่; เบราเซอร์จะเลือกสำหรับคุณและคุณอาจไม่ชอบสิ่งที่มันตัดสินใจที่จะใช้! นั่นคือที่กองตัวอักษรเข้ามา สแต็คแบบอักษรเป็นรายการแบบอักษรในการประกาศแบบอักษรของ CSS แบบอักษรจะแสดงตามลำดับความพึงพอใจที่คุณต้องการให้ปรากฏบนไซต์ในกรณีที่มีปัญหาเช่นแบบอักษรที่ไม่ได้โหลด กองแบบอักษรช่วยให้นักออกแบบสามารถควบคุมรูปลักษณ์ของแบบอักษรบนหน้าเว็บแม้ว่าคอมพิวเตอร์จะไม่มีแบบอักษรเริ่มต้นที่คุณเรียกใช้ก็ตาม สแต็คแบบอักษรมีลักษณะอย่างไร? นี่คือตัวอย่าง: ร่างกาย {
ครอบครัวอักษร: จอร์เจีย, "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 ส่วนแบบอักษรและเว็บแบบอักษร
