Ανίχνευση οποία γραμματοσειρά χρησιμοποιήθηκε σε μια ιστοσελίδα

ψήφοι
110

Ας υποθέσουμε ότι έχω τον ακόλουθο κανόνα CSS στη σελίδα μου:

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

Πώς μπορώ να εντοπίσει ποια από τις καθορισμένες γραμματοσειρές χρησιμοποιήθηκε στο πρόγραμμα περιήγησης του χρήστη;

Επεξεργασία για τους ανθρώπους που αναρωτιούνται γιατί θέλω να κάνω το εξής: Η γραμματοσειρά που είμαι ανίχνευση περιέχει γλυφή που δεν είναι διαθέσιμες σε άλλες γραμματοσειρές και όταν ο χρήστης δεν έχει τη γραμματοσειρά που θέλετε να εμφανίσετε ένα σύνδεσμο ζητώντας από το χρήστη να κατεβάσετε το γραμματοσειράς, ώστε να μπορείτε να χρησιμοποιήσετε την εφαρμογή web μου με τη σωστή γραμματοσειρά.

Αυτή τη στιγμή είμαι εμφανίζει το σύνδεσμο λήψης γραμματοσειρά για όλους τους χρήστες, θέλω να εμφανίσετε μόνο αυτό για τους ανθρώπους που δεν έχουν τη σωστή γραμματοσειρά που είναι εγκατεστημένη.

Δημοσιεύθηκε 03/08/2008 στις 22:42
πηγή χρήστη
Σε άλλες γλώσσες...                            


11 απαντήσεις

ψήφοι
59

Έχω δει να γίνεται σε ένα είδος αμφίβολος, αλλά αρκετά αξιόπιστο τρόπο. Βασικά, ένα στοιχείο έχει ρυθμιστεί να χρησιμοποιεί μια συγκεκριμένη γραμματοσειρά και μια συμβολοσειρά έχει οριστεί σε αυτό το στοιχείο. Εάν το σύνολο της γραμματοσειράς για το στοιχείο δεν υπάρχει, χρειάζεται τη γραμματοσειρά του γονικού στοιχείου. Έτσι, αυτό που κάνουμε είναι να μετρηθεί το πλάτος της παρεχόμενης εγχόρδων. Αν ταιριάζει με ό, τι αναμενόταν για την επιθυμητή γραμματοσειρά σε αντίθεση με το που προέρχεται γραμματοσειρά, είναι παρόντες.

Εδώ είναι πού προήλθε: Javascript / CSS γραμματοσειράς ανιχνευτή (ajaxian.com? 12 του Μάρτη 2007)

Απαντήθηκε 03/08/2008 στις 22:51
πηγή χρήστη

ψήφοι
27

Έγραψα ένα απλό εργαλείο JavaScript που μπορείτε να χρησιμοποιήσετε για να ελέγξετε αν μια γραμματοσειρά είναι εγκατεστημένη ή όχι.
Χρησιμοποιεί την απλή τεχνική και θα πρέπει να είναι σωστό το μεγαλύτερο μέρος του χρόνου.

jFont Checker για GitHub

Απαντήθηκε 21/05/2011 στις 18:58
πηγή χρήστη

ψήφοι
7

@pat Στην πραγματικότητα, Safari δεν δίνει τη γραμματοσειρά που χρησιμοποιείται, Safari επιστρέφει αντί για πάντα την πρώτη γραμματοσειρά στη στοίβα, ανεξάρτητα από το αν είναι εγκατεστημένο, τουλάχιστον από την εμπειρία μου.

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

Υποθέτοντας Helvetica είναι μια εγκατεστημένη / χρησιμοποιηθεί, θα πάρετε:

  • «Ψεύτικο γραμματοσειρά μου» στο Safari (και πιστεύω ότι άλλα προγράμματα περιήγησης WebKit).
  • "Ψεύτικο γραμματοσειρά, Helvetica, san-serif μου" σε προγράμματα περιήγησης Gecko και IE.
  • «Helvetica» στο Opera 9, αν και διάβασα ότι η αλλαγή αυτή στο Opera 10 για να ταιριάζει με Gecko.

