Come rilevare che uno dei font è stato utilizzato in una pagina web?

Question

Supponiamo di avere la seguente regola CSS nella mia pagina:

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

Come posso rilevare che uno dei font è stato utilizzato nel browser dell'utente?

Edit per gente che si chiede perché voglio fare questo: Il font sto rilevando contiene icona che non sono disponibili in altri tipi di carattere e quando l'utente non è il tipo di carattere che si desidera visualizzare un link che chiede all'utente di scaricare il font in modo da poter utilizzare la mia applicazione web con il tipo di carattere corretto.

Attualmente sto visualizzando il font download link per tutti gli utenti, voglio visualizzare solo questo per le persone che non hanno il tipo di carattere corretto.

Answer 1

Io l'ho visto fare in una sorta di incerto, ma abbastanza affidabile.In sostanza, un elemento è impostato per utilizzare un tipo di carattere specifico e una stringa è impostato su tale elemento.Se il set di caratteri per l'elemento non esiste, assume il carattere dell'elemento padre.Quindi, cosa si può fare è misurare la larghezza della resa stringa.Se corrisponde a quello previsto per il tipo di carattere desiderato in contrapposizione al carattere derivato, è presente.Questo non funziona per i font tipografici.

Ecco da dove è venuto:Javascript/CSS Font Rivelatore (ajaxian.com;12 Mar 2007)

Answer 2

Ho scritto un semplice JavaScript strumento che è possibile utilizzare per verificare se un font è installato o non è.
Esso utilizza la tecnica semplice e dovrebbe essere corretta la maggior parte del tempo.

jFont Correttore su github

Answer 3

@pat, in Realtà, Safari non dare il tipo di carattere utilizzato, Safari, invece, restituisce sempre il primo carattere in pila, indipendentemente se si è installato, almeno nella mia esperienza.

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

Supponendo Helvetica è quello installato/utilizzato, si ottiene:

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

Ho preso un passaggio a questo problema e ha creato Font Unstack, che le prove di ogni tipo di carattere in una pila e restituisce il primo installato uno solo.Usa il trucco che @MojoFilter menziona, ma restituisce solo il primo, se più sono installati.Anche se non soffrono di debolezza che @tlrobinson cita (Windows sostituisce Arial, Helvetica silenzio e la relazione che l'Helvetica è installato), altrimenti funziona bene.

Answer 4

Una forma semplificata è:

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

Se avete bisogno di qualcosa di più completo, di controllo questo out.

Answer 5

Una tecnica che funziona è quello di guardare il calcolate stile dell'elemento.Questo è supportato in Opera e Firefox (e I recon in safari, ma non ho testato).IE (7 almeno), fornisce un metodo per ottenere un stile, ma sembra essere tutto ciò che era nel foglio di stile, non calcolato di stile.Ulteriori dettagli su quirksmode: Ottenere Stili

Ecco una semplice funzione per afferrare il tipo di 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 è stato:

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

Poi dovrebbe tornare helvetica, se installato, se non, arial, e, infine, il nome di default del sistema sans-serif.Nota che l'ordine di font nel CSS dichiarazione è significativo.

Un interessante hack si potrebbe anche provare a creare un sacco di elementi nascosti con un sacco di diversi tipi di carattere per cercare di individuare quali font sono installati su una macchina.Sono sicuro che qualcuno potrebbe fare un bel carattere la raccolta delle statistiche di pagina con questa tecnica.

Answer 6

Un'altra soluzione sarebbe quella di installare il tipo di carattere automaticamente via @font-face che potrebbe negare la necessità per il 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");
}

Naturalmente non risolvere eventuali problemi di copyright, tuttavia si può sempre utilizzare un freeware font o anche fare il vostro proprio tipo di carattere.Avrete bisogno di entrambi .eot & .ttf file per funzionare al meglio.

Answer 7

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

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

Questa funzione esattamente fare quello che vuoi.L'esecuzione verrà restituito il tipo di carattere dell'utente/navigatore.Spero che questo vi aiuterà.

Answer 8

Calibri è un tipo di carattere di proprietà di Microsoft, e non dovrebbe essere distribuito gratuitamente.Inoltre, richiedere all'utente di scaricare un font specifico non è molto user-friendly.

Vorrei suggerire l'acquisto di una licenza per il tipo di carattere e incorporarlo nella vostra applicazione.

Answer 9

Sto usando Fonte.Basta trascinare la Fonte pulsante barra dei segnalibri, fare clic su di esso e quindi fare clic su un testo specifico sul sito web.Si mostrerà quindi il tipo di carattere del testo.

https://fount.artequalswork.com/

Answer 10

È possibile utilizzare questo sito :

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

Fa esattamente quello che vuoi...

Answer 11

Si può mettere Adobe Vuoto font-family dopo il tipo di carattere che si desidera vedere, e quindi qualsiasi glifi non in quel tipo di carattere non sono resi.

ad esempio:

font-family: Arial, 'Adobe Blank';

Per quanto ne so non c'è nessun JS metodo per comunicare i glifi di un elemento di rendering da che tipo di carattere in carattere stack per quell'elemento.

Questo è complicato dal fatto che i browser hanno le impostazioni utente per serif/font sans-serif/font a spaziatura fissa e hanno anche loro hard-coded fall-back font che usi se un glifo non viene trovato in uno qualsiasi dei caratteri di un font stack. Così browser possono rendere alcuni glifi in un tipo di carattere che non è nel carattere di stack o il browser dell'utente impostazione del tipo di carattere. Chrome Dev Tools vi mostrerà ogni rendering dei font per i glifi nell'elemento selezionato.Così sul pc, si può vedere cosa si sta facendo, ma non c'è modo di raccontare ciò che sta accadendo sulla macchina di un utente.

E ' anche possibile che l'utente del sistema può svolgere un ruolo in questo, come ad esempio Finestra di Sostituzione dei Font il glifo livello.

quindi...

Per i glifi che si sono interessati, non hai modo di sapere se si sarà visualizzato dal browser dell'utente/sistema di fallback, anche se non hanno il tipo di carattere specificato.

Se volete provarlo in JS si potrebbe rendere i singoli glifi con un font-family tra cui Adobe Vuoto e misurare la loro larghezza per vedere se è zero, MA devi scorrere approfondita ogni icona e ogni carattere che si è voluto verificare, ma anche se è possibile sapere il font in un elemento di carattere stack non c'è modo di sapere quali tipi di carattere, il browser dell'utente è configurato per l'utilizzo di almeno alcuni dei vostri utenti l'elenco dei tipi di carattere scorrere sarà incompleta.(Non è anche a prova di futuro se nuovi font di uscire e iniziare a utilizzare.)