ใน Chrome @font-face local() ไม่พบแบบอักษรในเครื่อง

Google Chrome ไม่ได้ใช้แบบอักษรจากระบบภายในเครื่องและดาวน์โหลดจากเซิร์ฟเวอร์แทน แต่ Firefox ใช้แบบอักษรดังกล่าวอย่างถูกต้องจากระบบภายในเครื่อง

ดังที่ฉันเห็นใน DevTools แบบอักษรถูกดาวน์โหลดจากเซิร์ฟเวอร์: DevTools -> Computed -> Rendered แบบอักษร [img]

ใน Firefox ฉันเห็นได้ว่าเราใช้แบบอักษรในเครื่อง: FirefoxTools -> Fonts[img]

@font-face {
  font-family: 'Calibri';
  src:  local(Calibri Italic),
        local(Calibri-Italic),
        url('../fonts/calibrii.woff2') format('woff2'), 
        url('../fonts/calibrii.woff') format('woff'), 
        url('../fonts/calibrii.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

สิ่งนี้ใช้ไม่ได้หากฉันใช้ Calibri Italic (หรือ Calibri Bold, 'Calibri Italic', 'Calibri-Italic' ฯลฯ) ถ้าฉันพิมพ์ local(Calibri) ในเบราว์เซอร์ทั้งสอง แบบอักษรจะอยู่ในท้องถิ่น


google-chrome html fonts css font-face
person Artem Tarasov    schedule 07.02.2018    source แหล่งที่มา
comment
ฉันมีปัญหาเดียวกันทุกประการ (แค่ใช้แบบอักษรอื่น) จากประสบการณ์ของผมที่เกิดขึ้นบน Chrome/Windows เท่านั้น แบบอักษรในเครื่องได้รับการแก้ไขอย่างถูกต้องบน Chrome/Mac และเบราว์เซอร์อื่นๆ   -  person TMG    schedule 13.09.2018
comment
นี่เป็นปัญหาสำหรับฉันใน Chromium 73 แต่ไม่ใช่ 80   -  person binaryfunt    schedule 01.03.2020

คำตอบ (1)


arrow_upward
7
arrow_downward

Chrome มีปัญหาในการจับคู่ชื่อแบบอักษรในเครื่อง ตามที่อธิบายไว้ในรายงานข้อบกพร่องนี้ กล่าวโดยสรุป สิ่งนี้มีสาเหตุมาจากสิ่งที่เบราว์เซอร์พิจารณาว่าเป็นชื่อแบบอักษร Chrome คาดหวังชื่อ "รูท" (ในกรณีของคุณคือ Calibri) และหักออกว่าต้องใช้เวอร์ชันตัวเอียงจากกฎ @font-face ของคุณ Firefox ทำตรงกันข้าม: ค้นหาชื่อโดยตรง ความคิดเห็นนี้แสดงให้เห็นว่า

ดูเหมือนว่าวิธีหนึ่งจะใช้งานไม่ได้ใน Chrome และอีกวิธีหนึ่งใน Firefox จนกว่าข้อบกพร่องนี้จะได้รับการแก้ไข ฉันคิดว่ามันขึ้นอยู่กับคุณที่จะกำหนดพฤติกรรมของเบราว์เซอร์ที่คุณต้องการใช้งาน

person RoelN    schedule 01.04.2019
comment
เป็นไปได้ไหมถ้าใช้การอ้างอิงทั้งสองประเภทแล้วโหลดฟอนต์ไม่ว่าในกรณีใด? - person David; 03.04.2019
comment
วิธีแก้ปัญหาที่เป็นไปได้อาจเป็นการประกาศตระกูลฟอนต์สองตระกูลที่อ้างอิงถึงฟอนต์ในเครื่อง Calibri-Chrome และ Calibri-Firefox และใส่ไว้ในสแต็กฟอนต์ของคุณ จากนั้นเพิ่ม Calibri-web ตัวที่สามเมื่อโหลดทั้งคู่ไม่สำเร็จ ฉันยังไม่ได้ทดสอบสิ่งนี้ แต่ฉันคิดว่ามันสามารถทำงานแบบนั้นได้ - person RoelN; 03.04.2019