Come posso determinare quale tipo di carattere viene effettivamente utilizzato da un browser per eseguire il rendering del testo?

175

Il mio CSS specifica " font-family: Helvetica, Arial, sans-serif;" per l'intera pagina. Sembra che Verdana sia usato invece in alcune parti. Vorrei poterlo verificare.

Ho provato a copiare e incollare dal mio browser in Word, ma non mantiene il carattere.

C'è un modo per determinare quale tipo di carattere viene effettivamente utilizzato per una sezione di testo?

Firebug mi darà l'elenco dei caratteri come sopra [1], ma non vedo un modo per determinare quale dei caratteri viene utilizzato.

Si scopre che è stato utilizzato un elenco errato, che ha risolto il mio problema originale con Verdana. Ma sono ancora curioso di sapere se esiste un modo per identificare il carattere di rendering effettivo.

css browser fonts

— lavaturtle
fonte

stackoverflow.com/questions/845/detecting-font-in-javascript

— ajm

FontFinder e WhatFont descritti nelle risposte di seguito sono ancora modi molto rozzi per rilevare il carattere utilizzato. Entrambi hanno erroneamente indicato "Quanttrocentro Sans" (il carattere principale) quando seleziono un ؋simbolo Aghani che non è disponibile in questo carattere.

— Domanda Overflow

@QuestionOverflow, oggi Firefox e Chrome hanno strumenti integrati per determinare il carattere. Essi potranno mostrare il carattere per ogni glifo, quindi vi mostrerà ciò che tipo di carattere che è stato utilizzato per ؋ pure.

— Arjan,

@Arjan: è ancora così nel 2020?

— divorò l'elisio il

@devouredelysium, hai visto la mia risposta ? Basta selezionare un singolo glifo per vedere quale tipo di carattere viene utilizzato.

— Arjan,

50

Secondo la risposta di Wilfred Hughes , Firefox ora supporta questo in modo nativo. Questo articolo ha maggiori dettagli .

Questa risposta originale faceva riferimento al plug-in "Font Finder", ma solo perché risaliva a 4 anni fa. Il fatto che le vecchie risposte persistano in questo modo e la community non riesca ad aggiornarle è uno dei pochi errori rimanenti di Stack Overflow.

— Jeremy Kauffman
fonte

7

Nessun motivo per usarlo ora che Strumenti di Firefox> Sviluppatore Web> Ispettore> Caratteri ti dicono (risposta di Wilfred Hughes)

— skierpage

1

Sfortunatamente, Firefox 47 non ha più la scheda Font a cui fa riferimento questo blog a cui sei collegato: Questo articolo ha maggiori dettagli

— Zabba,

3

"A partire da Firefox 47, la vista Caratteri è disabilitata per impostazione predefinita. Stiamo lavorando su una sostituzione più completa. Per il momento, se vuoi vedere la vista Caratteri, visita about: config, trova le preferenze devtools. fontinspector.enabled e impostarlo su true. " Vedi developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .

— Daniel Le

1

A quanto pare, l'impostazione devtools.fontinspector.enabledè stata necessaria solo in Firefox 47: "In Firefox 47 solo , la vista Fonts è disabilitato di default Se si desidera visualizzare i font visualizzazione in Firefox 47, visita. about:config, Trovare la preferenza devtools.fontinspector.enabled, e impostarlo su truePrima e dopo. Firefox 47, la visualizzazione Font è abilitata per impostazione predefinita. " , @DanielLe.

— Arjan,

1

@DanielLe, ovviamente, ho capito che era corretto nel momento in cui hai copiato il testo :-)

— Arjan,

151

Al giorno d'oggi Chrome e Firefox dispongono di strumenti integrati per questo, ma Safari ha bisogno che tu copi del testo e lo studi.

Innanzitutto, seleziona del testo. In Firefox, Page Inspector ha una vista Font :

Questo ti dirà anche se i caratteri sono stati scaricati e quale stile viene utilizzato, come Regular, ExtraLight, Italic, BoldItalic e tutti.

Per Chrome, vai su "Elements" di DevTools, vai alla sua scheda "Calcolo" e scorri fino alla sezione chiamata "Caratteri renderizzati". A differenza di Firefox, questo mostra solo il nome del font di base, non uno stile specifico che potrebbe usare:

Le schermate sopra mostrano che potrebbero essere mostrati più caratteri per il testo Unicode. Chrome ti dice che 6 glifi ("Pekka" e lo spazio) stanno usando "Arial" e uno ("웃") sta usando "Apple SD Gothic Neo":

Arial - File locale (6 glifi)
Apple SD Gothic Neo - File locale (1 glifo)

L'attuale CSS definisce:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Ma quei caratteri spesso non includono molti caratteri speciali. Poiché le informazioni sui caratteri funzionano per elemento HTML, dove il testo Unicode in un elemento potrebbe effettivamente utilizzare più caratteri, mostra anche più caratteri. In caso di dubbi, fai doppio clic sul testo nel riquadro HTML e elimina il testo che non ti interessa. Quindi, quando selezioni di nuovo l'elemento circostante, vedrai solo un'opzione. In questo caso ti dirà che entrambi i browser hanno usato "Apple SD Gothic Neo Regular" per il carattere "웃".

Sfortunatamente, diversi browser (e persino versioni diverse di un singolo browser) sulla stessa macchina potrebbero usare caratteri diversi, a causa dei tipi di carattere supportati / preferiti da un browser. Su un Mac, ad esempio, Safari potrebbe preferire la tecnologia avanzata Apple mentre Firefox supporta Microsoft OpenType (che potrebbe causare problemi per l'arabo dopo l'installazione di Microsoft Office su un Mac). O per il carattere "웃" nelle schermate sopra, Chrome e Firefox sul mio Mac oggigiorno preferiscono "Apple SD Gothic Neo" (che è OpenType PostScript) ma le versioni precedenti di Firefox utilizzavano invece "AppleGothic Regular" (che è un carattere TrueType) .

