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

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.

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)

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

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

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.

Uproszczona forma to:

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

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

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.

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.

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.

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/

Możesz korzystać z tej strony:

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

Robi dokładnie to, czego chcesz ...

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