Oppdager hvilken font ble brukt i en webside

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.

@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

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

En forenklet form er:

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

Hvis du trenger noe mer komplett, sjekk dette ut.

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

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.

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.

Du kan bruke denne nettsiden:

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

Det gjør akkurat hva du vil ...

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/

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.)

Du kan implementere CSS skrifter i HTML

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the WOFF format (only supports EOT format).</p>

</body>
</html>