Per i browser che non hanno una vista dei caratteri simile, è sufficiente copiare e incollare un frammento del testo in un elaboratore di testi o in un editor Rich Text, selezionare un testo specifico e vedere quale nome viene visualizzato nell'elenco a discesa dei caratteri. Sul mio Mac, questo non funziona quando si incolla da Firefox (dove per "웃" Firefox "Apple SD Gothic Neo" viene convertito in "AppleMyungjo" quando si incolla), ma funziona bene per Safari e Chrome:

— Arjan
fonte

1

Sai se Safari ha un plugin o qualcosa del genere?

— Andry,

4

In Chrome 47, assicurati di scorrere fino alla fine della sezione Computer. Espandendo l' font-familyattributo così come appare (in ordine alfabetico) non verrà visualizzato il tipo di carattere che viene caricato. Questa informazione appare in fondo.

— Merchako,

1

@Merchako, cosa succede quando il tuo carattere calcolato è un carattere generico come "serif" e "sans-serif"? Quindi come si ottiene il carattere effettivo ?

— Pacerier,

2

@Pacerier, in Chrome basta scorrere fino in fondo nella scheda Computer; in Firefox vedere la scheda separata.

— Arjan,

1

@TMG, potrei immaginare che i font web potrebbero non aver bisogno di un alias, ma possono fare riferimento direttamente ad alcuni URL. È un sito Web pubblico che possiamo consultare? In caso contrario, cosa mostra Firefox?

— Arjan,

32

Firefox 22+ ti mostrerà quale font è attualmente in uso , senza alcuna estensione.

— Wilfred Hughes
fonte

1

Questa dovrebbe davvero essere la risposta definitiva. Non è necessario installare un'estensione.

— Dan Eastwell,

ma un browser che qualcuno probabilmente non usa. Un'estensione è molto più leggera in questo senso.

— b1nary

30

WhatFont è un'estensione di Chrome che ti dirà in modo specifico quale carattere nello stack dei caratteri viene caricato.

— user1100745
fonte

6

Per me dice quale tipo di carattere viene dichiarato, ma non quale tipo di carattere viene effettivamente utilizzato.

— Panzi,

3

Secondo questo articolo ( updates.html5rocks.com/2013/09/… ), Dev Tools ora può dirti qual è il tipo di carattere visualizzato.

— yorch

WhatFont tenta di rilevare il carattere reso ma sembra non farlo con successo github.com/chengyin/WhatFont-Bookmarklet/issues/13

— Chris Marisic

7

Per le versioni correnti di Firefox (dalla v7), c'è un componente aggiuntivo chiamato "fontinfo" che riporterà il carattere effettivamente utilizzato (piuttosto che ciò che dice la proprietà della famiglia di caratteri CSS), tenendo conto dei casi in cui il browser torna a un carattere diverso perché la famiglia di caratteri richiesta non era disponibile o non supportava i caratteri utilizzati nel testo.

— Jonathan
fonte

Ormai, questa è la risposta migliore

— Ingo Kegel,

1

Puoi provare a controllare quella sezione specifica con Firebug per Firefox. Dovrebbe darti tutte le proprietà esatte.

— jeroen
fonte

Questo mi dà ancora l'elenco, non quello specifico che sta usando ... Ma su un secondo controllo, Verdana è in qualche modo entrato nell'elenco della famiglia di caratteri, che sarebbe la causa del mio problema originale. Quindi grazie.

— Lavaturtle,

1

Firebug ti dirà anche quali regole vengono attivate per dare all'elemento quel carattere, molto utile per capire dove sta andando il tuo CSS.

— RichieHindle,

Safari 4 Beta ha anche un WebInspector (potrebbe essere un firebug con skin)

— vikingosegundo,

1

Penso che otterrai sempre l'elenco completo, qualunque sia lo strumento che usi. Il tipo di carattere utilizzato è il primo dell'elenco installato sul computer.

— jeroen,

2

Firebug attualmente (1.11.4, forse anche prima) evidenzia il carattere corrente in blu.

— Mark Vrabel,

1

Il plug-in "FontFinder" menzionato da jeremy sembra non funzionare qui, dando il primo carattere dell'elenco CSS indipendentemente dal carattere effettivamente visualizzato (Firefox 4.0rc1 su Linux). Sembra che il seguente plugin ti dia il carattere "corretto".

Carattere di contesto

— Dave Vogt
fonte

Sfortunatamente, anche il carattere di contesto mostra solo la famiglia CSS calcolata, che potrebbe essere serif o sans-serif, per esempio. Inoltre, se un carattere non è presente nel carattere calcolato e il browser lo preleva da un carattere diverso, Context Font mostra ancora la famiglia di caratteri calcolata, non il carattere reale.

— Jukka K. Korpela,

0

Basandomi sull'approccio di misurazione del testo e sullo script di Lalit Patel, ho creato dei bookmarklet che possono indovinare il carattere utilizzato per il testo attualmente selezionato (o il body, se non è selezionato nulla). Sembra funzionare molto bene per me per capire quale tipo di carattere in una pila è usato! ( sans-serifTuttavia, non può dirti a cosa effettivamente mappare.)

Prendili qui: https://alanhogan.com/bookmarklets#font-stack-full

La fonte è su GitHub .

Vedi anche: questo codice , che utilizza principalmente lo stesso codice. Fai una prova con diversi paragrafi selezionati e guarda la tabella / indovina l'aggiornamento!

— Alan H.
fonte