Zjištění, které písmo byl použit na webové stránce

hlasů
110

Předpokládejme, že máte následující pravidlo CSS v mé stránce:

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

Jak mohu zjistit, který z definovaných písem byl použit v prohlížeči uživatele?

Edit pro lidi zajímá, proč chci, aby to následujícím způsobem: Písmo Detekuji obsahuje piktogramy to, že nejsou k dispozici v dalších písmech a když uživatel nemá písmo chci zobrazit odkaz s dotazem uživatele ke stažení dané písmo tak, aby mohou používat svůj webové aplikace s správné písmo.

V současné době jsem zobrazování odkazu ke stažení písma pro všechny uživatele, chci zobrazit pouze to pro lidi, kteří nemají nainstalovaný správné písmo.

Položena 03/08/2008 v 22:42
zdroj uživatelem
V jiných jazycích...                            


11 odpovědí

hlasů
59

Viděl jsem to udělal v jakémsi ošemetný, ale docela spolehlivým způsobem. Zjednodušeně řečeno, prvek je nastavena pro použití určitého písma a řetězec je nastaven na tento prvek. V případě, že písmo sada pro element neexistuje, trvá písmo nadřazeného prvku. Takže, co dělají, je změřit šířku vykreslené řetězce. Pokud se shoduje s tím, že očekává, že pro požadované písmo na rozdíl od odvozené písmo, je to dar.

Tady je místo, kde to přišlo: Javascript / CSS detektoru Font (ajaxian.com, 12 Mar 2007)

Odpovězeno 03/08/2008 v 22:51
zdroj uživatelem

hlasů
27

Napsal jsem jednoduchý nástroj JavaScript, že jej můžete použít ke kontrole, zda je písmo nainstalováno nebo ne.
Využívá jednoduchou techniku a měla by být v pořádku většinu času.

jFont Checker na github

Odpovězeno 21/05/2011 v 18:58
zdroj uživatelem

hlasů
7

@pat Vlastně Safari nedává písmo použité, Safari namísto vždy vrací první písmo v zásobníku bez ohledu na to, zda je nainstalován, alespoň podle mých zkušeností.

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

Za předpokladu, Helvetica je jedním nainstalován / používán, dostanete:

  • „Můj falešný font“ Safari (a věřím, že další WebKit prohlížeče).
  • "Můj falešný font Helvetica, san-serif" v Gecko prohlížečů a IE.
  • „Helvetica“ Opera 9, i když jsem si přečetl, že se mění toto Opera 10, aby odpovídaly Gecko.

Vzal jsem si přihrál na tento problém a vytvořil písmo unstack, který testuje každé písmo ve stohu a vrátí první nainstalován pouze jeden. To používá trik, který @MojoFilter zmiňuje, ale vrátí pouze první z nich, pokud jsou nainstalovány násobek. Ačkoli to trpí slabostí, že @tlrobinson zmiňuje (Windows nahradí Arial pro Helvetica tiše a hlásí, že je nainstalován Helvetica), ale jinak funguje dobře.

FontUnstack

Odpovězeno 20/05/2009 v 11:57
zdroj uživatelem

hlasů
6

K dispozici je jednoduché řešení

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

Tato funkce bude přesně to, co chcete. Na realizaci se vrátí uživatele / návštěvníka typ prohlížeče písma. Doufám, že to pomůže

Odpovězeno 29/11/2011 v 09:40
zdroj uživatelem

hlasů
6

Zjednodušená forma je:

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

Pokud potřebujete něco úplnější, zkontrolujte to ven.

Odpovězeno 23/10/2011 v 14:32
zdroj uživatelem

hlasů
6

Technika, která funguje, je podívat se na vypočtené stylu prvku. Tato funkce je podporována v Opera a Firefox (a já Recon v safari, ale nebyly testovány). IE (7 přinejmenším), poskytuje způsob, jak získat styl, ale zdá se, že vše, co bylo v stylů, ne vypočtená styl. Další podrobnosti o quirksmode: Získat Styles

Zde je jednoduchá funkce chytit písmo použité v prvku:

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

Pokud pravidlo CSS k tomu dodává:

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

