Hoe om op te spoor watter een van die gedefinieerde lettertipe is gebruik in'n web bladsy?

StackOverflow https://stackoverflow.com/questions/845

  •  08-06-2019
  •  | 
  •  

Vra

Veronderstel ek het die volgende CSS reël in my bladsy:

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

Hoe kan ek spoor watter een van die gedefinieerde fonts gebruik word in die gebruiker se leser?

Wysig vir mense wonder hoekom ek wil hê om dit te doen: Die skrif wat ek opsporing bevat than se dit is nie beskikbaar in ander fonts en wanneer die gebruiker het nie die skrif wat ek wil om te wys'n skakel vra die gebruiker om af te laai dat die skrif sodat hulle kan gebruik om my web aansoek met die korrekte skrif.

Tans is ek die vertoon van die aflaai font skakel vir alle gebruikers, ek wil net wys dit vir mense wat nie het nie die korrekte skrif geïnstalleer.

Was dit nuttig?

Oplossing

Ek het gesien dat dit gedoen in'n soort van iffy, maar redelik betroubare manier.Basies, 'n element is, stel die gebruik van'n spesifieke lettertipe en'n string is ingestel om daardie element.As die skrif stel vir die element wat nie bestaan nie, neem dit die font van die ouer element.So, wat hulle doen, is om te meet die breedte van die gelewer string.As dit ooreenstem met wat hulle verwag vir die gewenste font eerder as om die afgelei font, dit is teenwoordig.Dit sal nie werk vir monospaced fonts.

Hier is waar dit vandaan kom:Javascript/CSS Font Detector (ajaxian.com;12 Mar 2007)

Ander wenke

Ek het 'n eenvoudige JavaScript hulpmiddel wat jy dit kan gebruik om te kyk of 'n skrif nie geïnstalleer is of.
Dit maak gebruik van eenvoudige tegniek en korrek moet wees die meeste van die tyd.

jFont Checker op GitHub

@pat Eintlik Safari nie die skrif tipe gebruik word gee, Safari die eerste skrif in die stapel terug plaas altyd ongeag of dit geïnstalleer is, ten minste in my ervaring. 

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

Die aanvaarding van Helvetica is die een geïnstalleer / gebruik, sal jy kry:

  • "my vals font" in Safari (en ek glo ander WebKit blaaiers).
  • "my vals font, helvetica, San-serif" in Gecko blaaier en Internet Explorer.
  • "helvetica" in Opera 9, al het ek gelees dat hulle hierdie verander in Opera 10 aan te pas Gecko.

Ek het 'n slaag op hierdie probleem en geskep Font Unstack , wat elke toets font in 'n stapel en gee die eerste geïnstalleer net een. Dit maak gebruik van die truuk wat @MojoFilter noem, maar net gee die eerste een as verskeie geïnstalleer. Alhoewel dit nie ly aan die swakheid wat @tlrobinson noem (Windows sal vervang Arial vir Helvetica stil en rapporteer dat Helvetica geïnstalleer), dit andersins goed werk.

'n vereenvoudigde vorm is: 

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

As jy iets meer volledige nodig, kyk hierdie uit.

'n tegniek wat werk is om te kyk na die berekende styl van die element. Dit word ondersteun in Opera en Firefox (en ek Recon in safari, maar het nie getoets). Internet Explorer (7 ten minste), bied 'n metode om 'n styl te kry, maar dit blyk te wees wat ook al was in die style, nie die berekende styl. Meer besonderhede oor quirksmode: Kry Styles

Hier is 'n eenvoudige funksie om die skrif tipe gebruik word in 'n element gryp: 

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

As die CSS reël hiervoor was: 

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

Dan moet dit helvetica terugkeer as dit geïnstalleer is, indien nie, Arial, en laastens, die naam van die stelsel verstek sans-serif font. Let daarop dat die bestelling van fonts in jou CSS verklaring is betekenisvol.

'n Interessante hack jy kan ook probeer om baie van die verborge elemente met baie verskillende fonts te skep om te probeer om op te spoor wat fonts op 'n masjien geïnstalleer. Ek is seker iemand kan 'n handige font statistieke byeenkoms bladsy maak met hierdie tegniek.

Nog 'n oplossing sou wees om die skrif outomaties installeer via @font-face wat die behoefte vir die opsporing kan ontken. 

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

Natuurlik is dit nie enige kopiereg kwessies sal los, maar jy kan altyd 'n freeware font of selfs jou eie skrif. Jy sal beide .eot & .ttf lêers nodig om die beste werk.

Daar is 'n eenvoudige oplossing - net gebruik element.style.font: 

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

Hierdie funksie sal presies doen wat jy wil. Op uitvoering Dit sal die skrif tipe van die gebruiker / leser terugkeer. Hoop dit sal help.

Calibri is 'n font wat besit word deur Microsoft, en moet nie versprei gratis. Ook, wat 'n gebruiker aan 'n spesifieke lettertipe laai is nie baie gebruikersvriendelik.

Ek stel voor die aankoop van 'n lisensie vir die font en inbedding dit in jou aansoek.

Ek gebruik Fount. Jy moet net die Fount knoppie te sleep om jou boekmerke bar, kliek op dit en klik dan op 'n spesifieke teks op die webwerf. Dit sal dan die font van die teks wys.

https://fount.artequalswork.com/

Jy kan die webwerf gebruik:

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

Dit doen presies wat jy wil hê ...

Jy kan Adobe Blank sit in die font-family na die font wat jy wil sien, en dan enige karakters nie in daardie skrif sal nie gelewer word.

Bv:. 

font-family: Arial, 'Adobe Blank';

Sover ek weet is daar geen JS metode om te vertel wat karakters in 'n element word gelewer deur wat skrif in die skrif stapel vir daardie element.

Dit is bemoeilik deur die feit dat blaaiers het gebruikers instellings vir serif / sans-serif / mono fonts en hulle het ook hul eie harde-gekodeerde terugval fonts wat hulle sal gebruik as 'n Than nie gevind in enige van die fonts in 'n skrif stapel. So leser kan 'n paar karakters in 'n skrif wat nie in die skrif stapel of leser font stel die gebruiker se lewer. Chrome Dev Tools sal jou wys elke gelewer font vir die karakters in die gekose element . So op jou rekenaar wat jy kan sien wat dit doen nie, maar daar is geen manier om te vertel wat gebeur op masjien 'n gebruiker se.

Dit is ook moontlik stelsel die gebruiker se mag 'n deel as bv speel in hierdie Venster doen Font Vervanging by die Than vlak .

so ...

Vir die karakters wat jy in belangstel, jy het geen manier om te weet of hulle sal gelewer word deur die leser / stelsel nood die gebruiker se, selfs al is hulle nie die skrif wat jy spesifiseer nie.

As jy wil om dit te toets in JS jy kan individuele karakters met 'n font-family lewer insluitend Adobe Blank en meet hul breedte om te sien of dit is nul, MAAR jy wil hê om te herhaal deeglike elke Than en elke font jy wil toets, maar alhoewel jy die fonts in 'n elemente font stapel kan weet dat daar is geen manier om te weet wat skriftipes leser die gebruiker se is ingestel om so te gebruik vir ten minste 'n paar van jou gebruikers die lys van fonts jy Itereer deur sal onvolledig wees. (Dit is ook nie die toekoms bewys as nuwe fonts uit te kom en begin gewoond raak.)

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top