จะตรวจสอบว่าใช้แบบอักษรใดตัวหนึ่งในหน้าเว็บได้อย่างไร

138

สมมติว่าฉันมีกฎ CSS ต่อไปนี้ในหน้าของฉัน:

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

ฉันจะตรวจสอบว่าใช้แบบอักษรตัวใดตัวหนึ่งในเบราว์เซอร์ของผู้ใช้ได้อย่างไร

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

ขณะนี้ฉันกำลังแสดงลิงค์แบบอักษรดาวน์โหลดสำหรับผู้ใช้ทั้งหมดฉันต้องการแสดงเฉพาะสำหรับผู้ที่ไม่มีแบบอักษรที่ถูกต้องติดตั้ง

— ตบเบา ๆ
แหล่งที่มา

2

สิ่งหนึ่งที่ต้องจำไว้คือเบราว์เซอร์บางตัวจะแทนที่แบบอักษรที่หายไปบางส่วนด้วยแบบอักษรที่เหมือนกันซึ่งไม่สามารถตรวจจับได้โดยใช้เคล็ดลับ JavaScript / CSS ตัวอย่างเช่นเบราว์เซอร์ Windows จะแทนที่ Arial สำหรับ Helvetica หากยังไม่ได้ติดตั้ง เคล็ดลับ MojoFilter และ dragonmatank ดังกล่าวจะยังคงรายงานว่ามีการติดตั้ง Helvetica แม้ว่าจะไม่ใช่ก็ตาม

— tlrobinson

13

ข้อควรระวังข้อควรระวัง: หากคุณเสนอลิงค์สำหรับดาวน์โหลด Calibri โปรดทราบว่าแม้ว่าจะรวมอยู่ในผลิตภัณฑ์ Microsoft หลายตัว แต่ไม่ใช่แบบอักษรฟรีและคุณละเมิดลิขสิทธิ์โดยเสนอให้ดาวน์โหลด

— Adam Hepton

72

ฉันเคยเห็นมันทำในรูปแบบของ iffy แต่วิธีที่เชื่อถือได้สวย โดยทั่วไปองค์ประกอบถูกตั้งค่าให้ใช้แบบอักษรเฉพาะและสตริงถูกตั้งค่าเป็นองค์ประกอบนั้น หากไม่มีการตั้งค่าแบบอักษรสำหรับองค์ประกอบจะใช้แบบอักษรขององค์ประกอบหลัก ดังนั้นสิ่งที่พวกเขาทำคือการวัดความกว้างของสตริงการแสดงผล หากตรงกับสิ่งที่คาดหวังสำหรับแบบอักษรที่ต้องการซึ่งตรงข้ามกับแบบอักษรที่ได้รับแสดงว่าเป็นแบบนั้น สิ่งนี้จะไม่ทำงานสำหรับแบบอักษรที่มีการเลื่อนอย่างเดียว

นี่คือที่มาจาก: Javascript / CSS Font Detector (ajaxian.com; 12 Mar 2007)

— MojoFilter
แหล่งที่มา

2

อีกวิธีที่ใช้measureTextจากcanvasองค์ประกอบ: github.com/Wildhoney/DetectFont

— Wildhoney

33

ฉันเขียนเครื่องมือ JavaScript ง่ายๆที่คุณสามารถใช้เพื่อตรวจสอบว่ามีการติดตั้งแบบอักษรหรือไม่
มันใช้เทคนิคง่าย ๆ และควรแก้ไขให้ถูกต้องตลอดเวลา

jFont Checkerบน github

— ดีเร็ก朕會功夫
แหล่งที่มา

2

การตรวจจับแบบอักษรไม่สามารถแก้ปัญหาได้ คุณสามารถใช้เพื่อย้ำคิดว่าแบบอักษรที่ประกาศและตรวจสอบสิ่งที่ถูกต้อง แต่มันให้ข้อมูลเพียงเล็กน้อยหรือไม่มีเลยเกี่ยวกับแบบอักษรที่จะใช้สำหรับกองใดก็ตาม หากคุณสร้าง div จาก JS เราจะทราบได้อย่างไรว่าใช้แบบอักษรใด

— Jon Lennart Aasenden

1

@JonLennartAasenden เพื่อให้ได้ตัวอักษรที่ใช้ฉันเชื่อว่าคุณสามารถใช้คุณสมบัติ "computedStyle" (ฉันลืมชื่อที่แน่นอน แต่มันเป็นอย่างนั้น)

