Jawaban DevTools - Font apa itu?

Chrome DevTools kini dapat memberi tahu Anda jenis typeface yang digunakan untuk merender teks.

Stack font adalah hal yang lucu, lebih merupakan saran daripada permintaan. Karena keluarga yang Anda sarankan mungkin tidak ada, Anda mengizinkan browser setiap pengguna menangani kasus penerusan, mengambil sesuatu yang akan berfungsi, dan menggunakannya.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Sebagai developer, Anda ingin mengetahui font yang sebenarnya digunakan. Berikut caranya:

Jenis Font di devtools

Di bagian Gaya yang Dihitung, Anda sekarang akan melihat ringkasan jenis huruf yang digunakan untuk elemen tersebut. Ada beberapa hal yang perlu diperhatikan di sini:

  • DevTools melaporkan typeface sebenarnya yang digunakan oleh lapisan rendering teks Chrome. Tidak perlu lagi menebak font mana yang sebenarnya di-resolve oleh serif atau sans-serif.
  • Apakah webfont saya berfungsi? Terkadang sulit untuk mengetahui apakah Anda melihat webfont atau font sistem penggantian. Sekarang Anda dapat memverifikasi bahwa webfont diterapkan. Dalam contoh di atas, kita mengambil Lobster sebagai webfont untuk gaya ::first-line.
  • Font yang tidak digunakan di stack Anda mudah ditemukan. Di atas, kami memiliki kesalahan ejaan Merriweather sehingga tidak digunakan, dan beralih ke Lobster.
  • Apakah itu Arial atau Helvetica? Tanyakan kepada desainer atau… tanyakan kepada DevTools. ;)
  • Berfungsi dengan baik dengan Google Webfonts, Typekit, font lokal, typeface @font-face, glyph unicode, dan semua sumber font menarik lainnya.

Selamat menikmati dan berikan komentar jika Anda memiliki masukan.