Paul Irish
Chrome DevTools kini dapat memberi tahu Anda dengan tepat jenis huruf yang digunakan untuk merender teks.
Tumpukan font adalah hal yang lucu, lebih menyerupai saran daripada permintaan. Karena keluarga yang Anda sarankan mungkin tidak ada, Anda membiarkan setiap browser pengguna menangani kasus kegagalan, menarik sesuatu yang berfungsi dan menggunakannya.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
Sebagai developer, Anda ingin mengetahui font apa yang sebenarnya digunakan. Berikut caranya:
Di bagian Computed Styles, Anda kini akan melihat ringkasan typeface yang digunakan untuk elemen tersebut. Ada beberapa hal yang perlu diperhatikan di sini:
- DevTools melaporkan jenis huruf sebenarnya yang digunakan oleh lapisan rendering teks Chrome. Tidak perlu lagi menebak-nebak font mana
serifatausans-serifyang benar-benar di-resolve. - Apakah webfont saya berfungsi? Terkadang sulit untuk mengetahui apakah Anda melihat font web atau font sistem penggantian. Sekarang Anda dapat memverifikasi bahwa webfont diterapkan. Dalam contoh di atas, kita menarik Lobster sebagai font web untuk gaya
::first-line. - Font jatuh-tayang dalam tumpukan mudah ditemukan. Di atas, kami memiliki kesalahan ketik ejaan Merriweather sehingga tidak digunakan, sehingga jatuh ke Lobster.
- Apakah Arial atau Helvetica? Tanyakan kepada desainer atau... tanyakan DevTools. ;)
- Bekerja dengan sangat baik dengan Google Webfonts, Typekit, font lokal, jenis huruf @font-face, glyph unicode, dan semua sumber font menarik lainnya.
Selamat menikmati dan silakan tulis komentar jika Anda memiliki masukan.