Ringkasan
Artikel ini membahas secara mendalam penggantian font serta API size-adjust
, ascent-override
, descent-override
, dan line-gap-override
. API ini memungkinkan penggunaan font lokal untuk membuat tampilan font pengganti yang mendekati atau sama persis dengan dimensi font web. Tindakan ini akan mengurangi atau menghilangkan pergeseran tata letak yang disebabkan oleh pertukaran font.
Jika Anda lebih suka melewatkan artikel ini, berikut beberapa alat yang dapat Anda gunakan untuk mulai menggunakan API ini dengan segera:
Alat framework:
- @next/font: Mulai Next 13,
next/font
secara otomatis menggunakan penggantian metrik font dansize-adjust
untuk memberikan penggantian font yang cocok. - @nuxtjs/fontaine: Mulai dari Nuxt 3, Anda dapat menggunakan
nuxt/fontaine
untuk secara otomatis membuat dan menyisipkan penggantian font yang cocok ke dalam stylesheet yang digunakan oleh aplikasi Nuxt.
Alat non-framework:
- Fontaine: Fontaine adalah library yang secara otomatis membuat dan menyisipkan penggantian font yang menggunakan penggantian metrik font.
- Repositori ini berisi penggantian metrik font untuk semua font yang dihosting oleh Google Fonts. Nilai-nilai ini dapat disalin dan ditempelkan ke stylesheet.
Latar belakang
Font penggantian adalah tampilan font yang digunakan saat bentuk font utama belum dimuat, atau tidak memiliki glyph yang diperlukan untuk merender konten halaman. Misalnya, CSS di bawah menunjukkan bahwa jenis font sans-serif
harus digunakan sebagai penggantian font untuk "Roboto"
.
font-family: "Roboto" , sans-serif;
Font pengganti dapat digunakan untuk merender teks dengan lebih cepat (yaitu dengan menggunakan font-display: swap
). Akibatnya, konten halaman dapat dibaca dan berguna lebih awal—namun, secara historis, hal ini mengakibatkan ketidakstabilan tata letak: pergeseran tata letak biasanya terjadi saat font pengganti diganti dengan font web. Namun, API baru yang dibahas di bawah ini dapat mengurangi atau menghilangkan masalah ini dengan memungkinkan pembuatan tampilan font pengganti yang menggunakan jumlah ruang yang sama dengan font web.
Perbaikan penggantian font
Ada dua kemungkinan pendekatan untuk menghasilkan pendekatan yang "ditingkatkan" font. Pendekatan yang lebih sederhana hanya menggunakan metrik font yang akan menggantikan API. Pendekatan yang lebih rumit (tetapi lebih efektif) menggunakan metrik font yang akan menggantikan API dan size-adjust
. Artikel ini menjelaskan kedua pendekatan ini.
Cara kerja penggantian metrik font
Pengantar
Penggantian metrik font memberikan cara untuk mengganti pertambahan, penurunan, dan celah baris font:
- Ascent mengukur jarak terjauh yang direntangkan oleh glyph font di atas dasar pengukuran.
- Turunan mengukur jarak terjauh yang direntangkan glyph font di bawah dasar pengukuran.
- Kesenjangan garis, juga disebut "awal", mengukur jarak antara baris teks yang berurutan.
Penggantian metrik font dapat digunakan untuk mengganti naik, turun, dan line-gap font fallback agar cocok dengan kenaikan, penurunan, dan celah baris font web. Hasilnya, font web dan font penggantian yang disesuaikan akan selalu memiliki dimensi vertikal yang sama.
Penggantian metrik font digunakan di stylesheet seperti ini:
body {
font-family: Poppins, "fallback for poppins";
}
@font-face {
font-family: "fallback for poppins";
src: local("Times New Roman");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Alat yang tercantum di awal artikel ini dapat membuat nilai pengganti metrik font yang benar. Namun, Anda juga dapat menghitung nilai ini sendiri.
Menghitung penggantian metrik font
Persamaan berikut menghasilkan penggantian metrik font untuk font web tertentu. Nilai penggantian metrik font harus ditulis sebagai persentase (misalnya, 105%
), bukan desimal.
ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm
Misalnya, berikut ini adalah penggantian metrik font untuk font Poppins:
/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/
ascent-override: 105%; /* = 1050/1000 */
descent-override: 35%; /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */
Nilai ascent
, descent
, line-gap
, dan unitsPerEm
semuanya berasal dari metadata font web. Bagian selanjutnya dari artikel ini menjelaskan cara mendapatkan nilai tersebut.
Membaca tabel font
Metadata font (khususnya, tabel font) berisi semua informasi yang Anda perlukan untuk menghitung penggantian metrik font.
Berikut adalah beberapa alat yang dapat Anda gunakan untuk membaca metadata font:
- fontkit adalah mesin font yang dibuat untuk Node.js. Cuplikan kode ini menunjukkan cara menggunakan fontkit untuk menghitung penggantian metrik font.
- Capsize adalah library untuk mengubah ukuran font dan tata letak. Capsize menyediakan API untuk mendapatkan informasi tentang berbagai metrik font.
- fontdrop.info adalah situs yang memungkinkan Anda melihat tabel font dan informasi terkait font lainnya dari browser.
- Font Forge adalah editor font desktop yang populer. Untuk melihat
ascent
,descent
, danline-gap
: buka dialogFont Info
, pilih menuOS/2
, lalu pilih tabMetrics
. Untuk melihatUPM
: buka dialogFont Info
, lalu pilih menuGeneral
.
Memahami tabel font
Anda mungkin memperhatikan bahwa
konsep seperti "pendakian" dirujuk oleh beberapa metrik—misalnya, ada metrik hheaAscent
, typoAscent
, dan winAscent
. Ini adalah hasil dari sistem operasi yang berbeda yang menggunakan pendekatan yang berbeda terhadap rendering font: program di perangkat OSX umumnya menggunakan metrik font hhea*
—sedangkan program di perangkat Windows umumnya menggunakan metrik font typo*
(juga disebut sebagai sTypo*
) atau win*
.
Bergantung pada font, browser, dan sistem operasi, font akan dirender menggunakan metrik hhea
, typo
, atau win
.
Mac | Windows | |
Kromium | Menggunakan metrik dari "hhea" tabel sementara. | Menggunakan metrik dari "salah ketik" tabel jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, menggunakan metrik dari "menang" tabel sementara. |
Firefox | Menggunakan metrik dari "salah ketik" tabel jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, akan menggunakan metrik dari "hhea" tabel sementara. | Menggunakan metrik dari "salah ketik" tabel jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, menggunakan metrik dari "menang" tabel sementara. |
Safari | Menggunakan metrik dari "hhea" tabel sementara. | Menggunakan metrik dari "salah ketik" tabel jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, menggunakan metrik dari "menang" tabel sementara. |
Untuk informasi selengkapnya tentang cara kerja metrik font di berbagai sistem operasi, lihat artikel tentang metrik vertikal ini.
Kompatibilitas lintas perangkat
Untuk sebagian besar font (misalnya, ~90% font yang dihosting oleh Google Fonts), penggantian metrik font dapat digunakan dengan aman tanpa mengetahui sistem operasi pengguna: dengan kata lain, untuk font ini, nilai ascent-override
, descent-override
, dan linegap-override
tetap sama persis terlepas dari apakah metrik hhea
, typo
, atau win
berlaku. Repositori ini memberikan informasi tentang jenis font yang berlaku dan tidak berlaku.
Jika Anda menggunakan font yang memerlukan penggunaan penggantian metrik font terpisah untuk perangkat OSX dan Windows, penggunaan penggantian metrik font dan size-adjust
hanya direkomendasikan jika Anda dapat memvariasikan stylesheet berdasarkan sistem operasi pengguna.
Menggunakan penggantian metrik font
Karena penggantian metrik font dihitung menggunakan pengukuran yang berasal dari metadata font web (dan bukan font penggantian), penggantian tersebut tetap sama terlepas dari font mana yang digunakan sebagai font pengganti. Contoh:
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: "fallback for Poppins";
src: local("Arial");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: "another fallback for Poppins";
src: local("Roboto");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Cara kerja penyesuaian ukuran
Pengantar
Deskripsi CSS size-adjust
secara proporsional menskalakan lebar dan tinggi glyph font. Misalnya, size-adjust: 200%
menskalakan glyph font menjadi dua kali ukuran aslinya; size-adjust: 50%
menskalakan glyph font menjadi setengah ukuran aslinya.
Dengan sendirinya, size-adjust
memiliki aplikasi terbatas untuk meningkatkan penggantian font: pada sebagian besar kasus, font pengganti perlu dipersempit atau sedikit diperlebar (bukan diskalakan secara proporsional) agar cocok dengan font web. Namun, menggabungkan size-adjust
dengan penggantian metrik font memungkinkan dua font cocok satu sama lain, baik secara horizontal maupun vertikal.
Berikut ini cara penggunaan size-adjust
di stylesheet:
@font-face {
font-family: "fallback for poppins";
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
Karena cara size-adjust
dihitung (yang dijelaskan di bagian berikutnya), nilai size-adjust
(dan penggantian metrik font terkait) berubah bergantung pada font penggantian yang digunakan:
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Menghitung penyesuaian ukuran dan penggantian metrik font
Berikut adalah persamaan untuk menghitung size-adjust
dan penggantian metrik font:
size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)
Sebagian besar input ini (yaitu, pendakian, turunan, dan celah baris) dapat dibaca langsung dari metadata font web. Namun, avgCharacterWidth
harus diperkirakan.
Memperkirakan lebar karakter rata-rata
Secara umum, lebar karakter rata-rata hanya dapat diperkirakan—tetapi ada beberapa skenario yang dapat dihitung dengan tepat: misalnya, saat menggunakan font monosentris atau saat konten string teks diketahui sebelumnya.
Contoh pendekatan naif untuk menghitung avgCharacterWidth
adalah mengambil lebar rata-rata dari semua karakter [a-z\s]
.
Namun, pembobotan semua karakter secara merata cenderung akan mengurangi bobot huruf yang sering digunakan (misalnya, e
) dan kelebihan lebar huruf yang jarang digunakan (misalnya, z
).
Pendekatan yang lebih kompleks yang meningkatkan akurasi adalah dengan mempertimbangkan frekuensi huruf dan menghitung lebar rata-rata berbobot frekuensi dari karakter [a-z\s]
. Artikel ini merupakan referensi yang baik untuk mengetahui frekuensi huruf dan rata-rata panjang kata dalam teks bahasa Inggris.
Memilih pendekatan
Dua pendekatan yang dibahas dalam artikel ini masing-masing memiliki kelebihan dan kekurangan:
Menggunakan penggantian metrik font sendiri adalah pendekatan yang baik untuk digunakan jika Anda mulai mengoptimalkan penggantian font. Meskipun ini adalah pendekatan yang lebih sederhana di antara dua pendekatan ini—ini biasanya cukup ampuh untuk mengurangi besarnya pergeseran tata letak terkait font.
Di sisi lain, jika Anda menginginkan presisi yang lebih tinggi dan bersedia melakukan lebih banyak pekerjaan dan pengujian, memasukkan
size-adjust
adalah pendekatan yang baik untuk digunakan. Jika diterapkan dengan benar, pendekatan ini dapat secara efektif menghilangkan pergeseran tata letak terkait font.
Memilih font pengganti
Teknik yang dijelaskan dalam artikel ini bergantung pada penggunaan penggantian metrik font dan size-adjust
untuk mentransformasi font lokal yang tersedia secara luas—alih-alih mencoba menemukan font lokal yang sangat mendekati font web. Saat memilih font lokal, ingat bahwa sangat sedikit font yang memiliki ketersediaan lokal secara luas dan tidak ada font tunggal yang akan ada di semua perangkat.
Arial
adalah font pengganti yang direkomendasikan untuk font sans-serif dan Times New Roman
adalah font pengganti yang direkomendasikan untuk font serif. Namun, font ini tidak tersedia di Android (Roboto
adalah satu-satunya font sistem di Android).
Contoh di bawah ini menggunakan tiga font penggantian untuk memastikan cakupan perangkat yang luas: font penggantian yang menargetkan perangkat Windows/Mac, font pengganti yang menargetkan perangkat Android, dan font penggantian yang menggunakan jenis font generik.
body {
font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}
/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Minta masukan
Hubungi kami jika Anda memiliki masukan tentang pengalaman Anda menggunakan penggantian metrik font dan size-adjust
.