hangi yazı Tespit bir web sayfasında kullanıldı

oy
110

Benim sayfasında aşağıdaki CSS kuralı olduğunu varsayalım:

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

Nasıl tanımlanan yazı bir kullanıcının tarayıcısında kullanıldığı tespit edebilir?

Ben bunu yapmak istiyorum neden insanlar merak için Düzenleme: yazı ben tespit ettim kabartma diğer yazı bulunmayan ve kullanıcı yazı olmadığında onlar böylece yazı indirmek için kullanıcı soran bir bağlantı görüntülemek istedikleri içeren doğru yazı ile benim web uygulamasını kullanabilirsiniz.

Şu anda tüm kullanıcılar için indirme yazı bağlantı göstererek am, sadece doğru yazı tipinde olmayan kişiler için bu görüntülemek istiyor.

Oluştur 03/08/2008 saat 22:42
kaynak kullanıcı
Diğer dillerde...                            


11 cevaplar

oy
59

Ben şüpheli, ama oldukça güvenilir bir şekilde bir tür yapılır gördük. Temelde, bir eleman, belirli bir yazı tipini kullanmak üzere ayarlanmış ve bir dize o elemana ayarlanır. öğe için yazı tipi kümesi yoksa bunun ana elemanın yazı sürer. Yani, onlar ne hale dizeyi genişliğini ölçmek olduğunu. o türetilmiş yazı aksine onlar istenen yazı tipi için beklediğim eşleşirse, bu hediye.

Geldiği yerler: JavaScript / CSS Yazı Dedektör (ajaxian.com; 2007 12 Mar)

Cevap 03/08/2008 saat 22:51
kaynak kullanıcı

oy
27

Sana bir yazı tipi yüklü olup olmadığını kontrol etmek için kullanabilirsiniz basit bir JavaScript aracı yazdı.
Çok basit tekniği kullanır ve çoğu zaman doğru olmalıdır.

jFont Denetleyicisi github

Cevap 21/05/2011 saat 18:58
kaynak kullanıcı

oy
7

Aslında Safari kullanılan yazı tipini vermez @pat, Safari yerine bakılmaksızın her zaman en az benim deneyim, yüklü olup olmadığını yığını içindeki ilk yazı döndürür.

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

Helvetica kullanılan yüklü bir / olduğunu varsayarsak, elde edersiniz:

  • Safari'de "benim sahte yazı" (ve diğer webkit tarayıcıları inanmak).
  • Gecko tarayıcılar ve IE "benim sahte yazı, Helvetica, san-serif".
  • Onların Gecko maç için Opera 10'da bu değişiyor okumak gerçi Opera 9'da "Helvetica",.

Bu sorun bir geçiş aldı ve bir istif içinde her yazı test eder ve birinci tek yüklü döner Yazı, ayrıştırılması yarattı. Bu @MojoFilter bahseder hile kullanır ama sadece birden yüklenir eğer ilkini döndürür. o @tlrobinson söz ettiği zayıflık muzdarip yok olsa (Windows sessizce Helvetica için Arial yerine edecek ve Helvetica yüklendiğini bildiriyordu), aksi iyi çalışıyor.

FontUnstack

Cevap 20/05/2009 saat 11:57
kaynak kullanıcı

oy
6

Basit bir çözüm var

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

Bu fonksiyon tam olarak ne istediğinizi yapacağız. yürütme O Kullanıcı / ziyaretçi Tarayıcılar Yazı Tipi dönecektir. Bu yardımcı olacaktır Umut

Cevap 29/11/2011 saat 09:40
kaynak kullanıcı

oy
6

Bir basitleştirilmiş biçimidir:

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

Eğer daha eksiksiz bir şey gerekiyorsa, kontrol bu dışarı.

Cevap 23/10/2011 saat 14:32
kaynak kullanıcı

oy
6

Çalışan bir tekniktir elemanının bilgisayarlı tarzı bakmaktır. Bu Opera ve Firefox'ta desteklenir (ve safari Recon, ama test etmedim). IE (7 en azından), bir stil almak için bir yöntem sağlar, ancak stil sayfasında değil, bilgisayarlı tarzı içinde ne olursa olsun gibi görünüyor. Quirksmode daha fazla ayrıntı: Alın Stiller

İşte bir eleman olarak kullanılan yazı tipini kapmak için basit bir fonksiyon var:

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

Eğer bunun için CSS kuralı vardı:

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

Sonra o yüklüyse Helvetica iade değilse, arial ve gereken son olarak, sistem varsayılan sans-serif yazı adı. CSS bildiriminde yazı sipariş önemli olduğunu unutmayın.

