Pelajari cara Local Font Access API memungkinkan Anda mengakses font yang diinstal secara lokal oleh pengguna dan mendapatkan detail tingkat rendah tentang font tersebut
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
font variabel yang dapat kita ubah lebih lanjut dengan mengubah nilai untuk
berbagai sumbu yang diekspos. 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 bahwa
properti src
di deklarasi @font-face
,
terlepas dari
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.
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 akan mengetahui bahwa font pengganti default digunakan karena font perusahaan tidak diinstal. Untuk mengetahui detail selengkapnya tentang hal ini dan serangan pelacakan sidik jari browser 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 [dalam daftar font yang tersedia] font web dan font yang disertakan dengan sistem operasi, tetapi tidak menyertakan font yang diinstal pengguna secara lokal". (Dan inilah saya, dengan artikel tentang memberikan akses ke {i>font<i} lokal.)
Local Font Access API
Bagian awal artikel ini mungkin membuat Anda merasa negatif. Apakah kita benar-benar tidak bisa memiliki hal-hal yang bagus? 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 padahal ada font web?
Alat desain dan grafik berkualitas profesional secara historis sulit disediakan di web. Salah satu kendalanya adalah ketidakmampuan untuk mengakses dan menggunakan berbagai font yang dibuat dan di-hint secara profesional 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. Selain itu, 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
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
}
Mengurutkan font lokal
Untuk mendapatkan daftar font yang diinstal secara lokal, Anda harus 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 pada subset 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 digunakan dengan 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 disertakan 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 mengekspos informasi yang diperlukan secara tepat untuk mengaktifkan kasus penggunaan yang disebutkan. API Sistem dapat menghasilkan daftar font yang diinstal, bukan dalam urutan yang 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 sheet 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 hilang yang diperlukan 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 sudah 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.