DevTools پاسخ می دهد - آن چه فونتی است؟

Chrome DevTools اکنون می‌تواند دقیقاً به شما بگوید که از چه نوع تایپی برای ارائه متن استفاده می‌شود .

پشته قلم چیز خنده‌داری است، بیشتر یک پیشنهاد است تا یک تقاضا. از آنجایی که خانواده ای که پیشنهاد می کنید ممکن است حضور نداشته باشد، به مرورگر هر کاربر اجازه می دهید تا پرونده سقوط را کنترل کند، چیزی را بکشد که کار کند و از آن استفاده کند.

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

به عنوان یک توسعه دهنده، می خواهید بدانید که واقعاً از چه فونتی استفاده می شود . در اینجا نحوه کار آن آمده است:

خانواده فونت در ابزارهای توسعه

در بخش سبک‌های محاسبه‌شده ، اکنون خلاصه‌ای از حروف (های) مورد استفاده برای آن عنصر را می‌بینید. در اینجا چند نکته قابل توجه است:

  • DevTools در حال گزارش تایپ واقعی استفاده شده توسط لایه رندر متن کروم است. دیگر حدس نمی زنید که کدام فونت serif یا sans-serif واقعاً به حل آن می پردازد.
  • آیا وب فونت من کار می کند؟ گاهی اوقات تشخیص اینکه آیا فونت وب را می بینید یا فونت سیستم بازگشتی دشوار است. اکنون می توانید بررسی کنید که webfont اعمال می شود . در مثال بالا، ما Lobster را به عنوان یک وب فونت برای سبک ::first-line پایین می کشیم.
  • فونت های سقوطی در پشته شما به راحتی قابل تشخیص هستند . در بالا، ما یک غلط املایی در املای Merriweather داشتیم و بنابراین از آن استفاده نمی شد و به Lobster افتاد.
  • آریال هست یا هلوتیکا؟ از یک طراح بپرسید یا… از DevTools بپرسید. ;)
  • با Google Webfonts، Typekit، فونت های محلی، حروف فونت-face@، حروف یونیکد، و همه منابع فونت جالب دیگر عالی کار می کند.

لذت ببرید و اگر بازخوردی دارید نظر بدهید.