Jak wykryć, która ze zdefiniowanych czcionek została użyta na stronie internetowej?


138

Załóżmy, że na mojej stronie mam następującą regułę CSS:

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

Jak mogę sprawdzić, która ze zdefiniowanych czcionek została użyta w przeglądarce użytkownika?

Edytuj dla osób zastanawiających się, dlaczego chcę to zrobić: Czcionka, którą wykrywam, zawiera glify, które nie są dostępne w innych czcionkach, a gdy użytkownik nie ma czcionki Chcę wyświetlić łącze z prośbą o pobranie tej czcionki, aby mogę używać mojej aplikacji internetowej z odpowiednią czcionką.

Obecnie wyświetlam łącze pobierania czcionek dla wszystkich użytkowników, chcę to wyświetlać tylko dla osób, które nie mają zainstalowanej odpowiedniej czcionki.


2
Należy pamiętać, że niektóre przeglądarki zastępują niektóre brakujące czcionki podobnymi czcionkami, czego nie można wykryć za pomocą sztuczki JavaScript / CSS. Na przykład przeglądarki Windows zastąpią Helvetica Arial, jeśli nie jest ona zainstalowana. Sztuczka wspomniana przez MojoFilter i dragonmatank nadal będzie informować, że Helvetica jest zainstalowana, mimo że tak nie jest.
tlrobinson

13
Mała uwaga uwaga: Jeżeli oferujesz link do pobrania Calibri, należy pamiętać, że choć jest spakowany w kilku produktach firmy Microsoft, to nie darmowe czcionki, a ty naruszenie praw autorskich poprzez oferowanie go do pobrania.
Adam Hepton

Odpowiedzi:


72

Widziałem to zrobione w nieco niepewny, ale całkiem niezawodny sposób. Zasadniczo element jest ustawiony tak, aby używał określonej czcionki, a ciąg znaków jest ustawiony na ten element. Jeśli czcionka ustawiona dla elementu nie istnieje, przyjmuje czcionkę elementu nadrzędnego. Tak więc mierzą szerokość renderowanego ciągu. Jeśli pasuje do tego, czego oczekiwali dla żądanej czcionki, w przeciwieństwie do czcionki pochodnej, jest obecna. To nie zadziała w przypadku czcionek o stałej szerokości.

Oto skąd pochodzi: Wykrywacz czcionek JavaScript / CSS (ajaxian.com; 12 marca 2007)


2
Inne podejście wykorzystujące measureTextfrom the canvaselement: github.com/Wildhoney/DetectFont
Wildhoney

33

Napisałem proste narzędzie JavaScript, dzięki któremu możesz sprawdzić, czy czcionka jest zainstalowana, czy nie.
Wykorzystuje prostą technikę i przez większość czasu powinien być poprawny.

jFont Checker na github


2
Wykrywanie czcionek nie rozwiązuje problemu. Możesz go użyć do iteracji myśli zadeklarowanych czcionek i sprawdzenia, co jest poprawne, ale daje niewiele lub nie ma żadnych informacji na temat czcionki używanej dla danego elementu div. Jeśli tworzysz elementy DIV z JS, skąd możemy wiedzieć, jaka czcionka jest używana?
Jon Lennart Aasenden

1
@JonLennartAasenden Myślę, że aby uzyskać używaną czcionkę, możesz użyć właściwości "computedStyle" (zapomniałem dokładnej nazwy, ale to coś takiego).
Derek 朕 會 功夫

1
Napisałem zajęcia, które działają we wszystkich przeglądarkach. Jest napisany w Smart Pascal, który kompiluje się do JS, więc naprawdę nie mogę tutaj opublikować rozwiązania - ale w skrócie, musiałem wyodrębnić ciąg rodziny czcionek, a następnie sprawdzić, czy każda czcionka jest prawidłowa, pobrać pierwszą, która była poprawna - i to działa wszędzie. Przeniosłem „wykrywacz czcionek” na smart pascal i wprowadziłem kilka poprawek.
Jon Lennart Aasenden