— Derek 朕會功夫

1

ฉันเขียนคลาสที่ใช้งานได้กับเบราว์เซอร์ทั้งหมด มันเขียนใน Smart Pascal ซึ่งรวมกับ JS ดังนั้นฉันลาดเทโพสต์วิธีแก้ปัญหาที่นี่ - แต่ในระยะสั้นฉันต้องแยกสตริงแบบอักษรตระกูลแล้วตรวจสอบว่าแต่ละแบบอักษรถูกต้องคว้าตัวแรกที่ถูกต้อง - และที่ ทำงานได้ทุกที่ ฉันส่งต่อ "เครื่องตรวจจับแบบอักษร" ไปที่ปาสกาลแบบชาญฉลาดและปรับแต่งบางอย่าง

— Jon Lennart Aasenden

1

@JonLennartAasenden มันไม่ได้เสียงเหมือนชั้นเรียนของคุณจะเข้าใจผิดได้ เบราว์เซอร์จะตรวจสอบแบบอักษรแต่ละตัวตามลำดับความสำคัญที่กำหนดหากติดตั้ง แต่บางครั้งจะเลือกใช้แบบอักษรที่มีลำดับความสำคัญต่ำกว่าในรายการหากแบบอักษรที่ติดตั้งลำดับความสำคัญสูงกว่านั้น

— Brandon Elliott

10

@pat ที่จริงแล้ว Safari ไม่ได้ให้ฟอนต์ที่ใช้ Safari แทนการส่งคืนฟอนต์แรกในสแต็กเสมอไม่ว่าจะติดตั้งไว้หรือไม่ก็ตามอย่างน้อยก็ในประสบการณ์ของฉัน

font-family: "my fake font", helvetica, san-serif;

สมมติว่า Helvetica เป็นอุปกรณ์ที่ติดตั้ง / ใช้แล้วคุณจะได้รับ:

"แบบอักษรปลอมของฉัน" ใน Safari (และฉันเชื่อว่าเว็บเบราว์เซอร์อื่น ๆ )
"แบบอักษรปลอมของฉัน, helvetica, san-serif" ในเบราว์เซอร์ Gecko และ IE
"helvetica" ใน Opera 9 แม้ว่าฉันจะอ่านว่าพวกเขากำลังเปลี่ยนแปลงสิ่งนี้ใน Opera 10 เพื่อให้ตรงกับ Gecko

ฉันผ่านปัญหานี้ไปและสร้างFont Unstackซึ่งทดสอบแบบอักษรแต่ละตัวในสแต็กและคืนค่าแบบแรกที่ติดตั้งเท่านั้น มันใช้เคล็ดลับที่ @MojoFilter กล่าวถึง แต่จะส่งกลับครั้งแรกถ้ามีการติดตั้งหลาย แม้ว่าจะได้รับผลกระทบจากจุดอ่อนที่ @tlrobinson กล่าวถึง (Windows จะแทนที่ Arial สำหรับ Helvetica อย่างเงียบ ๆ และรายงานว่าติดตั้ง Helvetica) แต่ก็ใช้งานได้ดี

— philoye
แหล่งที่มา

9

เทคนิคที่ใช้งานได้คือการดูรูปแบบการคำนวณขององค์ประกอบ สิ่งนี้ได้รับการสนับสนุนใน Opera และ Firefox (และฉันกลับมาใช้งานซาฟารีใหม่ แต่ยังไม่ได้ทดสอบ) IE (อย่างน้อย 7) ให้วิธีการรับสไตล์ แต่ดูเหมือนว่าจะเป็นอะไรก็ตามที่อยู่ในสไตล์ชีทไม่ใช่สไตล์ที่คำนวณ รายละเอียดเพิ่มเติมเกี่ยวกับ quirksmode: รับสไตล์

นี่เป็นฟังก์ชั่นง่ายๆในการหยิบแบบอักษรที่ใช้ในองค์ประกอบ:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

หากกฎ CSS สำหรับสิ่งนี้คือ:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

จากนั้นควรส่งคืน helvetica หากมีการติดตั้งถ้าไม่ใช่ arial และสุดท้ายคือชื่อของฟอนต์ sans-serif ดีฟอลต์ของระบบ โปรดทราบว่าการเรียงลำดับแบบอักษรในการประกาศ CSS ของคุณมีความสำคัญ

