Vektör resim düzenleme uygulaması Boxy SVG'nin, kullanıcıların en sevdikleri yerel yazı tiplerini seçmesine olanak tanımak için Local Font Access API'den yararlanma şekli

Local Font Access API, kullanıcının yerel olarak yüklenen yazı tipi verilerine (adlar, stiller ve aileler gibi üst düzey ayrıntılar ve temel yazı tipi dosyalarının işlenmemiş bayt verileri dahil) erişmek için bir mekanizma sağlar. SVG düzenleme uygulaması Boxy SVG'nin bu API'yi nasıl kullandığını öğrenin.

Giriş

(Bu makale video biçiminde de mevcuttur.)

Boxy SVG, bir vektör grafik düzenleyicidir. Asıl kullanım alanı; çizimler, logolar, simgeler ve diğer grafik tasarım öğelerini oluşturmak amacıyla çizimleri SVG dosya biçiminde düzenlemektir. Polonyalı geliştirici Jarosław Foksa tarafından geliştirildi ve ilk olarak 15 Mart 2013'te yayınlandı. Jarosław, uygulamaya eklediği yeni özellikleri duyurduğu bir Boxy SVG blogu yayınlıyor. Chromium'un Project Fugu'sunu güçlü bir şekilde destekleyen Jarosław, uygulamanın fikir izleyicisinde Fugu etiketi de bulunuyor.

Boxy SVG'deki Local Font Access API'yi

Jarosław'un blogunu yazdığı bir diğer özellik de Local Font Access API'ydi. Local Font Access API, kullanıcıların adlar, stiller ve aileler gibi daha üst düzey ayrıntılar ve temel yazı tipi dosyalarının işlenmemiş baytları dahil olmak üzere yerel olarak yüklenen yazı tiplerine erişmelerini sağlar. Aşağıdaki ekran görüntüsünde, uygulamaya MacBook'umda yerel olarak yüklenen yazı tipleri için nasıl erişim izni verdiğimi ve metnim için İşaretçi Keçe yazı tipini nasıl seçtiğimi görebilirsiniz.

Temel kod oldukça basittir. Kullanıcı, yazı tipi ailesi seçiciyi ilk kez açtığında, uygulama ilk olarak web tarayıcısının Local Font Access API'yi destekleyip desteklemediğini kontrol eder.

Ayrıca, API'nin eski deneysel sürümünü de kontrol eder ve varsa API'yi kullanır. Deneysel Chrome flag'leri aracılığıyla kısa bir süreliğine kullanıma sunulan eski API'yi 2023 itibarıyla güvenle yoksayabilirsiniz. Ancak bazı Chromium türevleri bu API'yi kullanmaya devam edebilir.

let isLocalFontsApiEnabled = (
  // Local Font Access API, Chrome >= 102
  window.queryLocalFonts !== undefined ||
  // Experimental Local Font Access API, Chrome < 102
  navigator.fonts?.query !== undefined
);

Local Font Access API kullanılamıyorsa yazı tipi ailesi seçici griye döner. Kullanıcıya yazı tipi listesi yerine bir yer tutucu metin gösterilir:

if (isLocalFontsApiEnabled === false) {
  showPlaceholder("no-local-fonts-api");
  return;
}

Aksi takdirde, işletim sisteminden tüm yazı tiplerinin listesini almak için Local Font Access API kullanılır. İzin hatalarını düzgün bir şekilde işlemek için gerekli olan try…catch blokuna dikkat edin.

let localFonts;

if (isLocalFontsApiEnabled === true) {
  try {
    // Local Font Access API, Chrome >= 102
    if (window.queryLocalFonts) {
      localFonts = await window.queryLocalFonts();
    }
    // Experimental Local Font Access API, Chrome < 102
    else if (navigator.fonts?.query) {
      localFonts = await navigator.fonts.query({
        persistentAccess: true,
      });
    }
  } catch (error) {
    showError(error.message, error.name);
  }
}

Yerel yazı tipleri listesi alındıktan sonra listeden basitleştirilmiş ve normalleştirilmiş bir fontsIndex oluşturulur:

let fontsIndex = [];

for (let localFont of localFonts) {
  let face = "400";

  // Determine the face name
  {
    let subfamily = localFont.style.toLowerCase();
    subfamily = subfamily.replaceAll(" ", "");
    subfamily = subfamily.replaceAll("-", "");
    subfamily = subfamily.replaceAll("_", "");

    if (subfamily.includes("thin")) {
      face = "100";
    } else if (subfamily.includes("extralight")) {
      face = "200";
    } else if (subfamily.includes("light")) {
      face = "300";
    } else if (subfamily.includes("medium")) {
      face = "500";
    } else if (subfamily.includes("semibold")) {
      face = "600";
    } else if (subfamily.includes("extrabold")) {
      face = "800";
    } else if (subfamily.includes("ultrabold")) {
      face = "900";
    } else if (subfamily.includes("bold")) {
      face = "700";
    }

    if (subfamily.includes("italic")) {
      face += "i";
    }
  }

  let descriptor = fontsIndex.find((descriptor) => {
    return descriptor.family === localFont.family);
  });

  if (descriptor) {
    if (descriptor.faces.includes(face) === false) {
      descriptor.faces.push(face);
    }
  } else {
    let descriptor = {
      family: localFont.family,
      faces: [face],
    };

    fontsIndex.push(descriptor);
  }
}

for (let descriptor of fontsIndex) {
  descriptor.faces.sort();
}

Normalleştirilmiş yazı tipi dizini, daha sonra IndexedDB veritabanında saklanır. Böylece kolayca sorgulanabilir, uygulama örnekleri arasında paylaşılabilir ve oturumlar arasında korunabilir. Boxy SVG, veritabanını yönetmek için Dexie.js'yi kullanır:

let database = new Dexie("LocalFontsManager");
database.version(1).stores({cache: "family"}).
await database.cache.clear();
await database.cache.bulkPut(fontsIndex);

Veritabanı doldurulduktan sonra yazı tipi seçici widget'ı veritabanını sorgulayabilir ve sonuçları ekranda gösterebilir:

Boxy SVG'nin listeyi <bx-fontfamilypicker> adlı özel bir öğede oluşturduğunu ve her yazı tipi liste öğesini belirli yazı tipi ailesinde görüntülenecek şekilde biçimlendirdiğini belirtmek gerekir. Boxy SVG, sayfanın geri kalanından izole etmek için bu ve diğer özel öğelerde Gölge DOM'u kullanır.

Sonuçlar

Yerel yazı tipleri özelliği son derece popüler bir uygulamadır. Kullanıcılar, tasarımları ve yaratımları için kendi yerel yazı tiplerine erişmekten keyif alırlar. API şekli değiştiğinde ve söz konusu özellik kısa süreliğine bozulduğunda kullanıcılar bunu hemen fark etti. Jarosław, yukarıdaki snippet'te görebileceğiniz, güncel Chrome ile ve en son sürüme geçmemiş diğer Chromium türevleriyle çalışan kodu savunma kalıbına hızlıca değiştirdi. Boxy SVG'yi deneyin ve yerel olarak yüklenen yazı tiplerinize göz atmayı unutmayın. Zapf Dingbats veya Webdings gibi uzun zamandır unutulmuş bazı klasikleri keşfedebilirsiniz.