CSS @ font-face -“ src: local ('☺')” หมายความว่าอย่างไร

ฉันใช้@font-faceเป็นครั้งแรกและดาวน์โหลดชุดแบบอักษรจาก fontquirrel

โค้ดที่แนะนำให้ใส่ลงใน CSS ของฉันคือ:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

ตอนนี้สิ่งที่ใบหน้ายิ้มทำให้ฉันนิ่งงัน แต่จำนวน URL ใน src ก็เช่นกัน - ทำไมพวกเขาถึงแนะนำไฟล์จำนวนมากและทั้งหมดจะถูกส่งไปยังเบราว์เซอร์เมื่อมีการแสดงผลเพจหรือไม่? มีอันตรายใด ๆ ในการลบทั้งหมดยกเว้น. ttf?

ถ้าคุณอ่านโน้ตในตัวสร้างฟอนต์ของฟอนต์ - กระรอกคุณจะเห็นว่ามันเป็น gotcha ของพอลไอริช

นี่คือข้อความที่ตัดตอนมาจากโพสต์บล็อกของเขา:

และ .. เกี่ยวกับ@font-faceไวยากรณ์

ตอนนี้ฉันขอแนะนำรูปแบบสไมลี่กันกระสุนมากกว่าไวยากรณ์แบบกันกระสุนดั้งเดิม

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

จากโพสต์กันกระสุน:

ใช่มันเป็นหน้ายิ้ม ข้อมูลจำเพาะของ OpenType ระบุว่าอักขระยูนิโคดสองไบต์จะไม่สามารถใช้กับชื่อฟอนต์บน Mac ได้เลยดังนั้นจึงช่วยลดโอกาสที่จะมีคนปล่อยฟอนต์ที่มีชื่อดังกล่าวออกมาจริงๆ

มีสาเหตุสองสามประการที่ทำให้สไมลี่เป็นทางออกที่ดีกว่า:

• ซอฟต์แวร์ Webkit + Font Management อาจทำให้การอ้างอิงในท้องถิ่นยุ่งเหยิงเช่นการเปลี่ยนร่ายมนตร์เป็นบล็อก

• บน OS X ซอฟต์แวร์การจัดการฟอนต์อาจเปลี่ยนแปลงการตั้งค่าระบบเพื่อแสดงไดอะล็อกเมื่อพยายามเข้าถึงฟอนต์ในเครื่อง () ที่สามารถเข้าถึงได้ภายนอกไลบรารี / ฟอนต์ รายละเอียดเพิ่มเติมเกี่ยวกับโพสต์กันกระสุนของฉัน Font Explorer X เป็นที่รู้กันว่าทำสิ่งอื่น ๆ ใน Firefox

• แม้ว่าจะไม่น่าเป็นไปได้ แต่คุณสามารถอ้างอิงฟอนต์ local () ซึ่งแตกต่างจากที่คุณคิดอย่างสิ้นเชิง (โพสต์ Typophile บนแบบอักษรที่แตกต่างกันชื่อเดียวกัน) อย่างน้อยที่สุดก็มีความเสี่ยงและคุณกำลังยกเลิกการควบคุมประเภททั้งในเบราว์เซอร์และเครื่องโฮสต์ ความเสี่ยงนี้อาจไม่คุ้มกับประโยชน์ของการหลีกเลี่ยงการดาวน์โหลดแบบอักษร

ทั้งหมดนี้เป็นปัญหาของกรณีที่น่าสนใจ แต่ก็ควรพิจารณา

โลคัล (☺︎) เป็นการแฮ็ค css เพื่อเบี่ยงเบนความสนใจของ IE6-8 จากการดาวน์โหลดฟอนต์ที่ไม่สามารถใช้ได้ (ใช้ได้เฉพาะฟอนต์ในรูปแบบ EOT เท่านั้น)

อธิบาย: คุณสมบัติ src สุดท้ายมีความสำคัญเหนือกว่าใน CSS cascade ซึ่งหมายความว่า CSS จะถูกแยกวิเคราะห์จากล่างขึ้นบน local (☺︎) จะทำให้ IE ข้าม src ที่ด้านล่างโดยไม่ต้องเสียแบนด์วิดท์ในการดาวน์โหลดฟอนต์ที่ไม่สามารถใช้งานได้และไปที่ฟอนต์ใน.eotรูปแบบโดยตรง(กำหนดไว้ในบรรทัดด้านบนในคำถามของคุณ) ที่จะใช้ สไมลี่มีไว้เพื่อให้แน่ใจว่าจะไม่มีแบบอักษรท้องถิ่นที่มีชื่อนั้น (การผสมอักขระ)

อ่านเพิ่มเติมที่นี่: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face คุณสมบัติ src สุดท้ายมีความสำคัญเหนือกว่าใน CSS cascade ซึ่งหมายความว่า CSS จะถูกแยกวิเคราะห์จากล่างขึ้นบน