Ukuran CSS-sesuaikan untuk @font-face

Saat font web dimuat, kini Anda dapat menyesuaikan skalanya, untuk menormalkan ukuran font dokumen dan mencegah pergeseran tata letak saat beralih antar font

9 Juni 2021• Diperbarui 9 Juni 2021

Pertimbangkan berikut ini demo Dimana ukuran huruf adalah konsisten 64px, dan satu-satunya perbedaan antara masing-masing header ini adalah font-family. Contoh di sebelah kiri belum disesuaikan dan memiliki ukuran akhir yang tidak konsisten. Contoh penggunaan yang benar ukuran-menyesuaikan untuk memastikan 64px adalah ukuran akhir yang konsisten.

Posting ini mengeksplorasi deskriptor font-face CSS baru ditelepon ukuran-menyesuaikan, tersedia di Chromium 92 dan Firefox 89 (di belakang bendera); (melihat caniuse untuk dukungan terbaru). Ini juga menunjukkan beberapa cara untuk memperbaiki dan menormalkan ukuran font untuk pengalaman pengguna yang lebih lancar, sistem desain yang konsisten, dan tata letak halaman yang lebih dapat diprediksi. Salah satu kasus penggunaan yang penting adalah mengoptimalkan rendering font web untuk mencegah pergeseran tata letak kumulatif (CLS).

Berikut adalah interaktif demo dari ruang masalah. Coba ubah jenis huruf dengan dropdown dan amati:

1. Perbedaan ketinggian dalam hasil.
2. Pergeseran konten yang menggelegar secara visual.
3. Memindahkan area target interaktif (dropdown melompat-lompat!).

Bagaimana cara menskalakan font dengan ukuran-menyesuaikan #

Pengenalan sintaks:

@font-wajah {
  font-family: "Jenis Huruf yang Disesuaikan";
ukuran-menyesuaikan: 150%;
  src: url(beberapa/path/ke/typeface.woff2) format('woff2');
}

1. Membuat jenis huruf khusus bernama Jenis Huruf yang Disesuaikan.
2. menggunakan ukuran-menyesuaikan untuk meningkatkan setiap mesin terbang ke 150% ukuran default mereka.
3. Hanya memengaruhi satu jenis huruf yang diimpor.

Gunakan jenis huruf khusus di atas seperti ini:

h1 {
font-family: "Jenis Huruf yang Disesuaikan";
}

Mengurangi CLS dengan pertukaran font yang mulus #

Dalam gif berikut, perhatikan contoh di sebelah kiri dan bagaimana ada pergeseran ketika font diubah. Ini hanyalah contoh kecil dengan satu elemen judul dan masalahnya sangat terlihat.

Untuk meningkatkan rendering font, teknik yang bagus adalah pertukaran font. Render font sistem pemuatan cepat untuk menampilkan konten terlebih dahulu, lalu tukar dengan font web saat font web selesai dimuat. Ini memberi Anda yang terbaik dari kedua dunia: konten terlihat sesegera mungkin, dan Anda mendapatkan halaman yang ditata dengan baik tanpa mengorbankan waktu pengguna Anda untuk konten. Namun masalahnya, terkadang ketika font web dimuat, ia menggeser seluruh halaman karena ditampilkan pada ukuran tinggi kotak yang sedikit berbeda.

Dengan menaruh ukuran-menyesuaikan dalam @font-wajah aturan, itu menetapkan penyesuaian mesin terbang global untuk wajah font. Pengaturan waktu yang tepat ini akan menghasilkan perubahan visual yang minimal, pertukaran yang mulus. Untuk membuat pertukaran yang mulus, sesuaikan tangan atau coba ini kalkulator penyesuaian ukuran oleh Malte Ubl.

Pada awal posting ini, memperbaiki masalah ukuran font dilakukan dengan coba-coba. ukuran-menyesuaikan didorong dalam kode sumber sampai tajuk yang sama di Kue kering dan Arial diberikan sama 64px sebagai Tekan Mulai 2P lakukan secara alami. Saya menyelaraskan dua font ke ukuran font target.

@font-wajah {
font-family: 'Arial yang Disesuaikan';
ukuran-menyesuaikan: 86%; 
src: lokal(Arial);
}
@font-wajah {
font-family: 'Kue kering';
ukuran-menyesuaikan: 90.25%;
src: url(...woff2) format('woff2');
}

Mengkalibrasi font #

Anda sebagai penulis menentukan target kalibrasi untuk menormalkan skala font. Anda dapat menormalkan font Times, Arial, atau sistem, lalu menyesuaikan font kustom agar sesuai. Atau, Anda dapat menyesuaikan font lokal agar sesuai dengan apa yang Anda unduh.

Strategi untuk ukuran-menyesuaikan kalibrasi:

1. Target jarak jauh:
   Sesuaikan font lokal dengan font yang diunduh.
2. Target lokal:
   Sesuaikan font yang diunduh ke font target lokal.

Contoh 1: Target jarak jauh #

Pertimbangkan cuplikan berikut yang menyesuaikan font yang tersedia secara lokal dengan ukuran yang cocok dengan font kustom src jarak jauh. Font kustom jarak jauh adalah target untuk kalibrasi, font merek mungkin:

@font-wajah {
  font-family: "Arial Reguler Disesuaikan Untuk Merek";
src: lokal(Arial);
ukuran-menyesuaikan: 90%;
}

@font-wajah {
  font-family: "Merek Rad";
  src: url(beberapa/jalan/ke/a.woff2) format('woff2');
}

html {
  font-family: "Merek Rad", "Arial Reguler Disesuaikan Untuk Merek";
}

Dalam contoh ini, font lokal Arial menyesuaikan untuk mengantisipasi font kustom yang dimuat, untuk pertukaran yang mulus.

Strategi ini memiliki keuntungan menawarkan desainer dan pengembang font yang sama untuk ukuran dan tipografi. Merek adalah target kalibrasi. Ini adalah berita bagus untuk sistem desain.

Memiliki jenis huruf merek sebagai target juga merupakan cara kerja kalkulator Malte. Pilih Google Font dan itu akan menghitung cara menyesuaikan Arial untuk bertukar dengan mulus. Berikut adalah contoh Roboto CSS dari Kalkulator, tempat Arial dimuat dan diberi nama "Roboto-fallback":

@font-wajah {
font-family: "Roboto-fallback";
ukuran-menyesuaikan: 100.06%;
src: lokal("Arial");
}

Untuk membuat penyesuaian lintas platform sepenuhnya, lihat contoh berikut yang menyediakan 2 font fallback lokal yang disesuaikan untuk mengantisipasi font merek.

@font-wajah {
font-family: "Roboto-fallback-1";
ukuran-menyesuaikan: 100.06%;
src: lokal("Arial");
}
@font-wajah {
font-family: "Roboto-fallback-2";
ukuran-menyesuaikan: 99.94%;
src: lokal("Arimo");
}
@font-wajah {
font-family: "Robot Reguler";
src: url(beberapa/jalur/ke/roboto.woff2) format('woff2');
}
html {
font-family: "Robot Reguler", "Roboto-fallback-1", "Roboto-fallback-2";
}

Contoh 2: Target lokal #

Pertimbangkan cuplikan berikut yang menyesuaikan font khusus merek agar sesuai dengan Arial:

@font-wajah {
  font-family: "Merek Rad - Disesuaikan Untuk Arial";
  src: url(beberapa/jalan/ke/a.woff2) format('woff2');
ukuran-menyesuaikan: 110%;
}

html {
  font-family: "Merek Rad - Disesuaikan Untuk Arial", Arial;
}

Strategi ini memiliki keunggulan rendering tanpa penyesuaian apa pun, lalu menyesuaikan font yang masuk agar sesuai.

Penyetelan yang lebih baik dengan pendakian-override, keturunan-override dan penggantian baris-celah #

Jika penskalaan umum mesin terbang tidak cukup untuk menyesuaikan desain atau strategi pemuatan Anda, berikut adalah beberapa opsi penyetelan yang lebih baik yang sesuai dengan ukuran-menyesuaikan. NS pendakian-override, keturunan-override, dan penggantian baris-celah properties saat ini diimplementasikan di Chromium 87+, dan Firefox 89+.

pendakian-override #

NS pendakian-override deskriptor mendefinisikan ketinggian di atas garis dasar font.

@font-wajah {
  font-family: "Pendakian Disesuaikan Arial Tebal";
  src: lokal(Arial Bold);
pendakian-override: 71%;
}

Judul merah (tidak disesuaikan) memiliki spasi di atas huruf kapital A dan O, sedangkan judul biru telah disesuaikan sehingga menjadi tinggi topi pas dengan kotak pembatas keseluruhan.

keturunan-override #

NS keturunan-override deskriptor mendefinisikan ketinggian di bawah garis dasar font.

@font-wajah {
  font-family: "Pendakian Disesuaikan Arial Tebal";
  src: lokal(Arial Bold);
keturunan-override: 0%;
}

Judul merah (tidak disesuaikan) memiliki spasi di bawahnya D dan O garis dasar, sedangkan judul biru telah disesuaikan sehingga huruf-hurufnya pas di garis dasar.

penggantian baris-celah #

NS penggantian baris-celah deskriptor mendefinisikan metrik celah garis untuk font. Ini adalah font yang direkomendasikan line-gap atau external leading.

@font-wajah {
  font-family: "Garis Gap Disesuaikan Arial";
  src: lokal(Arial);
penggantian baris-celah: 50%;
}

Judul merah (tidak disesuaikan) tidak memiliki penggantian baris-celah, pada dasarnya itu di 0%, sedangkan judul biru telah disesuaikan dengan 50%, menciptakan ruang di atas dan di bawah huruf yang sesuai.

Menyatukan semuanya #

Masing-masing penggantian ini menawarkan cara tambahan untuk memangkas kelebihan dari kotak pembatas teks aman web. Anda dapat menyesuaikan kotak teks untuk presentasi yang tepat.

Kesimpulan #

NS @font-wajah ukuran-menyesuaikan Fitur CSS adalah cara yang menarik untuk menyesuaikan kotak pembatas teks dari tata letak web Anda untuk meningkatkan pengalaman bertukar font sehingga menghindari pergeseran tata letak bagi pengguna Anda. Untuk mempelajari lebih lanjut, lihat sumber daya ini:

foto oleh Kristian Strand pada Hapus percikan