การแฮ็คที่น่าสนใจที่คุณอาจลองทำก็คือการสร้างองค์ประกอบที่ซ่อนอยู่มากมายพร้อมด้วยฟอนต์ที่แตกต่างกันจำนวนมากเพื่อลองตรวจสอบว่ามีการติดตั้งฟอนต์ใดบ้างบนเครื่อง ฉันแน่ใจว่าบางคนสามารถสร้างสถิติตัวอักษรที่ดีได้ด้วยการใช้เทคนิคนี้

— runeh
แหล่งที่มา

6

ส่งคืนสตริงแบบเต็มของ css เช่น "Helvetica, Arial, sans-serif" มันจะไม่ส่งคืนแบบอักษรที่ใช้จริง

— Tom Kincaid

8

รูปแบบที่เรียบง่ายคือ:

function getFont() {
    return document.getElementById('header').style.font;
}

หากคุณต้องการอะไรที่สมบูรณ์กว่านี้ลองดูสิ

— Facebiz
แหล่งที่มา

8

มีวิธีแก้ปัญหาง่าย ๆ เพียงใช้element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

ฟังก์ชั่นนี้จะทำสิ่งที่คุณต้องการ ในการดำเนินการมันจะส่งคืนประเภทตัวอักษรของผู้ใช้ / เบราว์เซอร์ หวังว่าจะช่วยได้

— Naeem Ul Wahhab
แหล่งที่มา

ฉันกำลังลองสิ่งนี้ใน Safari ในองค์ประกอบที่มีแบบอักษร Arial และฉันได้รับเป็นแบบอักษร "" ความคิดใด ๆ ว่าทำไม?

— Alessandro Vermeulen

สาเหตุที่เป็นไปได้มากที่สุดคือการตรวจสอบชุดแบบอักษรเท่านั้นและหากไม่มีชุดแบบอักษรอาจใช้แบบอักษร Arial เป็นแบบอักษร

— Josiah

1

@AlessandroVermeulen เป็นเพราะ element.style จะส่งกลับเฉพาะค่าที่ตั้งไว้ในแอตทริบิวต์ของสไตล์เท่านั้นและจะไม่ส่งคืนค่าใด ๆ จากที่อื่น (เช่นค่าจากองค์ประกอบของสไตล์ css ภายนอกหรือค่าเริ่มต้นของตัวแทนผู้ใช้จะไม่ได้รับคืน) คำตอบนี้ควรถูกลบเพราะมันทำให้เข้าใจผิด / ไม่ถูกต้อง ไม่น่าเชื่อว่ามันจะได้รับรางวัล!

— brennanyoung

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

— gojun

7

อีกวิธีคือติดตั้งฟอนต์อัตโนมัติผ่าน@font-faceซึ่งอาจลบล้างความต้องการในการตรวจจับ

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

แน่นอนว่ามันจะไม่แก้ปัญหาลิขสิทธิ์ใด ๆ อย่างไรก็ตามคุณสามารถใช้แบบอักษรฟรีแวร์หรือสร้างแบบอักษรของคุณเองได้ คุณจะต้องทั้ง.eot& .ttfไฟล์ทำงานได้ดีที่สุด

— PaulnOZ
แหล่งที่มา

3

Calibri เป็นฟอนต์ที่ Microsoft เป็นเจ้าของและไม่ควรแจกจ่ายฟรี นอกจากนี้การกำหนดให้ผู้ใช้ดาวน์โหลดแบบอักษรเฉพาะนั้นไม่ได้ใช้งานง่ายนัก

ฉันขอแนะนำให้ซื้อใบอนุญาตสำหรับแบบอักษรและฝังลงในใบสมัครของคุณ

— Mark Kimitch
แหล่งที่มา

3

+1 สำหรับการฝังแบบอักษร วิธีนี้ช่วยแก้ปัญหาโดยไม่ต้องตรวจจับอะไร

— Andrew Grothe

1

ฉันขอแนะนำให้ตรวจสอบGoogle แบบอักษรสำหรับสิ่งที่คล้ายกันก่อนที่จะซื้ออะไร

— OJFord

