Yerel yazı tipleriyle gelişmiş yazı biçimi kullanma

Local Font Access API'nin, kullanıcının yerel olarak yüklenen yazı tiplerine erişmenize ve bunlarla ilgili alt düzey ayrıntıları öğrenmenize nasıl olanak sağladığını öğrenin

Thomas Steiner

Web'de güvenli yazı tipleri

Yeterince uzun süredir web geliştirme yapıyorsanız, web'de güvenli yazı tipleri ile uyumludur. Bu yazı tipleri, en çok kullanılan işletim sistemlerinin neredeyse tüm örneklerinde kullanılabilir. (ör. Windows, macOS, en yaygın Linux dağıtımları, Android ve iOS). 2000'lerin başında, Microsoft tarafından yapılan bir araştırmaya girişim Web için TrueType temel yazı tipleri adı verilen ve bu yazı tiplerini ücretsiz olarak "bunları belirten bir Web sitesini her ziyaret ettiğinizde, sayfaları tam olarak site tasarımcısına yönelik". Evet, bu dahil, şurada ayarlanmış siteler: Comic Sans MS kapsamındadır. Burada klasik web için güvenli yazı tipi yığını (kullandığınız her türlü sans-serif yazı tipi) aşağıdaki gibi görünebilir:

body {
  font-family: Helvetica, Arial, sans-serif;
}

Web yazı tipleri

Web için güvenli yazı tiplerinin gerçekten önemli olduğu günler çoktan geride kaldı. Bugün, web yazı tipleri Hatta değişken yazı tipleri için daha fazla düzenleme yapabileceğimiz eksenleri de görebilirsiniz. Web yazı tiplerini bir CSS'nin başında @font-face blok, Bu kod indirilecek yazı tipi dosyalarını belirtir:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

Bundan sonra, font-family, normal şekilde:

body {
  font-family: 'FlamboyantSansSerif';
}

Parmak izi vektörü olarak yerel yazı tipleri

Çoğu web yazı tipi de web'den gelir. Ancak ilginç bir bilgi de @font-face içinde src mülkü beyanın dışında url() işlevini de kabul eder local() işlevini kullanın. Bu, özel yazı tiplerinin yerel olarak yüklenmesine olanak tanır (şaşırtıcı!). Kullanıcı, FlamboyantSansSerif yüklüyse indirildiğinde:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

Bu yaklaşım, bant genişliğinden tasarruf sağlama potansiyeli olan güzel bir yedek mekanizması sağlar. İnternette maalesef sunabileceğimiz iyi şeyler olamaz. local() işleviyle ilgili sorun, kötüye kullanım. Kullanıcı tarafından yüklenen yazı tiplerinin listesi ortaya çıkarır. Pek çok şirket çalışanların yazı tiplerine ve bu yazı tiplerine dizüstü bilgisayarlar. Örneğin, Google'ın Google Sans adında kurumsal bir yazı tipi vardır.

Google Sans yazı tipinin önizlemesini gösteren macOS Font Book uygulaması.
Bir Google çalışanının dizüstü bilgisayarına Google Sans yazı tipi yüklenmiş.

Bir saldırgan, bir saldırganın varlığını test ederek bir kişinin hangi şirket için çalıştığını belirlemeye çalışabilir. Google Sans gibi bilinen çok sayıda kurumsal yazı tipi. Saldırganın metni oluşturmaya çalışması bir tuval üzerinde yer alan bu yazı tiplerini belirleyip karakterleri ölçtüğünüzden emin olun. Glifler, çemberin bilinen şekliyle eşleşirse saldırıya uğrayan bir saldırıya uğramış olur. Glifler eşleşmezse saldırgan, şirket yazı tipi yüklenmediği için varsayılan yeni yazı tipi kullanıldı. Ayrıntılı bilgi için tarayıcı parmak izi saldırılarını gerçekleştirmek için anket kağıdı: Laperdix ve diğerleri

Şirket yazı tiplerini birbirinden farklı kılan, sadece yüklenen yazı tiplerinin listesi bile tanımlanabilir. Paydaşlarla bu saldırı vektörü o kadar kötü hale geldi ki WebKit ekibi karar verdi "yalnızca [mevcut yazı tipleri listesindeki] web yazı tiplerini ve yerel olarak kullanıcı tarafından yüklenmiş yazı tiplerini değil." (İşte buradayım. Erişim izni vermeyle ilgili bir makaleyle yerel yazı tipleri.)

Local Font Access API

Bu makalenin başlangıcı sizi olumsuz yönde etkilemiş olabilir. Her şeyin yolunda gittiğini şeyler mi? Üzülmeyin. Biz bunları yapabiliriz. hiçbir şey umutsuz değildir. Ama önce kendinize sorabileceğiniz bir soruyu yanıtlamak istiyorum.

Web yazı tipleri varken neden Local Font Access API'ye ihtiyacımız var?

Geçmişten bugüne kadar profesyonel kalitede tasarım ve grafik araçlarının yerine yardımcı olur. Engellediğiniz bir engel, tüm çevrimiçi ortamlardan profesyonel olarak yararlanamaması tasarımcıların yerel olarak yüklediği birçok ipucuna sahip yazı tipleri. Web yazı tipleri bazı yayıncılık olanaklarını sağlar kullanım alanları, ancak API'lerin kullandığı vektör glif şekillerine ve yazı tipi tablolarına glif ana hatlarını oluşturmak için pikselleştiriciler. Benzer şekilde, bir web yazı tipinin ikili programına da dışı verilerdir.

  • Tasarım araçlarının kendi OpenType düzenini uygulamaları için yazı tipi baytlarına erişmesi gerekir. Vektör filtreleri uygulamak gibi işlemler için, daha alt düzeylerde ilgi çekecek dönüştüğünü görebilirsiniz.
  • Geliştiriciler, uygulamaları için web'e taşıdıkları eski yazı tipi yığınlarına sahip olabilir. Bu yığınları kullanmak için genellikle yazı tipi verilerine doğrudan erişim gerekir. Web yazı tipleri sağlar.
  • Bazı yazı tipleri web üzerinden teslim edilmek üzere lisanslanmamış olabilir. Örneğin, Linotype'ın yalnızca masaüstü kullanımı içeren bazı yazı tipleri.

