Tarayıcıda render metnin bir fontunu, belki bir tarayıcı uzantısıyla

Question

alabilirsiniz. font-family değerini window.getComputedStyle() numaralı telefondan alabileceğinizi biliyorum, fakat bu işlem her zaman için bir tarayıcı tarafından kullanılan font değil. Örneğin, verilen metin font ailesinin taşımadığı (çok dilli) metin içeriyorsa, tarayıcı metni kısmen sistem yazı tipiyle işler.

yerleşik web geliştirici aracı bir göz atacak olursak, ya Chrome veya Firefox, ikisi de kullanıldığı tam fontları görüntülemek (Firefox üzerinde Chrome'da Rendered Fonts bölmesi veya Fonts sekmesi) için küçük bir alana sahiptir. Firefox için, sanırım this code kullanılıyor ve dahili API'yi çağırıyor gibi görünüyor.

JavaScript toprağından veya başka birinden tam font almak için DOM uyumlu (veya satıcıya özel) bir yol arıyorum. Bu, sayfa içi kodun erişmesi için API/enjekte etme bilgisi sağlamak için bir tarayıcı uzantısı/eklentisi yazmak anlamına gelirse, bu en kötü durumdur, ancak kabul edilebilir.

Answer 1

Bir hack ile yapabilirsiniz: ana fikir, belirli bir yazı tipiyle satır içi öğelerin boyutunu karşılaştırmaktır. Biri, tam bir font-aile değerini kullanmalıdır, başka bir sadece tek bir font-aile. İşte oldukça iyi çalışan a proof of concept.

// Look at the fiddle for full working code 
function createFontTester(fontFamily) { 
    var container = document.createElement('div'); 
    var tester = document.createElement('div'); 

    container.style.position = 'absolute'; 
    container.style.overflow = 'auto'; 
    container.style.visibility = 'hidden'; 

    tester.style.fontFamily = fontFamily; 
    tester.style.display = 'inline'; 
    tester.style.visibility = 'hidden'; 

    // The size should be big enough to make a visual difference 
    tester.style.fontSize = '100px'; 

    // Reset and prevent line breaks 
    tester.style.fontWeight = 'normal'; 
    tester.style.fontStyle = 'normal'; 
    tester.style.letterSpacing = 'normal'; 
    tester.style.lineHeight = 'normal'; 
    tester.style.whiteSpace = 'nowrap'; 

    document.body.appendChild(container); 
    container.appendChild(tester); 

    return tester; 
} 

Bazı yazı tiplerinin, çoğu karakterin aynı alana girmesiyle çok benzer olduğunu unutmayın. Örneğin Helvetica ve Arial'i ele alalım: karakter genişliği çoğunlukla aynı, yükseklik biraz farklı olduğundan büyük bir font boyutu kullandım.

Bu yöntem büyük ihtimalle kurşun geçirmez değildir, ancak düşünebildiğim her yazı tipi ailesi için çalışır.

Güncelleştirme: Github'da daha fazla kullanım durumunu ele alan this little library yaptım.