Vă mulțumim pentru susținere

Detectarea fontului utilizat într-o pagină web

Să presupunem că în pagina mea există următoarea regulă CSS:

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

Cum pot detecta care dintre fonturile definite a fost folosit în browserul utilizatorului?

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

În prezent afișez link-ul de descărcare pentru toți utilizatorii, vreau să afișez acest lucru doar pentru persoanele care nu au instalat fontul corect.

0
adăugat editat
Un lucru de retinut este ca unele browsere vor inlocui anumite fonturi lipsa cu fonturi similare, ceea ce este imposibil de detectat folosind trucul JavaScript / CSS. De exemplu, browserele Windows vor înlocui Arial pentru Helvetica dacă nu sunt instalate. Trucul MojoFilter și dragonmatank menționate vor mai raporta că Helvetica este instalată, chiar dacă nu este.
adăugat autor tlrobinson
O mică notă de prudență: Dacă oferiți un link pentru a descărca Calibri, rețineți că, deși este cuprins în mai multe produse Microsoft, este nu un font gratuit și încălcați drepturile de autor oferindu-i pentru descărcare.
adăugat autor Adam Hepton

11 răspunsuri

Am văzut-o făcută într-un mod sigur, dar destul de fiabil. Practic, un element este setat să utilizeze un anumit font și un șir este setat la acel element. Dacă fontul setat pentru element nu există, este nevoie de fontul elementului părinte. Deci, ceea ce fac este să măsoare lățimea șirului randat. Dacă se potrivește cu ceea ce se așteptau pentru fontul dorit, spre deosebire de fontul derivat, este prezent.

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

0
adăugat
O altă abordare folosind measureText din elementul canvas : github.com / Wildhoney / DetectFont
adăugat autor Wildhoney

Eu folosesc Fount. Trebuie doar să trageți butonul Fount în bara de marcaje, să faceți clic pe acesta și apoi să faceți clic pe un anumit text de pe site. Acesta va afișa apoi fontul acelui text.

https://fount.artequalswork.com/

0
adăugat

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

0
adăugat
@JonLennartAasenden Pentru a obține fontul folosit, cred că puteți folosi proprietatea "computedStyle" (am uitat numele exact, dar este ceva de genul ăsta).
adăugat autor Derek 朕會功夫
Detecția fonturilor nu rezolvă problema. Ai putea să o folosești pentru a repeta gândirea fonturilor declarate și a verifica ce este valabil, dar dă puțin sau deloc informații despre ce font este folosit pentru orice div. Dacă creați div de la JS, cum putem ști ce font este folosit?
adăugat autor Jon Lennart Aasenden
Am scris o clasă care funcționează în toate browserele. Este scris în Smart Pascal, care se compilează la JS, deci nu pot să post cu adevărat soluția aici - dar pe scurt, a trebuit să extrag șirul de font-familie, apoi să verificați dacă fiecare font a fost valabil, să luați primul care era valabil - și că funcționează peste tot. Am portat peste "detectorul de fonturi" la smart pascal și am făcut unele modificări.
adăugat autor Jon Lennart Aasenden
Acesta ar trebui să fie răspunsul acceptat! Marea treabă @ Derek.
adăugat autor mkoistinen
@JonLennartAasenden Nu sună ca și cum clasa ta este lipsită de siguranță. Browserele vor verifica fiecare font în prioritate, dacă sunt instalate, dar uneori vor opta să utilizeze un font cu prioritate mai mică în listă, în cazul în care prioritatea mai mare, fontul instalat lipsește caractere sau glifuri care nu se potrivesc cu dimensiunile solicitate.
adăugat autor Brandon Elliott

Puteți utiliza acest site:

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

E exact ceea ce vrei ...

0
adăugat

Puteți pune Adobe Blank în familia font-ului după ce ați scris fontul doriți să vedeți și apoi orice glifuri care nu sunt în acest font nu vor fi redate.

de exemplu.:

font-family: Arial, 'Adobe Blank';

Din câte știu, nu există nici o metodă JS care să spună ce ghilimele dintr-un element sunt redate prin care font din stiva fontului pentru acel element.

Acest lucru este complicat de faptul că browserele au setări de utilizator pentru fonturi serif / sans-serif / monospace și au, de asemenea, fonturi proprii codate greu, pe care le vor folosi dacă un glif nu este găsit în niciunul dintre fonturi într-un font stiva. Deci, browserul poate face unele glifuri într-un font care nu se află în stiva fontului sau setarea fontului browserului utilizatorului. Chrome Dev Tools vă va arăta fiecare font redat pentru glifele din elementul selectat . Deci, pe mașina dvs. puteți vedea ce face, dar nu există nicio modalitate de a spune ce se întâmplă pe mașina unui utilizator.

