چرا ما به font-display نیاز داریم قبل از اینکه پشتیبانی گسترده ای از @font-face داشته باشیم ، ذخیره فونت تایپوگرافی ما محدود به فونت های محلی بود ، جایی که تنها فونت های موجود فونت هایی بودند که از قبل در رایانه کاربر نهایی بارگیری شده بودند. ما این فونت ها را “web-safe” می نامیم زیرا مرورگر نیازی به بارگیری هیچ چیزی برای ارائه آنها ندارد.
سپس ایده @font-face مطرح شد که بر خلاف گذشته به طراحان وب و توسعه دهندگان پیشرو قدرت تایپوگرافی جدیدی داد. به ما این امکان را داد که فایل های فونت را روی یک سرور بارگذاری کنیم و مجموعه ای از قوانین را در صفحه استایل دهی خود بنویسیم که فونت را نامگذاری می کند و به مرورگر می گوید فایلها را کجا بارگیری کند. همچنین باعث ایجاد سرویس هایی مانند Google Fonts شد که فونت های سفارشی را برای فایل ها به ارمغان آورد. سرانجام ، یک مانع بزرگ که طراحی وب را از طراحی چاپ جدا می کرد ، کنار گذاشته شد!
با این حال ،استفاده از فونت های سفارشی بدون هزینه نبود. فایل های فونت می توانند حجیم باشند و زمان اضافی برای بارگیری فایل ها می تواند عملکرد یک سایت را کند کند ، به ویژه برای دستگاه هایی که اتصال شبکه آنها کندتر است. هزینه اضافی برای کاربران در برنامه های داده محدود نیز به یک عامل تاثیرگذار تبدیل شد.
ویژگی font-display پنج مقدار را می پذیرد:
auto ( مقدار پیش فرض): به مرورگر اجازه می دهد از روش پیش فرض خود برای بارگیری استفاده کند ، که اغلب شبیه مقدار Block است.
Block: به مرورگر دستور می دهد تا زمانی که فونت به طور کامل بارگیری نشده است ، متن را به طور مختصر مخفی کند. به طور دقیق تر، مرورگر متن را با placeholder نامرئی ترسیم می کند و به محض بارگذاری آن را با فونت سفارشی عوض می کند. این روش به عنوان “چشمک زدن متن نامرئی” یا FOIT نیز شناخته می شود.
Swap: به مرورگر دستور می دهد تا زمان بارگیری کامل فونت سفارشی ، از فونت جایگزین برای نمایش متن استفاده کند. این نیز به عنوان “فلاش متن بدون سَبک” یا FOUT شناخته می شود.
Fallback (جایگزینی): به عنوان حد واسط بین مقادیر auto و swap عمل می کند. مرورگر، متن را حدود 100 میلی ثانیه پنهان می کند و اگر هنوز فونت بارگیری نشده باشد، از متن جایگزین استفاده می کند. پس از بارگیری ، به فونت جدید تغییر می کند.
اختیاری(optional) : مانند مقدار fallback، این مقدار به مرورگر می گوید ابتدا متن را پنهان کند ، سپس به فونت جایگزین منتقل شود تا زمانی که فونت سفارشی برای استفاده در دسترس باشد. این مقدار همچنین به مرورگر اجازه می دهد تا تشخیص دهد که آیا فونت سفارشی اصلا استفاده می شود یا خیر . با استفاده از سرعت اتصال کاربر به عنوان یک عامل تعیین کننده که در آن اتصالات کندتر کمتر احتمال دارد فونت سفارشی را دریافت کنند.
اینجا راه دیگری برای متوجه شدن تفاوت های این مقادیر فراهم شده است:
| Block بازه زمانی | Swap بازه زمانی | |
|---|---|---|
| block | کوتاه | طولانی |
| swap | ندارد | طولانی |
| fallback | بسیار کوتاه | کوتاه |
| optional | بسیار کوتاه | ندارد |
یکی دیگر از نگرانی های ویژه ای که در مورد فونت های سفارشی ایجاد شد ، چیزی است که به آن “فلاش متن بدون سبک” یا به طور خلاصه FOUT گفته شد. مرورگرها به طور پیش فرض هنگام نمایش فونت سفارشی برای بارگیری ، فونت سیستم را نشان می دهند. این به صفحات وب اجازه می دهد تا سریعتر بارگیری شوند ، اما نگرانی طراحان وب را افزایش می دهد که این را به عنوان تخریب تجربه کاربری و ارائه نادرست طراحی مورد نظر می دانند. مرورگرهای وب امروزه به طور کلی تا زمانی که فونت سفارشی بارگیری نشود ، متن را پنهان می کنند ، که ما از آن به عنوان “فلاش متن نامرئی” یا FOIT یاد می کنیم
@font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
font-display: fallback; /* Define how the browser behaves during download */
} 
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.