รูปแบบตัวอักษรเริ่มต้นของเว็บ

โดยปกติแล้วสไตล์ของหน้าเว็บที่ผู้ใช้เห็นจะถูกควบคุมโดยสามเลเยอร์ เลเยอร์แรกคือสไตล์เริ่มต้นของเบราว์เซอร์ เลเยอร์ที่สองคือสไตล์ที่กำหนดโดยเว็บเพจ และเลเยอร์ที่สามคือสไตล์ที่ผู้ใช้กำหนด เช่นเดียวกับ CSS รูปแบบหลังจะมีลำดับความสำคัญสูงกว่ารูปแบบก่อนหน้า ซึ่งหมายความว่าสไตล์ที่กำหนดหน้าเว็บสามารถแทนที่สไตล์เริ่มต้นของเบราว์เซอร์ได้ และสไตล์ที่ผู้ใช้กำหนดจะมีลำดับความสำคัญสูงสุด สถานการณ์จริงคือแม้ว่าเบราว์เซอร์จะมีฟังก์ชันของสไตล์ที่ผู้ใช้กำหนดไม่มากก็น้อย แต่มีผู้ใช้เพียงไม่กี่รายเท่านั้นที่จะปรับแต่งมัน และโดยทั่วไปแล้วพวกเขาเป็นผู้ใช้ขั้นสูง รูปแบบเริ่มต้นของเบราว์เซอร์มักจะมีการตั้งค่าที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน เวอร์ชันภาษาที่แตกต่างกัน และแม้แต่เวอร์ชันของระบบที่แตกต่างกัน ซึ่งส่งผลให้หน้าเว็บที่ใช้รูปแบบเริ่มต้นโดยตรงแสดงไม่สอดคล้องกันอย่างมากในเบราว์เซอร์ต่างๆ ดังนั้นจึงมีปัญหาที่คล้ายกัน การรีเซ็ตของ YUI ใช้เพื่อพยายามเขียนการตั้งค่าเริ่มต้นของเบราว์เซอร์ใหม่ เพื่อให้มั่นใจว่าสไตล์ของแต่ละเบราว์เซอร์จะสอดคล้องกัน

ยกตัวอย่างแบบอักษร ประเภทแบบอักษรเริ่มต้น ขนาดแบบอักษร และความสูงของบรรทัดแบบอักษรของแต่ละเบราว์เซอร์จะแตกต่างกัน ตัวอย่างเช่น เมื่อ IE8 เวอร์ชันภาษาจีนแสดงหน้าเว็บใน Windows XP แบบอักษรเริ่มต้นคือ Song Dynasty แต่นี่เป็นสิ่งที่แน่นอน ไม่ใช่กรณีของเวอร์ชันภาษาอังกฤษ ดังนั้นเราจึงจำเป็นต้องตั้งค่ารูปแบบแบบอักษรเริ่มต้นให้สม่ำเสมอเพื่อให้ได้เอฟเฟกต์การแสดงผลที่สอดคล้องกัน เพื่อให้มั่นใจว่าการออกแบบจะสอดคล้องกันและปรับปรุงประสิทธิภาพการพัฒนา

ในอนาคต ให้เตรียมใช้รูปแบบตัวอักษรเริ่มต้นต่อไปนี้:

 body{ font: 12px/1.5 arial; }

แบบอักษร: arial

อักขระเนื้อหาส่วนใหญ่บนหน้าเว็บของเราเป็นภาษาจีน ไม่ต้องสงสัยเลยว่าแบบอักษรที่ใช้กันมากที่สุดในการแสดงภาษาจีนบนหน้าเว็บคือ Song Dynasty แต่ Song Dynasty นั้นแย่เกินไปในการแสดงภาษาอังกฤษ ตัวเลข และสัญลักษณ์ภาษาอังกฤษ เช่น อักขระ © ดังนั้นโดยทั่วไปเราคาดว่าจะแสดงด้วยรูปแบบตัวอักษรที่ดีกว่าผ่าน CSS จากนั้นใช้ Song Dynasty เพื่อแสดงสัญลักษณ์ภาษาจีนและจีน เหตุผลที่ฉันเลือกอาเรียลก็เพราะว่า:

1. แบบอักษรนี้ได้รับการติดตั้งไว้ล่วงหน้าบน Windows และ Mac และควรเป็นแบบอักษรบนเว็บที่ใช้กันอย่างแพร่หลายที่สุด คู่แข่งที่มีศักยภาพอย่าง tahoma และ helvetica ไม่ได้โชคดีนัก
2. ผู้เชี่ยวชาญด้านการออกแบบภาพอาจคิดว่าควร ใช้ tahoma ใน Windows และ helvetica ใน Mac เช่น รูปแบบแบบอักษรเริ่มต้นของ Taobao คือ font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
นี่เป็นตัวเลือกที่ดีมาก แต่คุณจะพบ ว่าเวอร์ชันใหม่ของ Google, YAHOO, Youtube, Bing และแม้แต่ MSN ใช้ arial เป็นแบบอักษรเริ่มต้นตัวแรก ดังนั้น arial จึงควรเป็นที่ยอมรับได้อย่างสมบูรณ์ในแง่ของความสวยงามและความสามารถในการอ่าน
3. โดยทั่วไป เมื่อตั้งค่าตระกูลฟอนต์ ตระกูลฟอนต์สากล จะถูกตั้งค่าไว้ที่ส่วนท้ายเพื่อความปลอดภัย ตัวอย่างเช่น การตั้งค่าของ Google คือ font-family:arial,sans-serif; แต่อย่างน้อยก็ในเวอร์ชันที่ไม่ใช่ภาษาจีน Win7 เมื่อการเข้ารหัสเป็น GBK IE8 จะแสดงแบบอักษร Song เนื่องจาก sans-serif ทำให้แบบอักษรผิดรูป นี่คือสาเหตุที่ Taobao จำเป็นต้องเพิ่มแบบอักษร Song ก่อน sans-serif แต่ Google ไม่จำเป็นต้องทำเช่นนี้
4. เนื่องจากตัวเลือกแบบอักษรภาษาจีนมีจำกัด เบราว์เซอร์กระแสหลักทั้งหมดในปัจจุบันจึงถูกตั้งค่าให้ใช้ Song Dynasty เพื่อแสดงภาษาจีน หน้าแรกและหน้าผลการค้นหาของ Baidu ใช้ font-family:arial; บางคนอาจสังเกตเห็นว่าแบบอักษรจีนเริ่มต้นที่แสดงใน Firefox China คือ Microsoft Yahei เนื่องจาก Mouzhi Network ได้แก้ไขสไตล์ที่ผู้ใช้กำหนดโดยไม่ได้รับอนุญาตและไม่อนุญาตให้สไตล์ของหน้าเว็บแทนที่สไตล์ที่กำหนดโดยเบราว์เซอร์ . เนื่องจากสถานการณ์ที่คล้ายคลึงกัน จึงเป็นสิ่งสำคัญมากสำหรับเราในการออกแบบหน้าเว็บที่มีความยืดหยุ่น

ปัญหาหนึ่งที่เกิดจากการใช้แบบอักษรภาษาอังกฤษเป็นแบบอักษรเริ่มต้นแรกคือ ปัญหาการจัดตำแหน่งเมื่อภาษาจีน อังกฤษ และสัญลักษณ์ปะปนกัน สถานการณ์ส่วนใหญ่สามารถแก้ไขได้โดยการตั้งค่าความสูงของบรรทัดและ hasLayout แต่จะไม่สมบูรณ์หากคุณเปลี่ยนแปลง การเปลี่ยนฟอนต์เป็น "ซ่งตี้" ก็สามารถแก้ปัญหาได้อย่างสมบูรณ์ เห็นได้ชัดว่าปัญหานี้เกิดขึ้นเฉพาะกับ IE เท่านั้น ดังนั้น หากเว็บไซต์ของคุณไม่ค่อยใช้ภาษาอังกฤษ ตัวเลข และสัญลักษณ์ภาษาอังกฤษ การตั้งค่า {font-family:5b8b4f53;} โดยตรงก็เป็นทางเลือกที่สมเหตุสมผลเช่นกัน

