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

Yerel Yazı Tipi Erişimi API'si, kullanıcının yerel olarak yüklü yazı tipi verilerine (adlar, stiller ve aileler gibi üst düzey ayrıntılar ve temel yazı tipi dosyalarının ham baytları dahil) erişmek için bir mekanizma sağlar. SVG düzenleme uygulaması Boxy SVG'nin bu API'den nasıl yararlandığını öğrenin.

Thomas Steiner

Jarek Foksa

Giriş

(Bu makaleyi video olarak da inceleyebilirsiniz.)

Boxy SVG, bir vektör grafik düzenleyicisidir. SVG dosya biçimindeki çizimleri düzenlemek, resimler, logolar, simgeler ve diğer grafik tasarım öğelerini oluşturmak için kullanılır. Polonyalı geliştirici Jarosław Foksa tarafından geliştirilen uygulama ilk olarak 15 Mart 2013'te yayınlandı. Jarosław, uygulamaya eklediği yeni özellikleri duyurduğu bir Boxy SVG blogu işletiyor. Geliştirici, Chromium'un Fugu projesinin sıkı bir destekçisi ve uygulamanın fikir takipçisinde Fugu etiketi bile var.

Boxy SVG'de Yerel Yazı Tipi Erişimi API'sı

Jarosław'un blogunda bahsettiği yeni özelliklerden biri Local Font Access API idi. Yerel Yazı Tipi Erişimi API'si, kullanıcıların yerel olarak yüklenen yazı tiplerine (adlar, stiller ve aileler gibi üst düzey ayrıntılar ve temel yazı tipi dosyalarının ham baytları dahil) erişmesine olanak tanır. Aşağıdaki ekran görüntüsünde, uygulamaya MacBook'umda yerel olarak yüklü yazı tiplerine nasıl erişim izni verdiğimi ve metnim için Marker Felt 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, öncelikle web tarayıcısının Yerel Yazı Tipi Erişimi API'sini destekleyip desteklemediğini kontrol eder.

Ayrıca API'nin eski deneysel sürümünü kontrol eder ve varsa kullanır. 2023'ten itibaren, yalnızca deneysel Chrome işaretleri aracılığıyla kısa bir süre kullanılabildiği için eski API'yi 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 gri olur. 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 sistemindeki tüm yazı tiplerinin listesini almak için Yerel Yazı Tipi Erişimi API'si kullanılır. İzin hatalarını düzgün şekilde işlemek için gereken try…catch bloğuna 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, bundan 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ı tipleri 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ı 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örüntüleyebilir:

Boxy SVG'nin listeyi <bx-fontfamilypicker> adlı özel bir öğede oluşturduğunu ve her yazı tipi listesi öğesine, belirli yazı tipi ailesinde gösterilecek şekilde stil uyguladığını 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ı tipi özelliği, kullanıcıların tasarımları ve çalışmaları için yerel yazı tiplerine erişebilmesini sağladığı için çok popüler oldu. API şekli değiştiğinde ve özellik kısa süreliğine çalışmadığında kullanıcılar bunu hemen fark etti. Jarosław, kodu hızlı bir şekilde yukarıdaki snippet'te görebileceğiniz savunma amaçlı kalıba değiştirdi. Bu kalıp, güncel Chrome ile ve en son sürüme geçmemiş diğer Chromium türevleriyle çalışır. Boxy SVG'yi deneyin ve yerel olarak yüklenen yazı tiplerinizi kontrol edin. Zapf Dingbats veya Webdings gibi uzun zamandır unutulmuş klasikleri keşfedebilirsiniz.