Πήρα ένα πέρασμα σε αυτό το πρόβλημα και δημιούργησαν γραμματοσειράς στοίβας, η οποία ελέγχει κάθε γραμματοσειρά σε μια στοίβα και επιστρέφει ο πρώτος εγκατεστημένο ένα μόνο. Χρησιμοποιεί το τέχνασμα που αναφέρει @MojoFilter, αλλά επιστρέφει μόνο το πρώτο, αν έχουν εγκατασταθεί πολλαπλές. Αν και πάσχει από την αδυναμία που @tlrobinson αναφέρει (Windows θα αντικαταστήσει Arial για Helvetica σιωπηλά και αναφέρουν ότι έχει εγκατασταθεί Helvetica), λειτουργεί διαφορετικά καλά.

FontUnstack

Απαντήθηκε 20/05/2009 στις 11:57
πηγή χρήστη

ψήφοι
6

Υπάρχει μια απλή λύση

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

η λειτουργία αυτή θα κάνει ακριβώς αυτό που θέλετε. Την εκτέλεση θα επιστρέψει το χρήστη / επισκέπτη Τύπος Browsers γραμματοσειράς. Η ελπίδα αυτή θα βοηθήσει

Απαντήθηκε 29/11/2011 στις 09:40
πηγή χρήστη

ψήφοι
6

Μία απλοποιημένη μορφή είναι:

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

Αν χρειάζεστε κάτι πιο ολοκληρωμένο, ελέγξτε αυτό έξω.

Απαντήθηκε 23/10/2011 στις 14:32
πηγή χρήστη

ψήφοι
6

Μια τεχνική που λειτουργεί είναι να εξετάσουμε την υπολογιστική στυλ του στοιχείου. Αυτό υποστηρίζεται σε Opera και Firefox (και φαντάζομαι στο σαφάρι, αλλά δεν το έχω δοκιμάσει). IE (7 τουλάχιστον), παρέχει μια μέθοδο για να πάρει ένα στυλ, αλλά φαίνεται να είναι ό, τι ήταν στο στυλ, δεν είναι η υπολογιζόμενη στυλ. Περισσότερες λεπτομέρειες σχετικά με Quirksmode: Πάρτε Στυλ

Εδώ είναι μια απλή λειτουργία για να αρπάξει τη γραμματοσειρά που χρησιμοποιείται σε ένα στοιχείο:

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

Αν ο κανόνας CSS για αυτό ήταν:

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

Στη συνέχεια, θα πρέπει να επιστρέψει Helvetica αν αυτό έχει εγκατασταθεί, αν όχι, arial, και, τέλος, το όνομα της γραμματοσειράς προεπιλεγμένο σύστημα sans-serif. Σημειώστε ότι η διάταξη των γραμματοσειρών στη δήλωση CSS σας είναι σημαντική.

Μια ενδιαφέρουσα hack θα μπορούσε επίσης να προσπαθήσετε να δημιουργήσετε πολλά κρυμμένα στοιχεία με πολλές διαφορετικές γραμματοσειρές για να προσπαθήσει να εντοπίσει ποιες γραμματοσειρές είναι εγκατεστημένες σε ένα μηχάνημα. Είμαι σίγουρος ότι κάποιος θα μπορούσε να κάνει ένα ικανό σελίδα συγκέντρωση στατιστικών στοιχείων γραμματοσειρά με αυτήν την τεχνική.

Απαντήθηκε 25/08/2008 στις 23:16
πηγή χρήστη

ψήφοι
5

Μια άλλη λύση θα ήταν να εγκαταστήσετε τη γραμματοσειρά αυτόματα μέσω @font-faceτου οποίου μπορεί να αναιρεί την ανάγκη για την ανίχνευση.

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

Φυσικά δεν θα λύσει όλα τα θέματα πνευματικών δικαιωμάτων, ωστόσο, μπορείτε πάντα να χρησιμοποιήσετε ένα δωρεάν γραμματοσειρά ή ακόμη και να κάνουν τη δική σας γραμματοσειρά. Θα χρειαστείτε δύο .eotκαι .ttfτα αρχεία για να λειτουργήσει καλύτερα.

Απαντήθηκε 05/01/2012 στις 12:19
πηγή χρήστη

ψήφοι
2

Calibri είναι μια γραμματοσειρά που ανήκει από τη Microsoft, και δεν θα πρέπει να διανέμονται δωρεάν. Επίσης, απαιτεί ένα χρήστη να κατεβάσει μια συγκεκριμένη γραμματοσειρά δεν είναι πολύ φιλικό προς το χρήστη.

Θα ήθελα να προτείνω την αγορά μιας άδειας για τη γραμματοσειρά και ενσωμάτωση της σε εφαρμογή σας.

Απαντήθηκε 14/11/2012 στις 19:56
πηγή χρήστη