1
@JonLennartAasenden To nie brzmi tak, jakby twoja klasa była niezawodna. Przeglądarki sprawdzą każdą czcionkę w podanym priorytecie, jeśli jest zainstalowana, ale czasami decydują się na użycie czcionki o niższym priorytecie na liście, jeśli zainstalowana czcionka o wyższym priorytecie ma brakujące znaki lub glify, które nie pasują do żądanych rozmiarów.
Brandon Elliott,

10

@pat W rzeczywistości Safari nie podaje używanej czcionki, zamiast tego Safari zawsze zwraca pierwszą czcionkę w stosie, niezależnie od tego, czy jest zainstalowana, przynajmniej z mojego doświadczenia.

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

Zakładając, że Helvetica jest zainstalowana / używana, otrzymasz:

  • „moja fałszywa czcionka” w Safari (i uważam, że w innych przeglądarkach Webkit).
  • „moja fałszywa czcionka, helvetica, san-serif” w przeglądarkach Gecko i IE.
  • „helvetica” w Operze 9, chociaż czytałem, że zmieniają to w Operze 10, aby pasowało do Gecko.

Podjąłem się tego problemu i stworzyłem Font Unstack , który testuje każdą czcionkę w stosie i zwraca tylko pierwszą zainstalowaną. Używa sztuczki, o której wspomina @MojoFilter, ale zwraca tylko pierwszą, jeśli zainstalowano wiele. Chociaż ma słabość, o której wspomina @tlrobinson (Windows po cichu zastąpi Arial zamiast Helvetica i zgłosi, że Helvetica jest zainstalowana), poza tym działa dobrze.


9

Technika, która działa, polega na spojrzeniu na obliczony styl elementu. Jest to obsługiwane w przeglądarce Opera i Firefox (i sprawdzam w safari, ale nie testowałem). IE (przynajmniej 7) zapewnia metodę uzyskiwania stylu, ale wydaje się, że jest to coś, co było w arkuszu stylów, a nie styl obliczony. Więcej informacji na temat trybu dziwacznego: Pobierz style

Oto prosta funkcja do pobierania czcionki używanej w elemencie:

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

Jeśli reguła CSS to:

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

Następnie powinien zwrócić helvetica, jeśli jest zainstalowana, a jeśli nie, to arial, i na koniec nazwę domyślnej czcionki bezszeryfowej systemu. Zwróć uwagę, że kolejność czcionek w deklaracji CSS jest znacząca.

Ciekawym hackem, którego możesz również spróbować, jest utworzenie wielu ukrytych elementów z wieloma różnymi czcionkami, aby spróbować wykryć, które czcionki są zainstalowane na komputerze. Jestem pewien, że za pomocą tej techniki ktoś mógłby stworzyć fajną stronę do zbierania statystyk czcionek.


6
Zwraca pełny ciąg css, np. „Helvetica, Arial, sans-serif”. Nie zwraca rzeczywistej używanej czcionki.
Tom Kincaid

8

Uproszczona forma to:

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

Jeśli potrzebujesz czegoś bardziej kompletnego, sprawdź to .


8

Jest proste rozwiązanie - wystarczy użyć element.style.font:

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

Ta funkcja zrobi dokładnie to, co chcesz. Podczas wykonywania Zwróci typ czcionki użytkownika / przeglądarki. Mam nadzieję, że to pomoże.


Próbuję tego w Safari na elemencie, który zdecydowanie ma czcionkę Arial i otrzymuję „” jako czcionkę. Jakieś pomysły, dlaczego?
Alessandro Vermeulen

Najbardziej prawdopodobnym powodem jest to, że sprawdza tylko ustawioną czcionkę, a jeśli nie ma zestawu czcionek, prawdopodobnie używa Arial jako czcionki.
Josiah

1
@AlessandroVermeulen dzieje się tak, ponieważ element.style zwraca tylko wartości ustawione w atrybutach stylu i nie zwróci żadnych wartości z innych źródeł (tj. Wartości z elementów stylu, zewnętrznego css lub domyślnego klienta użytkownika nie zostaną zwrócone). Tę odpowiedź należy usunąć, ponieważ jest myląca / nieprawidłowa. Niewiarygodne, że dostał nagrodę!
brennanyoung

