کدام یک از فونتهای font-family در صفحه استفاده شده است؟ یکی از قابلیتهای مهم CSS در طراحی صفحات وب، امکان تعریف مجموعهای از فونتها با استفاده از ویژگی font-family است. این ویژگی به شما اجازه میدهد چند فونت را بهصورت اولویتبندیشده معرفی کنید تا مرورگر بهترین گزینه موجود در سیستم کاربر را برای نمایش متن انتخاب کند.
برای مثال، در کد زیر:
font-family: "Gill Sans", sans-serif;
مرورگر ابتدا تلاش میکند فونت Gill Sans را بارگذاری کند. اگر این فونت روی سیستم کاربر نصب نشده باشد، بهطور خودکار به اولین فونت موجود از خانوادهی sans-serif بازمیگردد.
اما برای یک توسعهدهنده وب، همیشه این سؤال وجود دارد که در نهایت کدام فونت واقعاً استفاده شده است؟ مخصوصاً زمانی که لیست طویلی از فونتهای جایگزین دارید.
چطور در Firefox بفهمیم کدام فونت انتخاب شده؟
مرورگر Firefox ابزار بسیار دقیقی برای بررسی فونت مورد استفاده ارائه میدهد. برای مشاهده این اطلاعات مراحل زیر را دنبال کنید:
1. باز کردن DevTools
از منوی مرورگر یا با زدن کلید F12 وارد ابزار توسعهدهندگان شوید.
2. انتخاب عنصر مورد نظر
در بخش Inspector روی المانی که میخواهید فونت آن را بررسی کنید کلیک کنید.
3. پیدا کردن ویژگی font-family
در ستون Rules، بخشی که استایل مربوط به font-family تعریف شده را پیدا کنید.
4. مشاهده فونت انتخابشده
یکی از نامهای فونت در لیست font-family با خط زیر مشخص شده است.
همان فونتی است که Firefox برای نمایش متن انتخاب کرده.
تفاوت بین فونت تعریفشده و فونت واقعی رندر شده
نکتهای که بسیاری از توسعهدهندگان ممکن است به آن توجه نکنند این است که:
- فونتی که در font-family تعریف میکنید = همان چیزی است که میخواهید استفاده شود.
- فونت واقعی که مرورگر استفاده میکند (Rendered Font) = فونت فیزیکی و واقعی است که برای نمایش حروف انتخاب میشود.
این دو همیشه یکسان نیستند.
چرا فونت تعریفشده ممکن است با فونت رندر شده متفاوت باشد؟
چند دلیل مهم برای این تفاوت وجود دارد:
1. فونت مورد نظر روی سیستم کاربر موجود نیست
اگر فونت اصلی در font-family نصب نشده باشد، مرورگر به سراغ فونت بعدی میرود.
2. فونت موجود است، اما همهی کاراکترها را ندارد
فرض کنید فونتی انتخاب کردهاید که حروف لاتین دارد، اما کاراکترهای فارسی یا ایموجیها را ندارد.
در این حالت مرورگر فقط برای کاراکترهای موجود از آن فونت استفاده کرده و برای باقی کاراکترها به سراغ فونت دیگری میرود.
3. استفاده از فونتهای عمومی (Generic Fonts)
فونتهایی مانند:
- serif
- sans-serif
- system-ui
- monospace
هیچکدام یک فونت واقعی نیستند؛ مرورگر آنها را به یک فونت موجود در سیستم کاربر نگاشت میدهد.
4. تفاوت بین حالتهای مختلف فونت (Bold، Italic و…)
ممکن است فونت Arial در سیستم نصب باشد، اما کاربر نیاز به نسخه Bold یا Italic داشته باشد.
در این شرایط مرورگر ممکن است از فایلهای متفاوتی برای حالات مختلف فونت استفاده کند.
جمعبندی
شناخت تفاوت بین فونت تعریفشده و فونت واقعی رندر شده برای هر طراح یا توسعهدهنده وب ضروری است. ابزار Inspector در Firefox این فرایند را ساده میکند و به شما اجازه میدهد دقیقاً بدانید کدام فونت برای نمایش متن استفاده شده است. این اطلاعات میتواند به شما کمک کند:
- مشکلات نمایش فونت را سریعتر پیدا کنید.
- انتخاب فونتهای fallback را هوشمندانهتر انجام دهید.
- تجربه بصری بهتری برای کاربران ایجاد کنید.
