Bir web sayfasında tanımlanmış yazı tipinden hangisinin kullanıldığını nasıl tespit edebilirim?

Sayfamda aşağıdaki CSS kuralına sahip olduğumu varsayalım:

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

Kullanıcının tarayıcısında tanımlı fontlardan hangisinin kullanıldığını nasıl tespit edebilirim?

Bunu neden yapmak istediğimi merak eden insanlar için düzenleyin: Tespit ettiğim yazı tipi, diğer yazı tiplerinde bulunmayan glifler içeriyor ve kullanıcı yazı tipine sahip olmadığında, kullanıcıdan bu yazı tipini indirmelerini isteyen bir bağlantı görüntülemek istiyorum. web uygulamamı doğru yazı tipiyle kullanabilir.

Şu anda tüm kullanıcılar için yazı tipi indirme bağlantısını görüntülüyorum, bunu sadece doğru yazı tipine sahip olmayan kişiler için görüntülemek istiyorum.

Bir tür iffy ama oldukça güvenilir bir şekilde yapıldığını gördüm. Temel olarak, bir öğe belirli bir yazı tipini kullanacak şekilde ayarlanır ve bu öğeye bir dize ayarlanır. Öğe için ayarlanan yazı tipi yoksa, üst öğenin yazı tipini alır. Yani, yaptıkları işlenmiş dizenin genişliğini ölçmektir. Türetilmiş yazı tipinden farklı olarak, istenen yazı tipi için bekledikleriyle eşleşirse, mevcut olur. Bu, tek aralıklı yazı tipleri için çalışmaz.

İşte geldiği yer: Javascript / CSS Font Detector (ajaxian.com; 12 Mar 2007)

Bir fontun yüklü olup olmadığını kontrol etmek için kullanabileceğiniz basit bir JavaScript aracı yazdım.
Basit bir teknik kullanır ve çoğu zaman doğru olmalıdır.

github üzerinde jFont Denetleyicisi

@pat Aslında, Safari kullanılan yazı tipini vermez, bunun yerine Safari, en azından benim deneyimime göre, yüklü olup olmadığına bakılmaksızın her zaman yığındaki ilk yazı tipini döndürür.

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

Helvetica'nın kurulu / kullanılmış olduğunu varsayarsak, şunları elde edersiniz:

• Safari'de "sahte yazı tipim" (ve diğer webkit tarayıcılarına inanıyorum).
• Gecko tarayıcılarında ve IE'de "sahte yazı tipim, helvetica, san-serif".
• Opera 9'da "helvetica", ancak Opera 10'da bunu Gecko ile eşleşecek şekilde değiştirdiklerini okudum.

Bu soruna bir geçiş yaptım ve bir yığındaki her yazı tipini test eden ve yalnızca ilk yüklü olanı döndüren Font Unstack'ı oluşturdum . @MojoFilter'in bahsettiği hileyi kullanır, ancak yalnızca birden fazla yüklenmişse ilkini döndürür. @Tlrobinson'un bahsettiği zayıflıktan muzdarip olsa da (Windows, Arial'ı Helvetica'nın yerine sessizce alacak ve Helvetica'nın kurulu olduğunu bildirecektir), aksi takdirde iyi çalışır.

İşleyen bir teknik, elemanın hesaplanan stiline bakmaktır. Bu Opera ve Firefox'ta desteklenir (ve ben safariye gidiyorum, ama test etmedim). IE (en az 7), bir stil elde etmek için bir yöntem sağlar, ancak hesaplanan stil değil, stil sayfasında ne varsa öyle görünüyor. Quirksmode: Get Styles hakkında daha fazla bilgi

Bir öğede kullanılan yazı tipini yakalamak için basit bir işlev şunlardır:

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

Bunun için CSS kuralı şuysa:

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

Daha sonra, yüklü değilse, arial ve son olarak, sistem varsayılan sans-serif yazı tipinin adı helvetica döndürmelidir. CSS bildiriminizdeki yazı tiplerinin sıralanmasının önemli olduğunu unutmayın.

