Oppdager hvilken font ble brukt i en webside

stemmer
111

Anta at jeg har følgende CSS-regel i min side:

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

Hvordan kan jeg oppdage hvilken av de definerte fonter ble brukt i brukerens nettleser?

Edit for folk lurer på hvorfor jeg ønsker å gjøre dette: Skrift jeg oppdager inneholder glyph-er som ikke er tilgjengelig i andre skrifter og når brukeren ikke har skriften jeg vil vise en link ber brukeren om å laste ned denne skriften slik at de kan bruke min web-applikasjon med riktig font.

For tiden er jeg vise nedlastingsskrift linken for alle brukere, vil jeg bare vise denne for folk som ikke har den riktige skriften installert.

Publisert på 03/08/2008 klokken 21:42
kilden bruker
På andre språk...                            


11 svar

stemmer
60

Jeg har sett det gjort i en slags ustabil, men ganske pålitelig måte. I utgangspunktet er et element satt til å bruke et bestemt skrift og en streng er satt til det elementet. Hvis skriften satt for elementet ikke finnes, tar det skrift av den overordnede element. Så, hva de gjør, er å måle bredden på gjengitt streng. Hvis det samsvarer med det de forventet for ønsket skrift, i motsetning til den utledede skrift, er det til stede.

Her er der det kom fra: Javascript / CSS Font Detector (ajaxian.com, 12 mar 2007)

Svarte 03/08/2008 kl. 21:51
kilden bruker

stemmer
27

Jeg skrev en enkel Javascript verktøy som du kan bruke den til å kontrollere om en skrift er installert eller ikke.
Den bruker enkle teknikken og bør være riktig mesteparten av tiden.

jFont Checker på GitHub

Svarte 21/05/2011 kl. 17:58
kilden bruker

stemmer
7

Det er en enkel løsning

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

denne funksjonen vil gjøre akkurat hva du vil. På gjennomføring Det vil returnere Bruker / besøkende Nettlesere skrifttype. Håper dette vil hjelpe

Svarte 29/11/2011 kl. 08:40
kilden bruker

stemmer
7

@pat Egentlig ikke Safari ikke gi skrifttypen som brukes, Safari returnerer stedet alltid den første skriften i stabelen uavhengig av om det er installert, i hvert fall i min erfaring.

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

Forutsatt Helvetica er en installert / brukt, får du:

  • "Min falske font" i Safari (og jeg tror andre WebKit nettlesere).
  • "Min falske skrift, Helvetica, san-serif" i Gecko nettlesere og IE.
  • "Helvetica" i Opera 9, selv om jeg leste at de endrer dette i Opera 10 for å matche Gecko.

I tok et pass på dette problemet og laget Font Unstack, som tester hver skrift i en stabel og returnerer det første installerte ett eneste. Den bruker triks som @MojoFilter nevner, men bare returnerer den første hvis flere er installert. Selv om det ikke lider av den svakhet at @tlrobinson nevner (Windows vil erstatte Arial for Helvetica stille og rapporterer at Helvetica er installert), det ellers fungerer godt.

FontUnstack

Svarte 20/05/2009 kl. 10:57
kilden bruker

stemmer
6

En forenklet form er:

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

Hvis du trenger noe mer komplett, sjekk dette ut.

Svarte 23/10/2011 kl. 13:32
kilden bruker

stemmer
6

En teknikk som fungerer er å se på den beregnede stil av elementet. Dette støttes i Opera og Firefox (og jeg recon i safari, men har ikke testet). IE (7 minst), gir en metode for å få en stil, men det synes å være det som var i stilarket, ikke den beregnede stil. Flere detaljer om quirksmode: Få Styles

Her er en enkel funksjon for å hente den skrift som brukes i et element:

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

Hvis CSS-regel for dette var:

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

Da bør den komme tilbake helvetica hvis det er installert, hvis ikke, arial, og til slutt, navnet på systemets standard sans-serif font. Merk at bestilling av skrifter i CSS erklæring er betydelig.

En interessant hack du kan også prøve å skape massevis av skjulte elementer med mange forskjellige skrifttyper for å prøve å avdekke hvilke skrifter som er installert på en maskin. Jeg er sikker på at noen kunne gjøre en kjekk liten skrift statistikk samlingsside med denne teknikken.

Svarte 25/08/2008 kl. 22:16
kilden bruker

stemmer
5

En annen løsning ville være å installere skriften automatisk via @font-facesom kan oppheve behovet for gjenkjenning.

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

Selvfølgelig er det ikke ville løse eventuelle opphavsrettslige spørsmål, men du kan alltid bruke et freeware font eller lage din egen skrift. Du trenger begge .eotog .ttffiler for å fungere best.

Svarte 05/01/2012 kl. 11:19
kilden bruker

stemmer
2

Calibri er en skrift som eies av Microsoft, og skal ikke distribueres gratis. Dessuten krever en bruker til å laste ned en bestemt skrift er ikke svært brukervennlig.

Jeg foreslår at du kjøper en lisens for skrift og bygge det inn i applikasjonen.

Svarte 14/11/2012 kl. 18:56
kilden bruker

stemmer
1

Du kan bruke denne nettsiden:

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

Det gjør akkurat hva du vil ...

Svarte 11/04/2015 kl. 20:41
kilden bruker

stemmer
0

Du kan sette Adobe Blank i font-family etter skriften du ønsker å se, og deretter noen symboler ikke i at skriften ikke vil bli gjengitt.

f.eks:

font-family: Arial, 'Adobe Blank';

Så vidt jeg er klar over det er ingen JS metode for å fortelle hvilke symboler i et element blir gjengitt av som skrift i skriften stabelen for dette elementet.

Dette er komplisert av det faktum at nettlesere har brukerinnstillinger for serif / sans-serif / Monospace skrifttyper og de har også sine egne hardkodede fall-back skrifter som de vil bruke hvis en tegnvariant ikke er funnet i noen av skriftene i en skrift stabel. Så leseren kan gjøre noen symboler i en skrift som ikke er i skriften stabel eller brukerens nettleser skriftinnstillingen. Chrome Dev Tools vil vise deg hver gjengis font for tegnvariantene i det valgte elementet . Så på din maskin kan du se hva det gjør, men det er ingen måte å fortelle hva som skjer på brukerens maskin.

Det er også mulig brukerens system kan spille en rolle i dette som f.eks Window gjør skrifterstatning på glyph nivå.

så...

For tegnvariantene du er interessert i, har du ingen måte å vite om de vil bli gjort av brukerens nettleser / system fallback, selv om de ikke har skriften du angir.

Hvis du ønsker å teste den i JS du kan gjengi enkelte symboler med en font-family inkludert Adobe Blank og måle bredde for å se om det er null, men du må gjenta grundig hver glyph og hver skrift du ønsket å teste , men selv om du kan kjenne skriftene i en elementer skrift stabelen er det ingen måte å vite hvilke skrifter brukerens nettleser er konfigurert til å bruke det i det minste noen av brukerne på listen over skriftene du veksle gjennom vil være ufullstendig. (Det er heller ikke fremtidsrettet om nye fonter komme ut og begynne å bli vant.)

Svarte 30/11/2017 kl. 10:58
kilden bruker

stemmer
0

Jeg bruker Fount. Du trenger bare å dra Fount knappen til bokmerkelinjen, klikk på den og klikk deretter på en bestemt tekst på nettsiden. Det vil da vise skriften av teksten.

https://fount.artequalswork.com/

Svarte 13/03/2017 kl. 04:31
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more