ขนาด: 12px

1. 12px คือขีดจำกัดที่ Song Dynasty สามารถแสดงได้ แม้ว่า Microsoft Yahei จะสามารถแสดงแบบอักษรที่มีขนาดเล็กลงได้ แต่ สภาพแวดล้อมของแอปพลิเคชันในปัจจุบันยังไม่สมบูรณ์ เนื่องจากโดยพื้นฐานแล้ว Songti นั้นเป็นแบบอักษรเว็บสากลเพียงตัวเดียวที่ใช้แสดงภาษาจีนในปัจจุบัน ดังนั้น 12px จึงกลายเป็นขนาดตัวอักษรที่ใช้บ่อยที่สุด แน่นอนว่าเราสามารถแก้ไขค่าเริ่มต้นนี้ได้ตามความต้องการของผลิตภัณฑ์
2. ไม่ต้องกังวลกับการออกแบบตามขนาดตัวอักษร (em)
3. ในเวอร์ชันภาษาจีนหลัง Chrome 3.0 ขนาดตัวอักษรขั้นต่ำคือ 12px ตัวอย่างเช่น หากคุณตั้งค่าขนาดตัวอักษรขั้นต่ำเป็น 10px ขนาดตัวอักษรจะกลายเป็น 12px ในที่สุด

ความสูงของแถว: 1.5x

1. นี่คือมูลค่าประสบการณ์ ผลิตภัณฑ์ต่างๆ อาจมีข้อกำหนดที่แตกต่างกันสำหรับค่านี้ แต่โดยทั่วไปแล้ว เราจะตั้งค่าค่าที่ใช้บ่อยที่สุดเป็นค่าเริ่มต้น ตัวอย่างเช่น แบบอักษรของ YUI คือ font:13px/1.231 arial,helvetica,clean,sans-serif; นั่นคือ ขนาดแบบอักษรเริ่มต้นคือ 13px ความสูงของบรรทัดคือ 13*1.231=16.003px และความสูงของบรรทัดเริ่มต้นคือ 1.231 เท่า แบบอักษรเริ่มต้น สำหรับภาษาจีน ขนาดแบบอักษรที่ใช้กันทั่วไปคือ 12px, 14px, 16px, 18px และขนาดคู่อื่นๆ การตั้งค่าความสูงของบรรทัดให้เป็นเลขคู่ใน IE6 และ IE7 สามารถแก้ปัญหาการจัดตำแหน่งแบบอักษรได้ในบางกรณี
2. ใน IE6 และ IE7 ค่าความสูงของบรรทัดต้องมากกว่า 2px ของแบบอักษรเพื่อให้แน่ใจว่าแบบอักษรจะแสดงได้ครบถ้วนหรือสามารถแสดงขีดเส้นใต้ได้อย่างมีประสิทธิภาพเมื่อใช้เป็นลิงก์
3. เมื่อตั้งค่า line-height ระวังอย่าใช้หน่วย (รวมถึง %) เนื่องจากโหนดลูกจะสืบทอดค่า line-height ที่คำนวณได้ ดังนั้นเมื่อใช้หน่วย เบราว์เซอร์จะคำนวณ line-height เป็นค่าที่กำหนดเป็นค่าแรก ค่าจะไม่เปลี่ยนแปลงเมื่อขนาดฟอนต์เปลี่ยนไป และค่า unitless จะเป็นค่าพหุคูณของ font-size ของคอนเทนเนอร์ ดังนั้นการตั้งค่าให้เป็นค่า unitless จึงเป็นตัวเลือกที่ดีที่สุด
4. การดู CSS line-height แบบเจาะลึก มีประโยชน์มากในการทำความเข้าใจ line-height และคุ้มค่าที่จะอ่าน