De asemenea, este posibil ca sistemul utilizatorului să joace un rol în acest lucru, de ex. Fereastra înlocuiește fontul la nivel de tip glif .

asa de...

Pentru glifele care vă interesează, nu aveți cum să știți dacă acestea vor fi redate de browserul / sistemul de rezervă al utilizatorului, chiar dacă acestea nu au fontul pe care îl specificați.

Dacă doriți să îl testați în JS, puteți face glițe individuale cu o familie de fonturi, inclusiv Adobe Blank, și măsurați lățimea lor pentru a vedea dacă este zero, DAR va trebui să repetați cu atenție fiecare glif și fiecare font pe care doriți să îl testați , dar deși puteți cunoaște fonturile într-un set de elemente de fonturi, nu există niciun fel de cunoaștere a fonturilor pe care browserul utilizatorului este configurat să le utilizeze pentru cel puțin unii dintre utilizatorii dvs. lista de fonturi pe care le repetați va fi incompletă. (Nu este, de asemenea, o dovadă în viitor dacă noile fonturi ies și încep să se obișnuiască.)

0
adăugat

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

Iată o funcție simplă de a apuca fontul folosit într-un 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;
    }
}

Dacă regula CSS pentru aceasta a fost:

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

Apoi ar trebui să returneze helvetica dacă este instalat, dacă nu, arial și, în fine, numele fontului sans-serif implicit în sistem. Rețineți că ordonarea fonturilor în declarația dvs. CSS este semnificativă.

Un hack interesant pe care îl puteți încerca, de asemenea, este să creați o mulțime de elemente ascunse cu multe fonturi diferite pentru a încerca să detectați fonturile instalate pe o mașină. Sunt sigur că cineva ar putea face o pagină de colectare a statisticilor cu ajutorul acestei tehnici.

0
adăugat
Aceasta returnează șirul complet al css-ului ca "Helvetica, Arial, sans-serif". Acesta nu returnează fontul real utilizat.
adăugat autor Tom Kincaid

@pat De fapt, Safari nu dă fontul folosit, Safari înlocuiește întotdeauna primul font din stack, indiferent dacă este instalat, cel puțin din experiența mea.

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

Presupunând că Helvetica este cea instalată / utilizată, veți primi:

  • "fontul meu fals" în Safari (și cred că alte browsere webkit).
  • "fontul meu fals, helvetica, san-serif" în browserele Gecko și IE.
  • "helvetica" în Opera 9, deși am citit că schimbă acest lucru în Opera 10 pentru a se potrivi Gecko.

Am făcut o trecere la această problemă și am creat Font Unstack, care testează fiecare font într-o stivă și returnează doar primul. Utilizează trucul pe care îl numește @MojoFilter, dar returnează numai primul dacă sunt instalate mai multe. Deși suferă de slăbiciunea pe care o menționează @tlrobinson (Windows va înlocui în tăcere Arial pentru Helvetica și va raporta că Helvetica este instalat), funcționează bine.

FontUnstack

0
adăugat

Un formular simplificat este:

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

Dacă aveți nevoie de ceva mai complet, consultați acest .

0
adăugat

Există o soluție simplă

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

această funcție va face exact ceea ce doriți. La execuție Se va returna Tipul fontului Utilizator / Vizitator. Sper că acest lucru vă va ajuta

0
adăugat
Motivul cel mai probabil este că acest lucru verifică numai pentru un font setat, iar dacă nu există niciun set de fonturi, este probabil folosit Arial ca font.
adăugat autor Josiah
Încerc acest lucru în Safari pe un element care are cu siguranță fontul Arial și sunt "" ca font. Orice idei de ce?
adăugat autor Alessandro Vermeulen

O altă soluție ar fi instalarea automată a fontului prin @ font-face care ar putea nega nevoia de detectare.

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

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

0
adăugat

Calibri este un font deținut de Microsoft și nu trebuie distribuit gratuit. De asemenea, solicitarea unui utilizator de a descărca un anumit font nu este foarte ușor de utilizat.

Aș sugera să achiziționați o licență pentru font și să o încorporați în aplicația dvs.

0
adăugat
Aș sugera să verificați Fonturi Google ceva similar înainte de a cumpăra ceva.
adăugat autor OJFord
+1 pentru încorporarea fontului. Acest lucru rezolvă problema fără a fi nevoie să detectați nimic.
adăugat autor Andrew Grothe
Cu excepția faptului că, dacă utilizatorul se află pe o mașină de ferestre, atunci poate să vadă Calibri. Acesta este întregul punct al listelor de rezervă.
adăugat autor dudewad
Răspunsul dvs. nu este legat de întrebare și ar trebui să fie un comentariu.
adăugat autor dudewad