Przepraszam, ale nie sądzę, żeby to była dobra odpowiedź. Podczas gdy to wypisuje wartość tej właściwości CSS, nie zwraca rzeczywistej renderowanej czcionki, która jest używana przez przeglądarkę.
Wentjun

7

Innym rozwiązaniem byłoby automatyczne zainstalowanie czcionki, @font-faceco mogłoby wyeliminować potrzebę wykrywania.

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

Oczywiście nie rozwiązałoby to żadnych problemów związanych z prawami autorskimi, jednak zawsze możesz użyć darmowej czcionki, a nawet stworzyć własną czcionkę. Trzeba będzie zarówno .eot& .ttfpliki do pracy najlepiej.


3

Calibri to czcionka będąca własnością firmy Microsoft i nie powinna być rozpowszechniana za darmo. Ponadto wymaganie od użytkownika pobrania określonej czcionki nie jest zbyt przyjazne dla użytkownika.

Sugerowałbym zakup licencji na czcionkę i osadzenie jej w swojej aplikacji.


3
+1 za osadzanie czcionek. To rozwiązuje problem bez konieczności wykrywania czegokolwiek.
Andrew Grothe

1
Sugerowałbym sprawdzenie Google Fonts pod kątem czegoś podobnego przed zakupem czegokolwiek.
OJFord

Z wyjątkiem tego, że jeśli użytkownik korzysta z komputera z systemem Windows, może wtedy wyświetlać Calibri. To jest cały sens list rezerwowych.
dudewad

1
Twoja odpowiedź nie jest związana z pytaniem i powinna być komentarzem.
dudewad

2

Używam Fount. Wystarczy przeciągnąć przycisk Fount na pasek zakładek, kliknąć go, a następnie kliknąć określony tekst na stronie internetowej. Następnie pokaże czcionkę tego tekstu.

https://fount.artequalswork.com/



1

Możesz umieścić Adobe Blank w rodzinie czcionek po czcionce, którą chcesz zobaczyć, a wtedy wszelkie glify nie zawarte w tej czcionce nie zostaną renderowane.

na przykład:

font-family: Arial, 'Adobe Blank';

O ile mi wiadomo, nie ma metody JS, która wskazywałaby, które glify w elemencie są renderowane przez którą czcionkę w stosie czcionek dla tego elementu.

Jest to skomplikowane przez fakt, że przeglądarki mają ustawienia użytkownika dla czcionek szeryfowych / bezszeryfowych / o stałej szerokości, a także mają własne zakodowane na stałe czcionki rezerwowe, których będą używać, jeśli glif nie zostanie znaleziony w żadnej z czcionek w stos czcionek. Dlatego przeglądarka może renderować niektóre glify w czcionce, której nie ma w stosie czcionek ani w ustawieniach czcionki przeglądarki użytkownika. Chrome Dev Tools pokaże każdą renderowaną czcionkę dla glifów w wybranym elemencie . Tak więc na komputerze możesz zobaczyć, co robi, ale nie ma sposobu, aby stwierdzić, co się dzieje na komputerze użytkownika.

Możliwe jest również, że system użytkownika może odegrać w tym rolę, ponieważ np. Window wykonuje podstawianie czcionek na poziomie glifów.

więc...

W przypadku glifów, które Cię interesują, nie możesz wiedzieć, czy zostaną wyrenderowane przez przeglądarkę / system awaryjny użytkownika, nawet jeśli nie mają określonej czcionki.

Jeśli chcesz przetestować to w JS, możesz wyrenderować poszczególne glify za pomocą rodziny czcionek, w tym Adobe Blank i zmierzyć ich szerokość, aby sprawdzić, czy wynosi zero, ALE musiałbyś dokładnie powtórzyć każdy glif i każdą czcionkę, którą chciałeś przetestować , ale chociaż możesz poznać czcionki w stosie czcionek elementów, nie ma sposobu, aby dowiedzieć się, jakich czcionek ma używać przeglądarka użytkownika, więc przynajmniej dla niektórych użytkowników lista czcionek, przez które iterujesz, będzie niekompletna. (Nie jest również przyszłościowe, jeśli pojawią się nowe czcionki i zaczną się używać).

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.