Menggunakan tipografi lanjutan dengan font lokal

Pelajari cara Local Font Access API memungkinkan Anda mengakses font yang diinstal secara lokal oleh pengguna dan mendapatkan detail tingkat rendah tentang font tersebut

Thomas Steiner

Sukses: Local Font Access API adalah bagian dari project kemampuan dan kini tersedia dari Chrome 103 di desktop.

Font aman web

Jika sudah cukup lama melakukan pengembangan web, Anda mungkin ingat yang disebut font web yang aman. Font ini diketahui tersedia di hampir semua instance sistem operasi yang paling banyak digunakan (yaitu Windows, macOS, distribusi Linux yang paling umum, Android, dan iOS). Pada awal tahun 2000-an, Microsoft bahkan mempelopori inisiatif yang disebut font inti TrueType untuk Web yang menyediakan font ini untuk didownload secara gratis dengan tujuan bahwa "setiap kali Anda mengunjungi situs Web yang menentukannya, Anda akan melihat halaman persis seperti yang diinginkan desainer situs". Ya, ini termasuk situs yang ditetapkan dalam Comic Sans MS. Berikut adalah stack font aman web klasik (dengan penggantian akhir dari font sans-serif apa pun) yang mungkin terlihat seperti ini:

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

Font web

Zaman ketika font web safe sangat penting sudah lama berlalu. Saat ini, kita memiliki font web, beberapa di antaranya bahkan merupakan font variabel yang dapat kita sesuaikan lebih lanjut dengan mengubah nilai untuk berbagai sumbu yang ditampilkan. Anda dapat menggunakan font web dengan mendeklarasikan blok @font-face di awal CSS, yang menentukan file font yang akan didownload:

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

Setelah itu, Anda dapat menggunakan font web kustom dengan menentukan font-family, seperti biasa:

body {
  font-family: 'FlamboyantSansSerif';
}

Font lokal sebagai vektor sidik jari

Sebagian besar font web berasal dari web. Namun, fakta yang menarik adalah properti src dalam deklarasi @font-face, selain fungsi url(), juga menerima fungsi local(). Hal ini memungkinkan font kustom dimuat (kejutan!) secara lokal. Jika pengguna kebetulan telah menginstal FlamboyantSansSerif di sistem operasinya, salinan lokal akan digunakan, bukan didownload:

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

Pendekatan ini memberikan mekanisme penggantian yang baik yang berpotensi menghemat bandwidth. Sayangnya, di Internet, kita tidak bisa memiliki hal-hal yang bagus. Masalah dengan fungsi local() adalah fungsi tersebut dapat disalahgunakan untuk pembuatan sidik jari browser. Ternyata, daftar font yang telah diinstal pengguna dapat menjadi ciri khasnya. Banyak perusahaan memiliki font perusahaan mereka sendiri yang diinstal di laptop karyawan. Misalnya, Google memiliki font perusahaan yang disebut Google Sans.

Font Google Sans yang diinstal di laptop karyawan Google.

Penyerang dapat mencoba menentukan perusahaan tempat seseorang bekerja dengan menguji keberadaan font perusahaan yang dikenal dalam jumlah besar seperti Google Sans. Penyerang akan mencoba merender teks yang ditetapkan dalam font ini di kanvas dan mengukur glyph. Jika glyph cocok dengan bentuk font perusahaan yang diketahui, penyerang akan mendapatkan hit. Jika glyph tidak cocok, penyerang tahu bahwa font pengganti default digunakan karena font perusahaan tidak diinstal. Untuk mengetahui detail lengkap tentang serangan sidik jari browser ini dan lainnya, baca makalah survei oleh Laperdix et al.

Selain font perusahaan, bahkan daftar font yang diinstal dapat menjadi identitas. Situasi dengan vektor serangan ini menjadi sangat buruk sehingga baru-baru ini tim WebKit memutuskan untuk "hanya menyertakan font web dan font [dalam daftar yang tersedia] yang disertakan dengan sistem operasi, tetapi bukan font yang diinstal pengguna secara lokal". (Dan di sinilah saya, dengan artikel tentang cara memberikan akses ke font lokal.)

Local Font Access API

Bagian awal artikel ini mungkin membuat Anda merasa negatif. Bisakah kita benar-benar tidak memiliki hal-hal baik? Jangan khawatir. Kami yakin kita bisa, dan mungkin semuanya tidak sia-sia. Namun, pertama-tama, izinkan saya menjawab pertanyaan yang mungkin Anda tanyakan pada diri sendiri.

Mengapa kita memerlukan Local Font Access API jika ada font web?

Alat desain dan grafis berkualitas profesional sebelumnya sulit untuk ditampilkan di web. Salah satu hambatan adalah ketidakmampuan untuk mengakses dan menggunakan berbagai font yang dibuat secara profesional dan diperjelas, yang telah diinstal secara lokal oleh desainer. Font web memungkinkan beberapa kasus penggunaan publikasi, tetapi gagal mengaktifkan akses terprogram ke bentuk glyph vektor dan tabel font yang digunakan oleh rasterizer untuk merender garis batas glyph. Demikian pula, tidak ada cara untuk mengakses data biner font web.