Pak by měl vrátit Helvetica-li, že je nainstalována, pokud ne, Arial, a nakonec název systému Výchozí sans-serif písmo. Všimněte si, že uspořádání fontů ve své deklaraci CSS je významný.

Zajímavou hack můžete také vyzkoušet, je vytvořit spoustu skrytých prvků s množstvím různých typů písma, aby se pokusili zjistit, která písma jsou nainstalovány na stroji. Jsem si jistý, že někdo může udělat šikovný statistik písma shromažďování stránku s touto technikou.

Odpovězeno 25/08/2008 v 23:16
zdroj uživatelem

hlasů
5

Dalším řešením by bylo, aby se automaticky nainstalovat písmo přes @font-facekteré by mohly negovat potřebu pro detekci.

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

Samozřejmě to nebude řešit případné problémy s autorskými právy, ale můžete vždy používat freeware písma, nebo dokonce vytvořit svůj vlastní písmo. Budete potřebovat oba .eotsi .ttfsoubory k práci co nejlépe.

Odpovězeno 05/01/2012 v 12:19
zdroj uživatelem

hlasů
2

Calibri je písmo vlastněný společností Microsoft, a neměly by být distribuovány zdarma. Také, aby uživatel musel stáhnout konkrétní písmo není příliš uživatelsky přívětivý.

Navrhoval bych zakoupení licence pro písmo a jeho vložení do aplikace.

Odpovězeno 14/11/2012 v 19:56
zdroj uživatelem

hlasů
1

Můžete použít tyto stránky:

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

Dělá přesně to, co chcete ...

Odpovězeno 11/04/2015 v 20:41
zdroj uživatelem

hlasů
0

Můžete dát Adobe prázdné ve font-family po písmo, které chcete vidět, a pak nějaké piktogramy nejsou v tomto písmu nebude vykreslen.

např:

font-family: Arial, 'Adobe Blank';

Pokud jde o jsem si vědom, že žádná metoda JS zjistit, které glyfy v prvkem jsou vykreslen které písmo ve stohu písma pro daný prvek.

To je komplikován skutečností, že prohlížeče mají uživatelské nastavení patky / sans-serif / neproporcionální fonty a oni také mají své vlastní tvrdé-kódované záložních fonty, které se budou používat, pokud je piktogramy nebyl nalezen v žádném z písma v font stack. Takže prohlížeč může způsobit některé piktogramy v písmu, který není v zásobníku písma nebo nastavení prohlížeče fontů uživatele. Chrome Vývojové nástroje vám ukáže každý vykreslený písmo pro piktogramy ve vybraném prvku . Takže na vašem počítači, můžete vidět, jak to dělá, ale neexistuje žádný způsob, jak zjistit, co se děje na počítači uživatele.

Je také možné uživatele systému může hrát roli v tom, jak například okenní dělá Střídání písma na úrovni glyfů.

tak...

U symbolů vás zajímá, budete mít žádný způsob, jak zjistit, zda bude vykreslen browser / systémovou záchrana uživatele, a to i v případě, že nemají na písmo, které určíte.

Chcete-li to vyzkoušet v JS byste mohli učinit jednotlivé piktogramy s font-family, včetně Adobe Blank a změřit jejich šířku, aby zjistil, jestli to je nula, ALE budete muset opakovat důkladné každý piktogramy a každé písmo jste chtěli vyzkoušet , ale když si můžete znát písma v prvky písma stohu není tam žádný způsob, jak zjistit, jaká písma prohlížeč uživatele je nakonfigurován pro použití takže alespoň některé z vašich uživatelů seznam písem iteraci bude neúplná. (Také není budoucnost, pokud se objeví nové fonty vyjít ven a začít zvykat.)

Odpovězeno 30/11/2017 v 10:58
zdroj uživatelem

hlasů
0

Já používám pramen. Musíte jen přetáhněte tlačítko pramenem na lištu záložek, klikněte na něj a poté klikněte na konkrétním textu na webových stránkách. To se pak zobrazí písmo tohoto textu.

https://fount.artequalswork.com/

Odpovězeno 13/03/2017 v 04:31
zdroj uživatelem

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