ψήφοι
1

Μπορείτε να χρησιμοποιήσετε αυτή την ιστοσελίδα:

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

Κάνει ακριβώς αυτό που θέλετε ...

Απαντήθηκε 11/04/2015 στις 20:41
πηγή χρήστη

ψήφοι
0

Μπορείτε να βάλετε το Adobe κενό στην font-family μετά τη γραμματοσειρά που θέλετε να δείτε, και στη συνέχεια κάθε ιερογλυφικών όχι σε αυτή την γραμματοσειρά δεν θα πρέπει να αποδοθεί.

π.χ:

font-family: Arial, 'Adobe Blank';

Απ 'όσο γνωρίζω δεν υπάρχει μέθοδος JS να πει κανείς ποια ιερογλυφικών σε ένα στοιχείο που να παρέχονται από το οποίο γραμματοσειράς στη στοίβα γραμματοσειράς για αυτό το στοιχείο.

Αυτό περιπλέκεται από το γεγονός ότι οι μηχανές αναζήτησης έχουν οι ρυθμίσεις χρήστη για serif / sans-serif γραμματοσειρές / σταθερού πλάτους και έχουν επίσης το δικό τους σκληρό-κωδικοποιημένες εφεδρική γραμματοσειρές που θα χρησιμοποιήσουν, εάν ένα ανάγλυφο δεν βρίσκεται σε καμία από τις γραμματοσειρές σε ένα font στοίβα. Έτσι, το πρόγραμμα περιήγησης μπορεί να καταστήσει κάποια ιερογλυφικά σε μια γραμματοσειρά που δεν είναι στη στοίβα γραμματοσειρά ή τη ρύθμιση της γραμματοσειράς του προγράμματος περιήγησης του χρήστη. Chrome Dev Εργαλεία θα σας δείξει κάθε καταστεί γραμματοσειρά για τα ιερογλυφικά στο επιλεγμένο στοιχείο . Έτσι, στον υπολογιστή σας, μπορείτε να δείτε τι κάνει, αλλά δεν υπάρχει τρόπος να πει τι συμβαίνει στον υπολογιστή του χρήστη.

Είναι επίσης δυνατό σύστημα του χρήστη μπορεί να παίξει ένα ρόλο σε αυτό, όπως π.χ. Παράθυρο κάνει Υποκατάσταση γραμματοσειρών σε επίπεδο γλύφω.

Έτσι...

Για τα ιερογλυφικά που σας ενδιαφέρει, δεν έχετε κανέναν τρόπο να γνωρίζει αν θα πρέπει να παρέχονται από εναλλακτικές πρόγραμμα περιήγησης / σύστημα του χρήστη, ακόμη και αν δεν έχουν τη γραμματοσειρά που έχετε ορίσει.

Αν θέλετε να το δοκιμάσετε στο JS θα μπορούσε να καταστήσει μεμονωμένα ιερογλυφικά με font-family συμπεριλαμβανομένων των Adobe Λευκά και μετρήστε το πλάτος τους για να δουν αν είναι μηδέν, ΑΛΛΑ θα έπρεπε να επαναλάβει βάθος κάθε γλύφω και κάθε γραμματοσειρά που ήθελε να δοκιμάσει , αλλά αν μπορείτε να γνωρίζετε τις γραμματοσειρές σε στοιχεία στοίβα γραμματοσειρά δεν υπάρχει κανένας τρόπος να γνωρίζει τι γραμματοσειρές πρόγραμμα περιήγησης του χρήστη έχει ρυθμιστεί για χρήση, έτσι για τουλάχιστον μερικά από χρήστες σας η λίστα των γραμματοσειρών που επαναλαμβάνεται σε θα είναι ελλιπής. (Δεν είναι επίσης διαχρονικότητα και αν νέες γραμματοσειρές βγει και να αρχίσει να συνηθίσει.)

Απαντήθηκε 30/11/2017 στις 10:58
πηγή χρήστη

ψήφοι
0

Είμαι με τη χρήση Fount. Απλά πρέπει να σύρετε το κουμπί Πηγής στη γραμμή σελιδοδεικτών, κάντε κλικ πάνω του και στη συνέχεια κάντε κλικ σε ένα συγκεκριμένο κείμενο στην ιστοσελίδα της. Θα δείξουμε στη συνέχεια, τη γραμματοσειρά του κειμένου.

https://fount.artequalswork.com/

Απαντήθηκε 13/03/2017 στις 04:31
πηγή χρήστη

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