Ayrıca deneyebilirsiniz ilginç kesmek bir makinede yüklü olan yazı tiplerini tespit etmek için denemek için farklı yazı tipleri ve birçok gizli elementlerin çok yaratmaktır. Birinin bu teknikle şık yazı istatistik toplama sayfasını yapabilir eminim.

Cevap 25/08/2008 saat 23:16
kaynak kullanıcı

oy
5

Başka bir çözüm otomatik yoluyla yazı tipini yüklemek olacaktır @font-facetespiti zorunluluğunu ortadan kaldıran olabilir.

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

Elbette bunu her zaman kendi yazı tipini yapmak bile ücretsiz yazı tipi kullanın veya olabilir, herhangi bir telif hakkı sorunları çözmek olmaz. Her iki gerekecektir .eot& .ttfiyi çalışması için dosyaları.

Cevap 05/01/2012 saat 12:19
kaynak kullanıcı

oy
2

Calibri, Microsoft tarafından sahip olunan bir yazı olduğunu ve ücretsiz olarak dağıtılan edilmemelidir. Ayrıca, belirli bir yazı tipi indirmek için bir kullanıcı gerektiren derece kullanıcı dostu değildir.

Ben yazı için bir lisans satın alma ve uygulama içine gömerek öneririm.

Cevap 14/11/2012 saat 19:56
kaynak kullanıcı

oy
1

Bu web sitesini kullanabilirsiniz:

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

Bu tam olarak ne istediğinizi yapar ...

Cevap 11/04/2015 saat 20:41
kaynak kullanıcı

oy
0

Sen koyabilirsiniz Adobe Blank hale olmayacak yazı değil sonra herhangi bir glifleri görmek istediğiniz yazı sonrasında font-ailede ve.

Örneğin:

font-family: Arial, 'Adobe Blank';

Bildiğim kadarıyla farkındayım gibi bir elemanda glifleri bu öğe için yazı tipi yığınında hangi yazı tarafından sağlamaktadır hangi söylemenin hiçbir JS yöntemi yoktur.

Bu tarayıcılar serif / sans-serif / tek aralıklı yazı tipleri için kullanıcı ayarları vardır ve onlar da bir kabartma bir yazı tipleri hiçbirinde bulunmazsa onlar kullanacak kendi sabit kodlanmış geri düşmeyi fontları olması gerçeği ile karmaşık yazı yığını. Yani tarayıcı yazı yığını veya kullanıcının tarayıcı yazı ayarında olmayan bir yazı bazı motifleri oluşturmaya devam edebilir. Chrome Geliştirici Araçları, seçilen elemanda glifler için her render yazı gösterecektir . Yani makinenizde bunu yaptığını görebilirsiniz, ancak bir kullanıcının makinesinde neler olduğunu anlatmak için bir yolu yoktur.

Bu örneğin olarak kullanıcının sistem bunda önemli bir rol oynayabilir mümkündür Pencere Yazı Değişiklik yok kabartma düzeyinde.

yani...

İlgilendiğiniz glifler için, onlar belirttiğiniz yazı yok olsa bile, kullanıcının tarayıcı / sistem yedeği tarafından verilecek olup olmayacağını bilmenin bir yolu var.

Eğer JS test etmek istiyorsanız Boş Adobe içeren bir yazı-aile ile bireysel glifleri işlemek ve sıfır olup olmadığını görmek için kendi genişliğini ölçmek olabilir ANCAK sunduğu ayrıntılı Her glif yineleme olurdu ve her test etmek istedi yazı tipi , bir elemanlar yazı yığınında fontları bilebilir rağmen ancak kullanıcıların en azından bazıları eksik olacaktır yinelemenize yazı tiplerinin listesi için çok kullanmak üzere yapılandırılmış kullanıcının tarayıcısını yazı tiplerini bilmenin bir yolu yoktur. (Yeni yazı tipleri çıkıp alışmak başlarsan O değil geleceğe uyumlu da budur.)

Cevap 30/11/2017 saat 10:58
kaynak kullanıcı

oy
0

Ben Fount kullanıyorum. Sadece senin imleri çubuğuna Fount düğmesine sürükleyin üzerine tıklayın ve ardından web sitesinde belirli bir metne tıklamanız gerekiyor. Daha sonra bu metnin yazı tipini gösterecektir.

https://fount.artequalswork.com/

Cevap 13/03/2017 saat 04:31
kaynak kullanıcı

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