مقدارهای font-display در #css : در CSS به شما این امکان را می‌دهند که… — منابع طراحی وب سایت — TG.ME

مقدارهای font-display در #css :

در CSS به شما این امکان را می‌دهند که نحوه بارگذاری و نمایش فونت‌های وب را کنترل کنید. این ویژگی به خصوص در بهینه‌سازی زمان بارگذاری و تجربه کاربری اهمیت دارد. مقادیر مختلف font-display عبارتند از:

1. auto: این مقدار به مرورگر اجازه می‌دهد تا تصمیم بگیرد که چگونه فونت را بارگذاری کند. این حالت معمولاً رفتار پیش‌فرض مرورگر است.

2. block: با این مقدار، مرورگر تا زمانی که فونت بارگذاری نشود، متن را به صورت "فضای خالی" نمایش می‌دهد. این حالت می‌تواند باعث ایجاد تأخیر در نمایش متن شود، اما از "فلیش" (flash of unstyled text) جلوگیری می‌کند.

3. swap: در این حالت، متن بلافاصله با یک فونت پیش‌فرض (مانند فونت سیستم) نمایش داده می‌شود و به محض بارگذاری فونت اصلی، متن با آن جایگزین می‌شود. این روش تجربه کاربری بهتری را فراهم می‌کند.

4. fallback: مشابه با swap است، اما اگر فونت اصلی بارگذاری نشود، متن با فونت پیش‌فرض نمایش داده می‌شود. این حالت به نوعی ترکیبی از block و swap است.

5. optional: در این حالت، اگر فونت به سرعت بارگذاری نشود، مرورگر می‌تواند از فونت پیش‌فرض استفاده کند و نیازی به انتظار برای بارگذاری فونت اصلی نیست. این گزینه برای بهینه‌سازی بارگذاری و تجربه کاربری در شرایط شبکه ضعیف مناسب است.

استفاده از این مقادیر به شما کمک می‌کند تا کنترل بیشتری بر روی نحوه نمایش متن در وب‌سایت خود داشته باشید و تجربه کاربری بهتری را فراهم کنید


🆔 @Website_Design_Resources
🙏1
October 9, 2024 347 6