Észlelése betűtípust használtak egy weboldal

szavazat
110

Tegyük fel, hogy a következő CSS szabály oldalam:

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

Hogyan lehet felismerni, melyik a megadott betűtípus használták a felhasználó böngészőjének?

Szerkesztés ember kíváncsi, hogy miért akarom ezt csinálni: A font én kimutatására tartalmaz írásjel azon, hogy nem állnak rendelkezésre más betűtípus, és amikor a felhasználó nem rendelkezik a betűtípus szeretnék megjeleníteni egy linket kéri a felhasználót, hogy töltse le, hogy a betű, így lehet használni a webes alkalmazás a megfelelő betűtípust.

Jelenleg én vagyok megjelenítésére a letöltési linket font minden felhasználó számára szeretnék csak megjeleníteni ezt az emberek, akik nem rendelkeznek a megfelelő betűkészlet telepítése.

A kérdést 03/08/2008 22:42
a forrás felhasználó
Más nyelveken...                            


12 válasz

szavazat
59

Láttam történik egyfajta iffy, de elég megbízható módon. Alapvetően egy elem értéke, hogy egy adott betűtípus, és egy sor van beállítva, hogy ezt az elemet. Ha a betűkészlet az elem nem létezik, tart a font a szülő elem. Szóval, mit csinálnak a mérni a szélességét a megjelenített szöveg. Ha egyezik, amit vártak a kívánt betűtípust, szemben a származtatott font, ez jelen van.

Itt van, hogy honnan jött: Javascript / CSS betűtípus detektor (ajaxian.com; 12. március 2007)

Válaszolt 03/08/2008 22:51
a forrás felhasználó

szavazat
6

A technika, ami működik, hogy nézd meg a számított stílus az elem. Ezt alátámasztja az Opera és a Firefox (és felderíteni a szafari, de nem teszteltük). IE (7 legalábbis), egy módszer, hogy egy stílus, de úgy tűnik, hogy akármi is volt a stíluslap nem a kiszámított stílusban. További részletek Quirksmode: Get Styles

Íme egy egyszerű függvény, hogy megragad a használt betűtípus elemet:

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

Ha a CSS szabály az volt:

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

Akkor vissza kell Helvetica, ha az telepítve van, ha nem, Arial, és végül a neve a rendszer alapértelmezett talpatlan. Megjegyezzük, hogy a megrendelő betűtípus a CSS nyilatkozatot jelentős.

Egy érdekes hack akkor is próbálja, hogy létre rengeteg rejtett elemek sok különböző betűtípusok, hogy megpróbálja felismerni mely betűkészletek vannak telepítve a gépen. Biztos vagyok benne, hogy valaki nem tud egy remek font statisztikagyűjtés oldal ezzel a technikával.

Válaszolt 25/08/2008 23:16
a forrás felhasználó

szavazat
7

@pat Tulajdonképpen Safari nem ad a használt betűtípus, Safari helyett mindig visszatér az első betűtípust a verem, függetlenül attól, hogy telepítve van, legalábbis az én tapasztalatom.

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

Feltételezve, Helvetica az egyik telepített / használt, kapsz:

  • „Az én hamis betűtípus” Safari (és úgy vélem, más WebKit böngésző).
  • "Az én hamis font, Helvetica, san-serif" a Gecko böngészők és az IE.
  • „Helvetica” Opera 9, bár olvastam, hogy ők is változnak Operában 10 egyeztetni Gecko.

Vettem egy menetben ezt a problémát, és létrehozta betűtípus Unstack, ami teszteli az egyes font egy halom, és visszaadja az első telepített csak egyet. Ez használ a trükk, hogy @MojoFilter említi, de csak vissza az első, ha több van telepítve. Bár ez nem szenved a gyengeség, @tlrobinson említi (Windows helyettesíti Arial Helvetica a csendben, és jelentették, hogy Helvetica telepítve van), egyébként jól működik.

FontUnstack

Válaszolt 20/05/2009 11:57
a forrás felhasználó

szavazat
27

Írtam egy egyszerű JavaScript eszköz, akkor tudja használni, hogy ellenőrizze, ha a betűtípus telepítve, vagy nem.
Ez használ egyszerű technika és helyesnek kell lennie a legtöbb időt.