Ayrıca deneyebileceğiniz ilginç bir kesmek, bir makinede hangi yazı tiplerinin yüklü olduğunu algılamaya çalışmak için birçok farklı yazı tipiyle birçok gizli öğe oluşturmaktır. Eminim birisi bu teknikle şık bir yazı tipi istatistik toplama sayfası yapabilir.

Basitleştirilmiş bir form:

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

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

Basit bir çözüm var - sadece kullanın element.style.font:

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

Bu işlev tam olarak ne istediğinizi yapar. Yürütme sırasında Kullanıcının / tarayıcının yazı tipi türünü döndürür. Umarım bu yardımcı olur.

Başka bir çözüm, @font-facealgılama ihtiyacını ortadan kaldırabilecek yazı tipini otomatik olarak yüklemek olacaktır .

@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 herhangi bir telif hakkı sorununu çözmez, ancak her zaman ücretsiz bir yazı tipi kullanabilir veya hatta kendi yazı tipinizi oluşturabilirsiniz. Her iki gerekecektir .eot& .ttfiyi işe dosyaları.

Calibri, Microsoft'a ait bir yazı tipidir ve ücretsiz olarak dağıtılmamalıdır. Ayrıca, bir kullanıcının belirli bir yazı tipini indirmesini istemek çok kullanıcı dostu değildir.

Yazı tipi için bir lisans satın almanızı ve uygulamanıza katıştırmanızı öneririm.

Fount kullanıyorum. Fount düğmesini yer imleri çubuğunuza sürüklemeniz, tıklamanız ve ardından web sitesindeki belirli bir metni tıklamanız yeterlidir. Daha sonra bu metnin yazı tipini gösterecektir.

https://fount.artequalswork.com/

Bu web sitesini kullanabilirsiniz:

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

Tam olarak ne istersen yapar ...

Adobe Blank'ı , görmek istediğiniz yazı tipinden sonra yazı tipi ailesine koyabilirsiniz ; bu yazı tipinde olmayan glifler görüntülenmez.

Örneğin:

font-family: Arial, 'Adobe Blank';

Bildiğim kadarıyla, bir öğedeki hangi gliflerin, o öğenin yazı tipi yığınındaki hangi yazı tipi tarafından oluşturulduğunu söylemek için JS yöntemi yoktur.

Bu, tarayıcıların serif / sans-serif / monospace fontları için kullanıcı ayarlarına sahip olması ve ayrıca bir fonttaki fontlarda herhangi bir glif bulunmazsa kullanacakları kendi sabit kodlu geri dönüş fontlarına sahip olması nedeniyle karmaşıktır. yazı tipi yığını. Bu nedenle tarayıcı, yazı tipi yığınında veya kullanıcının tarayıcı yazı tipi ayarında olmayan bir yazı tipinde bazı glifler oluşturabilir. Chrome Geliştirme Araçları, seçilen öğedeki glifler için oluşturulan her bir yazı tipini gösterir . Böylece makinenizde ne yaptığını görebilirsiniz, ancak bir kullanıcının makinesinde neler olduğunu anlamanın bir yolu yoktur.

Kullanıcının sistemi bunun gibi bir parçayı da oynatabilir, örn. Pencere glif düzeyinde Yazı Tipi Değişimi yapar .

yani...

İlgilendiğiniz glifler için, belirttiğiniz yazı tipine sahip olmasalar bile kullanıcının tarayıcısı / sistem yedeklemesi tarafından oluşturulup oluşturulmayacağını bilmenin bir yolu yoktur.

JS'de test etmek isterseniz, Adobe Blank dahil bir yazı tipi ailesiyle tek tek glifler oluşturabilir ve sıfır olup olmadığını görmek için genişliklerini ölçebilirsiniz, ancak her glifi ve test etmek istediğiniz her yazı tipini ayrıntılı olarak yinelemeniz gerekir , ancak bir öğe yazı tipi yığınındaki yazı tiplerini bilmenize rağmen, kullanıcının tarayıcısının hangi yazı tiplerini kullanacak şekilde yapılandırıldığını bilmenin bir yolu yoktur, bu nedenle en azından bazı kullanıcılarınız için yinelediğiniz yazı tipi listesi eksik olur. (Yeni yazı tiplerinin çıkıp kullanılmaya başlaması da geleceğin kanıtı değildir.)