• Alat desain memerlukan akses ke byte font untuk melakukan implementasi tata letak OpenType-nya sendiri dan memungkinkan alat desain terhubung di tingkat yang lebih rendah, untuk tindakan seperti menjalankan filter vektor atau transformasi pada bentuk glyph.
• Developer mungkin memiliki stack font lama untuk aplikasi yang mereka bawa ke web. Untuk menggunakan stack ini, biasanya diperlukan akses langsung ke data font, yang tidak disediakan oleh font web.
• Beberapa font mungkin tidak dilisensikan untuk dikirimkan melalui web. Misalnya, Linotype memiliki lisensi untuk beberapa font yang hanya mencakup penggunaan desktop.

Local Font Access API adalah upaya untuk mengatasi tantangan ini. Ini terdiri dari dua bagian:

• font enumeration API, yang memungkinkan pengguna memberikan akses ke kumpulan lengkap font sistem yang tersedia.
• Dari setiap hasil enumerasi, kemampuan untuk meminta akses penampung SFNT tingkat rendah (berorientasi byte) yang menyertakan data font lengkap.

Dukungan browser

Dukungan Browser

• 103
• 103
• x
• x

Sumber

Cara menggunakan Local Font Access API

Deteksi fitur

Untuk memeriksa apakah Local Font Access API didukung, gunakan:

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

Catatan: Local Font Access API saat ini hanya tersedia di Chromium versi desktop, tetapi tidak di sistem operasi seluler seperti Android atau iOS.

Mengurutkan font lokal

Untuk mendapatkan daftar font yang diinstal secara lokal, Anda perlu memanggil window.queryLocalFonts(). Untuk pertama kalinya, tindakan ini akan memicu permintaan izin, yang dapat disetujui atau ditolak oleh pengguna. Jika pengguna menyetujui font lokalnya untuk dikueri, browser akan menampilkan array dengan data font yang dapat Anda lakukan loop. Setiap font direpresentasikan sebagai objek FontData dengan properti family (misalnya, "Comic Sans MS"), fullName (misalnya, "Comic Sans MS"), postscriptName (misalnya, "ComicSansMS"), dan style (misalnya, "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);
}

Jika hanya tertarik dengan sebagian font, Anda juga dapat memfilternya berdasarkan nama PostScript dengan menambahkan parameter postscriptNames.

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

Mengakses data SFNT

Akses SFNT penuh tersedia melalui metode blob() dari objek FontData. SFNT adalah format file font yang dapat berisi font lain, seperti font PostScript, TrueType, OpenType, Web Open Font Format (WOFF), dan lainnya.

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

Anda dapat melihat cara kerja Local Font Access API dalam demo di bawah. Pastikan untuk melihat kode sumber juga. Demo menampilkan elemen kustom bernama <font-select> yang menerapkan pemilih font lokal.

Pertimbangan privasi

Izin "local-fonts" tampaknya memberikan platform yang sangat mudah dicetak sidik jari. Namun, browser dapat menampilkan apa pun yang diinginkan secara gratis. Misalnya, browser yang berfokus pada anonimitas dapat memilih untuk hanya menyediakan kumpulan font default yang terintegrasi ke dalam browser. Demikian pula, browser tidak diwajibkan untuk memberikan data tabel persis seperti yang muncul di disk.

Jika memungkinkan, Local Font Access API dirancang untuk hanya menampilkan informasi yang diperlukan untuk mengaktifkan kasus penggunaan yang disebutkan. API sistem dapat menghasilkan daftar font yang diinstal, bukan dalam urutan acak atau diurutkan, tetapi dalam urutan penginstalan font. Menampilkan daftar font yang diinstal secara persis yang diberikan oleh API sistem tersebut dapat mengekspos data tambahan yang dapat digunakan untuk sidik jari, dan kasus penggunaan yang ingin kita aktifkan tidak dibantu dengan mempertahankan pengurutan ini. Akibatnya, API ini mengharuskan data yang ditampilkan diurutkan sebelum ditampilkan.

Keamanan dan izin

Tim Chrome telah mendesain dan menerapkan Local Font Access API menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Andal, termasuk kontrol pengguna, transparansi, dan ergonomi.

Kontrol pengguna

Akses ke font pengguna sepenuhnya berada di bawah kendali mereka dan tidak akan diizinkan kecuali jika izin "local-fonts", seperti yang tercantum dalam registry izin, diberikan.

Transparansi

Apakah situs telah diberi akses ke font lokal pengguna akan terlihat di lembar informasi situs.

Persistensi izin

Izin "local-fonts" akan dipertahankan di antara pemuatan ulang halaman. Izin ini dapat dicabut melalui sheet informasi situs.

Masukan

Tim Chrome ingin mengetahui pengalaman Anda dengan Local Font Access API.

Ceritakan kepada kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang tidak ada yang Anda perlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>Storage>FontAccess di kotak Components. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan dukungan untuk API

Apakah Anda berencana menggunakan Local Font Access API? Dukungan publik Anda membantu tim Chrome untuk memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.

Kirim tweet ke @ChromiumDev menggunakan hashtag #LocalFontAccess dan beri tahu kami tempat dan cara Anda menggunakannya.

Link bermanfaat

• Penjelas
• Draf spesifikasi
• Bug Chromium untuk enumerasi font
• Bug Chromium untuk akses tabel font
• Entri ChromeStatus
• Repo GitHub
• Peninjauan TAG
• Posisi standar Mozilla

Ucapan terima kasih

Spesifikasi Local Font Access API diedit oleh Emil A. Eklund, Alex Russell, Joshua Bell, dan Olivier Yiptong. Artikel ini ditinjau oleh Joe Medley, Dominik Röttsches, dan Olivier Yiptong. Gambar hero oleh Brett Jordan di Unsplash.