Sprawdzenie, które użyto czcionki na stronie WWW

głosy
110

Załóżmy, że mam następującą regułę CSS w moją stronę:

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

W jaki sposób można wykryć, który jeden ze zdefiniowanych czcionek użyto w przeglądarce użytkownika?

Edycja dla osób zastanawia się, dlaczego chcę, aby to zrobić: Czcionka mam wykrywania zawiera glif, że nie są dostępne w innych czcionek i gdy użytkownik nie posiada czcionkę chcę wyświetlić link prosząc użytkownika o pobranie tej czcionki więc można korzystać z aplikacji internetowych z poprawnym czcionki.

Obecnie jestem wyświetlając odnośnik Pobierz czcionki dla wszystkich użytkowników, chcę wyświetlać tylko to dla ludzi, którzy nie mają zainstalowanego właściwą czcionkę.

Utwórz 03/08/2008 o 22:42
źródło użytkownik
W innych językach...                            


12 odpowiedzi

głosy
59

Widziałem to zrobić w rodzaju iffy, ale dość wiarygodny sposób. Zasadniczo, element jest skonfigurowany do korzystania z konkretnej czcionki i łańcuch jest ustawiony na ten element. Jeśli zestaw czcionek dla elementu nie istnieje, trwa czcionki elementu nadrzędnego. Więc, co robią jest zmierzyć szerokość wytopione łańcucha. Jeśli pasuje, czego oczekiwano na żądanej czcionki w przeciwieństwie do czcionki pochodzi, jest obecny.

Oto skąd pochodzi: JavaScript / CSS Detector Font (ajaxian.com; 12 mar 2007)

Odpowiedział 03/08/2008 o 22:51
źródło użytkownik

głosy
6

Technika, która działa jest patrzeć na komputerowej stylu elementu. To jest obsługiwana w Operze i Firefoksie (a ja recon w safari, ale nie testowane). IE (7 co najmniej), zapewnia sposób, aby uzyskać styl, ale wydaje się, że cokolwiek było w arkuszu stylów, a nie w stylu komputerowej. Więcej szczegółów na temat Quirks Mode: Get Style

Oto prosta funkcja chwycić czcionkę używaną 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 tego było:

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

Następnie należy powrócić Helvetica jeśli jest zainstalowany, jeśli nie, Arial, i wreszcie nazwa czcionki domyślne systemu sans-serif. Zauważ, że kolejność czcionek w swojej deklaracji CSS jest znacząca.

Ciekawym Hack można także spróbować jest stworzenie mnóstwo ukrytych elementów z dużą ilością różnych czcionek, aby spróbować wykryć, które czcionki są zainstalowane na komputerze. Jestem pewien, że ktoś mógłby zrobić ładne czcionki gromadzenia statystyk strony z tej techniki.

Odpowiedział 25/08/2008 o 23:16
źródło użytkownik

głosy
7

@pat Właściwie Safari nie daje czcionkę używaną, Safari zamiast zawsze zwraca pierwszą czcionkę w stos, niezależnie od tego, czy jest on zainstalowany, przynajmniej w moim doświadczeniu.

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

Zakładając Helvetica jest jeden zainstalowane / używane, dostaniesz:

  • „Mój fałszywy czcionki” w Safari (i wierzę, że inne przeglądarki WebKit).
  • "Mój fałszywy czcionki Helvetica, san-serif" w przeglądarkach Gecko i IE.
  • „Helvetica” w Operze 9, chociaż czytałem, że są one zmienia to w Operze 10 dopasować Gecko.

Wziąłem przepustkę na ten problem i stworzył czcionki rozebranie stosu, który testuje każdą czcionkę w stosie i zwraca pierwszy zainstalowany tylko jeden. Wykorzystuje sprawę, że @MojoFilter wspomina, ale zwraca tylko pierwszy z nich, jeśli zainstalowano kilka. Choć nie cierpią z powodu słabości, które @tlrobinson wspomina (Windows zastąpi na Arial Helvetica cicho i donoszą, że jest zainstalowany Helvetica), w przeciwnym razie działa dobrze.

FontUnstack

Odpowiedział 20/05/2009 o 11:57
źródło użytkownik

głosy
27

Napisałem proste narzędzie JavaScript że można go używać do sprawdzenia, czy czcionka jest zainstalowana lub nie.
Wykorzystuje prostą technikę i powinna być prawidłowa większość czasu.

jFont Checker na github

Odpowiedział 21/05/2011 o 18:58
źródło użytkownik