ประสิทธิภาพและประสิทธิผล

1. แพลตฟอร์มส่วนใหญ่มี arial เพื่อลดเวลาในการค้นหาเบราว์เซอร์
2. รหัสมีน้อยและง่ายต่อการเขียน arial นั้นเป็นฟอนต์ที่มีชื่อสั้นที่สุด ซึ่งสามารถบันทึกขนาด CSS ได้
3. ตัวอักษรทั้งหมดเป็นตัวพิมพ์เล็กซึ่งเป็นสิ่งที่ Google ทำในปัจจุบัน ข้อดีคือสามารถเขียนได้เร็วขึ้นและปรับปรุงประสิทธิภาพของการบีบอัด Gzip
4. ภาษาจีนจะแสดงได้ดีที่สุดในรูปแบบ unicode ตัวอย่างเช่น เมื่อใช้ Song Dynasty จะเป็น {font-family:5b8b4f53;} และเมื่อใช้ Microsoft Yahei จะเป็น {font-family:5fae8f6f96c59ed1;} มีข้อดีในการหลีกเลี่ยงปัญหาการเข้ารหัส และเบราว์เซอร์หลักๆ ทั้งหมดสามารถรองรับได้
5. ใช้ประเภทแบบอักษรที่ถูกต้องและหลีกเลี่ยงการใช้เครื่องหมายคำพูด เพื่อลดขนาด CSS แบบอักษรจีนสามารถเขียนได้ตามวิธีก่อนหน้า

อนาคต

1. จาก การทดสอบการผสมภาษาจีน อังกฤษ และสัญลักษณ์ ฉันพบว่า Microsoft Yahei ทำงานได้ดีทีเดียว รวมถึงตัวเลขภาษาอังกฤษและตัวอักษรภาษาอังกฤษ รวมถึงเอฟเฟกต์การแสดงผลใน IE6 และ IE7 อย่างไรก็ตาม สิ่งเดียวที่น่าเสียดายก็คือ ถ้า Microsoft Yahei เป็นเช่นนั้น ติดตั้งภายใต้ XP หากผู้ใช้ที่มีแบบอักษรสีดำไม่เปิดตัวเลือก "ใช้แบบอักษรบนหน้าจอให้เรียบ" ข้อความจะเบลอมากและอ่านยากใน Firefox, Safari และ Opera โดยเฉพาะ IE6 ขณะนี้ยังไม่มีวิธีแก้ปัญหาที่ดี ดังนั้นจึงสามารถใช้ได้อย่างเป็นทางการเมื่ออัตราส่วนการใช้งานของ IE6 น้อยมากเท่านั้น อาจต้องใช้เวลาจนถึงปี 2014 เมื่อ XP ตาย
2. แม้ว่า @font-face จะมีมาเป็นเวลานานแล้ว แต่การรองรับเบราว์เซอร์ ความเร็วเครือข่าย และปัญหาทางธุรกิจ ส่งผลให้มีการใช้งานน้อยมาก ข่าวดีเกี่ยวกับแบบอักษรเมื่อเร็วๆ นี้ ก็คือ Firefox 3.6 จะรองรับ Web Open Font Forma สำหรับข้อมูลที่เกี่ยวข้องเกี่ยวกับอนาคตของแบบอักษรบนเว็บ โปรดดู ที่ อนาคตของแบบอักษรบนเว็บ เกี่ยวกับแบบอักษรบนเว็บ: สถานการณ์ปัจจุบันและอนาคต และ การทบทวนสถานการณ์ปัจจุบันและอนาคตของแบบอักษรบนเว็บ