jFont Checker GitHubról

Válaszolt 21/05/2011 18:58
a forrás felhasználó

szavazat
6

Egyszerűsített formában van:

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

Ha kell valami még teljesebb, nézd ezt el.

Válaszolt 23/10/2011 14:32
a forrás felhasználó

szavazat
6

Van egy egyszerű megoldás

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

ez a funkció pontosan csinálni, amit akar. A végrehajtás fog visszatérni a Felhasználó / látogató böngészők betűtípus. Remélem ez segít

Válaszolt 29/11/2011 09:40
a forrás felhasználó

szavazat
5

A másik megoldás az lenne, hogy telepítse a betűtípus keresztül automatikusan @font-face, amelyek tagadják a szükségességét kimutatására.

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

Természetesen ez nem oldaná meg a szerzői jogi kérdések, de akkor is mindig használ egy ingyenes font, vagy akár a saját betűtípus. Szüksége lesz .eotés .ttffájlokat működnek a legjobban.

Válaszolt 05/01/2012 12:19
a forrás felhasználó

szavazat
2

Calibri egy font Microsoft által birtokolt, és nem osztják ingyen. Emellett igénylő felhasználó letölt egy adott betűtípus nem nagyon felhasználóbarát.

Azt javasoljuk, licenc megvásárlásával a betűtípus és a beágyazás be az alkalmazás.

Válaszolt 14/11/2012 19:56
a forrás felhasználó

szavazat
1

Akkor használja ezt a weboldalt:

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

Ez pontosan mit akarsz ...

Válaszolt 11/04/2015 20:41
a forrás felhasználó

szavazat
0

Én a betűkkel. Csak meg kell húzza a Kutas gombot könyvjelzősávjában, kattintson rá, majd kattintson egy adott szöveget a honlapon. Ezt követően megjelenik a font a szöveget.

https://fount.artequalswork.com/

Válaszolt 13/03/2017 04:31
a forrás felhasználó

szavazat
0

Tudod, hogy az Adobe Üres a font-family után a betűtípus szeretne látni, és akkor minden glyphs nem abban a betűtípus nem jeleníthető meg.

például:

font-family: Arial, 'Adobe Blank';

Amennyire én tudom, már nincs JS módszer, hogy melyik az írásjelet elemeként kerülnek által nyújtott betűtípust a font verem az adott elem.

Ezt nehezíti az a tény, hogy a böngészők felhasználói beállításait serif / sans-serif / egyterűek betűtípus és ők is saját kódolva visszaesést betűtípusok, hogy ezek használata esetén egy jel nem található sem a betűtípusokat a font verem. Tehát böngésző tehetik néhány írásjelet egy betűtípust, ami nem a font köteg vagy a felhasználó böngészőjének betűtípus beállítása. Chrome Dev Tools megmutatja az egyes renderelt betűtípust a karakterek a kiválasztott elem . Tehát a gépen látható, hogy mit csinál, de nincs módja, hogy elmondja, mi történik a felhasználó számítógépén.

Az is lehetséges, a felhasználó rendszer szerepet játszhat ebben a pl ablak nem betűtípusok helyettesítése az írásjel szinten.

így...

A karakterjelek érdekli, akkor nem lehet tudni, hogy ők fognak megjelenni a felhasználó böngészőjének / rendszer tartalék, akkor is, ha nincs a betűtípus adja meg.

Ha azt szeretnénk, hogy teszteljék azt JS akkor tehetik egyes karakterjelek egy font-family például az Adobe Blank, és mérjük a szélességük, hogy ha ez nulla, DE azt kell végighaladni alapos egyes írásjel és minden betűtípust szeretne próbálni , és bár akkor tudja a betűtípus egy elem font köteg nincs lehet tudni, mi betűtípusok a felhasználó böngészőjének használatára van beállítva, így legalább néhány felhasználó a lista betűtípusok végighaladni hiányosak lesznek. (Ugyancsak nem időtálló, ha új betűtípusok jöjjön ki, és indítsa el megszokni.)

Válaszolt 30/11/2017 10:58
a forrás felhasználó

szavazat
1

Akkor végre css betűtípusok 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>
Válaszolt 12/10/2019 03:14
a forrás felhasználó

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