Local Font Access API bu zorlukları çözmeye yönelik bir girişimdir. İki bölümden oluşur:

  • Kullanıcıların mevcut sistem grubunun tamamına erişim izni vermesini sağlayan bir yazı tipi numaralandırma API'si yazı tipleri.
  • Her numaralandırma sonucundan düşük düzey (bayt odaklı) SFNT kapsayıcısı isteme olanağı erişimi vardır.

Tarayıcı desteği

Tarayıcı Desteği

  • Chrome: 103..
  • Kenar: 103..
  • Firefox: Desteklenmez..
  • Safari: desteklenmez..

Kaynak

Local Font Access API'yi kullanma

Özellik algılama

Local Font Access API'nin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}

Yerel yazı tiplerini numaralandırma

Yerel olarak yüklenen yazı tiplerinin listesini almak için window.queryLocalFonts() işlevini çağırmanız gerekir. İlgili içeriği oluşturmak için kullanılan ilk defada bir izin istemi tetiklenir. Kullanıcı bu istemi onaylayabilir veya reddedebilir. Kullanıcı sorgulanacak yerel yazı tiplerini onayladığında, tarayıcı, yazı tipi verilerini içeren bir dizi döndürür. bunu yapabilirsiniz. Her bir yazı tipi, family özelliklerine sahip bir FontData nesnesi olarak gösterilir (örneğin, "Comic Sans MS"), fullName (örneğin, "Comic Sans MS"), postscriptName (için örnek, "ComicSansMS") ve style (örneğin, "Regular").

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

Yalnızca belirli bir yazı tipi alt kümesiyle ilgileniyorsanız bunları PostScript'e göre filtreleyebilirsiniz. adlarını değiştirmek için postscriptNames parametresinden yararlanın.

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

SFNT verilerine erişme

Tam SFNT erişimi,blob() FontData nesne. SFNT, PostScript gibi başka yazı tiplerini içerebilen bir yazı tipi dosyası biçimidir. TrueType, OpenType, Web Open Font Format (WOFF) yazı tipleri ve diğerleri.

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

Demo

Local Font Access API'nin nasıl çalıştığını şurada görebilirsiniz: demo bölümüne göz atın. Ek olarak, kaynak kodu. Demo <font-select> adlı özel bir öğe gösterir. yerel yazı tipi seçici uygular.

Gizlilik konusunda dikkat edilmesi gereken noktalar

"local-fonts" izninin, dijital parmak izini yüksek bir yüzey sağladığı anlaşılıyor. Ancak, tarayıcılar istedikleri her şeyi döndürebiliyor. Örneğin, anonimlik odaklı tarayıcılar sağlamak için yalnızca tarayıcıda yerleşik olarak bulunan bir dizi varsayılan yazı tipi sağlar. Benzer şekilde, tarayıcılarınızın özelliğini kullanmanızı öneririz.

Mümkün olan her yerde, Local Font Access API yalnızca tam olarak bilgileri gösterecek şekilde tasarlanmıştır. gerekli olabilir. System API'leri, yazı tipi yükleme sırasına göre düzenleyebilirsiniz. Tam olarak şu listeyi döndürüyor: sistem API'leri tarafından sağlanan yüklü yazı tipleri, bu tür kullanımlar için kullanılabilecek ek veriler dijital parmak izi ve etkinleştirmek istediğimiz kullanım alanları, bu siparişin korunmasıyla desteklenmemektedir. Kullanıcı bu API, döndürülen verilerin döndürülmeden önce sıralanmasını gerektirir.

Güvenlik ve izinler

Chrome ekibi, Virtual Font Access API'yi temel ilkeleri kullanarak Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve ergonomi.

Kullanıcı denetimi

Kullanıcının yazı tiplerine erişim tamamen onun denetimindedir ve "local-fonts" izni izin kaydı yapıldığından emin olun.

Şeffaflık

Bir siteye, kullanıcının yerel yazı tiplerine erişim verilip verilmeyeceği site bilgi sayfasını ziyaret edin.

İzin kalıcılığı

"local-fonts" izni, sayfa yeniden yüklemeleri arasında kalıcı olur. Aşağıdaki yöntemlerle iptal edilebilir: site bilgileri sayfasını ziyaret edin.

Geri bildirim

Chrome ekibi, Local Font Access API ile ilgili deneyimleriniz hakkında bilgi almak istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şeyler mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi neden olabilir.

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın. basit yeniden oluşturma talimatlarını uygulayın ve Bileşenler kutusuna Blink>Storage>FontAccess yazın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

Local Font Access API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome ekibinin şunları yapmasına yardımcı olur: ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #LocalFontAccess ve izin onu nerede ve nasıl kullandığınızı bilmemiz gerekir.

Teşekkür

Local Font Access API spesifikasyonu tarafından düzenlendi Emil A. Eklund, Alex Russell, Joshua Bell ve Olivier Yiptong Bu makale tarafından incelendi Ali Demir, Dominik Röttsches ve Olivier Yiptong. Hero görseli Brett Jordan açık Lansmanı kaldırın.