głosy
6

Uproszczona forma jest:

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

Jeśli trzeba coś bardziej kompletne, sprawdź to na zewnątrz.

Odpowiedział 23/10/2011 o 14:32
źródło użytkownik

głosy
6

Jest to proste rozwiązanie

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

Funkcja ta będzie dokładnie to, co chcesz. Na wykonanie zwróci Użytkownik / odwiedzających typ przeglądarki czcionki. Nadzieję, że to pomoże

Odpowiedział 29/11/2011 o 09:40
źródło użytkownik

głosy
5

Innym rozwiązaniem byłoby, aby automatycznie zainstalować czcionkę poprzez @font-facektóre mogą negować 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 to nie rozwiąże wszelkie kwestie praw autorskich, jednak zawsze można użyć bezpłatnego czcionkę lub nawet tworzyć własne czcionki. Trzeba będzie zarówno .eot& .ttfpliki działają najlepiej.

Odpowiedział 05/01/2012 o 12:19
źródło użytkownik

głosy
2

Czcionka Calibri jest własnością firmy Microsoft i nie powinny być rozpowszechniane za darmo. Ponadto, wymagające użytkownika do pobrania konkretnej czcionki nie jest bardzo łatwy w obsłudze.

Proponuję zakup licencji na czcionki i osadzenie go w swojej aplikacji.

Odpowiedział 14/11/2012 o 19:56
źródło użytkownik

głosy
1

Można korzystać z tej strony:

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

Robi dokładnie to, co chcesz ...

Odpowiedział 11/04/2015 o 20:41
źródło użytkownik

głosy
0

Używam czcionka. Po prostu trzeba przeciągnąć przycisk czcionka na pasek zakładek, kliknij na niego, a następnie kliknąć na konkretnego tekstu na stronie internetowej. Będzie on następnie pokazać czcionki tego tekstu.

https://fount.artequalswork.com/

Odpowiedział 13/03/2017 o 04:31
źródło użytkownik

głosy
0

Można umieścić Adobe Puste w font-family po czcionki, które chcesz zobaczyć, a następnie żadnych glifów nie w tej czcionki nie zostaną wydane.

na przykład:

font-family: Arial, 'Adobe Blank';

O ile jestem świadomy nie istnieje metoda JS powiedzieć, które glifów w elemencie są renderowane za pomocą którego czcionki w stosie czcionki dla tego elementu.

To jest skomplikowana przez fakt, że przeglądarki mają ustawienia użytkownika dla serif / sans-serif czcionek / monospace i mają też swoje ciężko kodowane czcionek jesień-back, że będą używać jeśli glif nie znajduje się w żadnej z czcionkami w sposób stos czcionki. Więc przeglądarka może spowodować pewne glifów w czcionce, który nie jest w stosie czcionki lub ustawienia czcionki przeglądarka użytkownika. Chrome Dev Narzędzia pokaże każde renderowane czcionkę glifów w wybranym elemencie . Więc na komputerze można zobaczyć, co robi, ale nie ma sposobu, aby powiedzieć, co dzieje się na komputerze użytkownika.

Możliwe jest również system użytkownika może odgrywać pewną rolę w tym, jak na przykład okna robi Zmiana czcionki na poziomie glifów.

więc...

Dla glifów jesteś zainteresowany, nie ma możliwości dowiedzenia się, czy będą one świadczone przez awaryjnej przeglądarki / systemu użytkownika, nawet jeśli nie mają czcionkę okreslic.

Jeśli chcesz przetestować go w JS można renderowanie pojedynczych glifów z font-family w tym Adobe Blank i pomiaru ich szerokości, aby zobaczyć, czy to jest zero, ale trzeba by iteracji gruntowną każdy glif i każda czcionka chcesz przetestować , ale chociaż można wiedzieć czcionek w elementy czcionek stosie nie ma możliwości dowiedzenia się, jakie czcionki przeglądarki użytkownika jest skonfigurowany do korzystania więc dla przynajmniej niektórych użytkowników lista czcionek iterację będzie niekompletny. (Nie jest to również przyszłościowe jeśli nowe czcionki wyjść i zacząć przyzwyczaić).

Odpowiedział 30/11/2017 o 10:58
źródło użytkownik

głosy
1

Można zaimplementować czcionek CSS w HTML

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the WOFF format (only supports EOT format).</p>

</body>
</html>
Odpowiedział 12/10/2019 o 03:14
źródło użytkownik

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