ยกเว้นว่าหากผู้ใช้อยู่ในเครื่อง windows พวกเขาสามารถดู Calibri นี่คือจุดทั้งหมดของรายการทางเลือก

— dudewad

1

และคำตอบของคุณไม่เกี่ยวข้องกับคำถามและควรเป็นความคิดเห็น

— dudewad

2

ฉันใช้ Fount คุณเพียงแค่ต้องลากปุ่ม Fount ไปยังแถบบุ๊คมาร์คของคุณคลิกที่มันแล้วคลิกที่ข้อความเฉพาะบนเว็บไซต์ จากนั้นจะแสดงแบบอักษรของข้อความนั้น

https://fount.artequalswork.com/

— Woppi
แหล่งที่มา

2

คุณสามารถใช้เว็บไซต์นี้:

http://website-font-analyzer.com/

มันทำสิ่งที่คุณต้องการ ...

— user2267379
แหล่งที่มา

1

คุณสามารถใส่Adobe Blankในฟอนต์ตระกูลหลังจากฟอนต์ที่คุณต้องการดูแล้วร่ายมนตร์ที่ไม่อยู่ในฟอนต์นั้นจะไม่ถูกเรนเดอร์

เช่น:

font-family: Arial, 'Adobe Blank';

เท่าที่ฉันทราบไม่มีวิธี JS ที่จะบอกว่าร่ายมนตร์ในองค์ประกอบจะถูกแสดงผลโดยตัวอักษรใดในสแต็คแบบอักษรสำหรับองค์ประกอบนั้น

สิ่งนี้มีความซับซ้อนเนื่องจากเบราว์เซอร์มีการตั้งค่าผู้ใช้สำหรับฟอนต์ serif / sans-serif / monospace และพวกเขายังมีฟอนต์ถอยกลับแบบตายตัวที่กำหนดเองซึ่งพวกเขาจะใช้หากไม่พบ glyph ในฟอนต์ใด ๆ กองอักษร ดังนั้นเบราว์เซอร์อาจแสดงร่ายมนตร์บางอย่างในแบบอักษรที่ไม่ได้อยู่ในสแต็กแบบอักษรหรือการตั้งค่าแบบอักษรของเบราว์เซอร์ของผู้ใช้ Chrome Dev เครื่องมือจะแสดงให้คุณแต่ละตัวอักษรแสดงผลสำหรับร่ายมนตร์ในองค์ประกอบที่เลือก ดังนั้นในเครื่องของคุณคุณสามารถเห็นสิ่งที่กำลังทำอยู่ แต่ไม่มีวิธีที่จะบอกได้ว่าเกิดอะไรขึ้นบนเครื่องของผู้ใช้

นอกจากนี้ยังเป็นไปได้ว่าระบบของผู้ใช้อาจมีส่วนร่วมในเรื่องนี้เช่นหน้าต่างแทนตัวอักษรในระดับสัญลักษณ์

ดังนั้น...

สำหรับสัญลักษณ์ที่คุณสนใจคุณไม่มีทางรู้ว่าเบราว์เซอร์ / ระบบสำรองข้อมูลของผู้ใช้จะแสดงผลหรือไม่แม้ว่าพวกเขาจะไม่มีแบบอักษรที่คุณระบุก็ตาม

หากคุณต้องการที่จะทดสอบใน JS คุณอาจทำให้ร่ายมนตร์บุคคลที่มี font-family รวมถึง Adobe ที่ว่างเปล่าและวัดความกว้างของพวกเขาเพื่อดูว่ามันเป็นศูนย์แต่คุณจะต้องย้ำอย่างละเอียดในแต่ละสัญลักษณ์และตัวอักษรที่คุณต้องการที่จะทดสอบแต่ละ , แต่ถึงแม้ว่าคุณสามารถรู้แบบอักษรในองค์ประกอบแบบอักษรสแต็คองค์ประกอบไม่มีวิธีที่จะรู้ว่าแบบอักษรที่เบราว์เซอร์ของผู้ใช้มีการกำหนดค่าให้ใช้ดังนั้นอย่างน้อยผู้ใช้บางรายรายการแบบอักษรที่คุณทำซ้ำจะไม่สมบูรณ์ (ไม่เป็นข้อพิสูจน์ในอนาคตหากมีแบบอักษรใหม่ออกมาและเริ่มใช้งานได้)

— Sam Hasler
แหล่งที่มา