Come rilevare quale carattere definito è stato utilizzato in una pagina Web?

Supponiamo di avere la seguente regola CSS nella mia pagina:

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

Come posso rilevare quale dei caratteri definiti è stato utilizzato nel browser dell'utente?

Modifica per le persone che si chiedono perché voglio farlo: Il carattere che sto rilevando contiene glifi che non sono disponibili in altri caratteri e quando l'utente non ha il carattere voglio visualizzare un collegamento che chiede all'utente di scaricare quel carattere in modo che posso usare la mia applicazione web con il carattere corretto.

Attualmente sto visualizzando il link per il download del font per tutti gli utenti, voglio visualizzarlo solo per le persone che non hanno installato il font corretto.

L'ho visto fatto in un modo incerto, ma abbastanza affidabile. Fondamentalmente, un elemento è impostato per utilizzare un carattere specifico e una stringa è impostata su quell'elemento. Se il carattere impostato per l'elemento non esiste, prende il carattere dell'elemento genitore. Quindi, ciò che fanno è misurare la larghezza della stringa renderizzata. Se corrisponde a ciò che si aspettavano per il carattere desiderato rispetto al carattere derivato, è presente. Questo non funzionerà per i caratteri a spaziatura fissa.

Ecco da dove proviene: Javascript / CSS Font Detector (ajaxian.com; 12 marzo 2007)

Ho scritto un semplice strumento JavaScript che puoi usare per verificare se un font è installato o meno.
Usa una tecnica semplice e dovrebbe essere corretta per la maggior parte del tempo.

jFont Checker su github

@pat In realtà, Safari non fornisce il carattere utilizzato, Safari invece restituisce sempre il primo carattere nello stack indipendentemente dal fatto che sia installato, almeno per quanto riguarda la mia esperienza.

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

Supponendo che Helvetica sia quello installato / utilizzato, otterrai:

• "il mio carattere falso" in Safari (e credo che altri browser webkit).
• "il mio carattere falso, helvetica, san-serif" nei browser Gecko e IE.
• "helvetica" in Opera 9, anche se ho letto che stanno cambiando questo in Opera 10 per abbinarlo a Gecko.

Ho risolto questo problema e ho creato Font Unstack , che verifica ogni carattere in una pila e restituisce solo il primo installato. Usa il trucco menzionato da @MojoFilter, ma restituisce il primo solo se ne sono installati più. Anche se soffre della debolezza menzionata da @tlrobinson (Windows sostituirà silenziosamente Arial per Helvetica e segnalerà che Helvetica è installato), altrimenti funziona bene.

Una tecnica che funziona è guardare lo stile calcolato dell'elemento. Questo è supportato in Opera e Firefox (e lo riconosco in Safari, ma non ho testato). IE (almeno 7), fornisce un metodo per ottenere uno stile, ma sembra essere quello che era nel foglio di stile, non lo stile calcolato. Maggiori dettagli su quirksmode: Ottieni stili

Ecco una semplice funzione per afferrare il carattere utilizzato in un elemento:

/**
 * 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;
    }
}

Se la regola CSS per questo era:

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

Quindi dovrebbe restituire helvetica se è installato, in caso contrario, arial e, infine, il nome del font sans-serif predefinito del sistema. Si noti che l'ordinamento dei caratteri nella dichiarazione CSS è significativo.

Un trucco interessante che potresti anche provare è quello di creare molti elementi nascosti con molti caratteri diversi per provare a rilevare quali caratteri sono installati su una macchina. Sono sicuro che qualcuno potrebbe creare una bella pagina di raccolta di statistiche sui font con questa tecnica.

Una forma semplificata è:

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

Se hai bisogno di qualcosa di più completo, dai un'occhiata a questo .

C'è una soluzione semplice: basta usare element.style.font:

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

Questa funzione farà esattamente quello che vuoi. In esecuzione Restituirà il tipo di carattere dell'utente / browser. Spero che questo possa aiutare.

Un'altra soluzione sarebbe quella di installare automaticamente il carattere tramite il @font-facequale potrebbe negare la necessità di rilevamento.

@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");
}

Ovviamente non risolverebbe alcun problema di copyright, tuttavia potresti sempre usare un font freeware o persino creare il tuo font personale. Avrete bisogno di entrambi .eote .ttffile per funzionare al meglio.

Calibri è un font di proprietà di Microsoft e non dovrebbe essere distribuito gratuitamente. Inoltre, richiedere a un utente di scaricare un font specifico non è molto intuitivo.

Suggerirei di acquistare una licenza per il carattere e di incorporarla nella tua applicazione.

Sto usando Fount. Devi solo trascinare il pulsante Fount sulla barra dei segnalibri, fare clic su di esso e quindi fare clic su un testo specifico sul sito Web. Mostrerà quindi il carattere di quel testo.

https://fount.artequalswork.com/

È possibile utilizzare questo sito Web:

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

Fa esattamente quello che vuoi ...

È possibile inserire Adobe Blank nella famiglia di caratteri dopo il carattere che si desidera visualizzare, quindi i glifi non presenti in quel carattere non verranno visualizzati.

per esempio:

font-family: Arial, 'Adobe Blank';

Per quanto ne so, non esiste un metodo JS per dire quali glifi in un elemento vengono riprodotti da quale font nella pila di font per quell'elemento.

Ciò è complicato dal fatto che i browser hanno le impostazioni utente per i caratteri serif / sans-serif / monospace e hanno anche i loro caratteri di fallback codificati che useranno se non viene trovato un glifo in nessuno dei caratteri in un pila di font. Quindi il browser può eseguire il rendering di alcuni glifi in un font che non si trova nello stack dei font o nell'impostazione del font del browser dell'utente. Chrome Dev Tools ti mostrerà ogni carattere renderizzato per i glifi nell'elemento selezionato . Quindi sulla tua macchina puoi vedere cosa sta facendo, ma non c'è modo di dire cosa sta succedendo sulla macchina di un utente.

È anche possibile che il sistema dell'utente possa svolgere un ruolo in questo, ad esempio Window esegue la sostituzione dei caratteri a livello di glifo.

così...

Per i glifi a cui sei interessato, non hai modo di sapere se verranno resi dal browser / sistema di fallback dell'utente, anche se non hanno il carattere specificato.

Se vuoi testarlo in JS potresti renderizzare singoli glifi con una famiglia di caratteri incluso Adobe Blank e misurare la loro larghezza per vedere se è zero, MA dovresti iterare accuratamente ogni glifo e ogni carattere che vuoi testare , ma sebbene sia possibile conoscere i caratteri in una pila di caratteri degli elementi, non è possibile sapere quali caratteri sono configurati per il browser dell'utente, quindi per almeno alcuni dei tuoi utenti l'elenco dei caratteri attraverso cui si scorre è incompleto. (Non è inoltre una prova futura se nuovi caratteri escono e iniziano ad essere utilizzati.)