تصمیم گیری در مورد رفتار فونت وب در حین بارگذاری می تواند یک تکنیک تنظیم عملکرد مهم باشد. توصیفگر جدید نمایش فونت برای @font-face به توسعه دهندگان این امکان را می دهد که تصمیم بگیرند که چگونه فونت های وب آنها بسته به مدت زمانی که بارگذاری می شوند، رندر شوند (یا برگشتی).
تفاوت در رندر فونت امروز
فونت های وب به توسعه دهندگان این امکان را می دهند که تایپوگرافی غنی را در پروژه های خود بگنجانند با این مبادله که اگر کاربر قبلاً یک تایپ فیس ندارد، مرورگر باید مدتی را برای دانلود آن صرف کند. از آنجایی که شبکه ها می توانند پوسته پوسته شوند، این زمان دانلود پتانسیل این را دارد که بر تجربه کاربر تأثیر منفی بگذارد. از این گذشته، اگر زمان زیادی برای نمایش طول بکشد، هیچ کس برای زیبایی متن شما اهمیتی نخواهد داد!
برای کاهش خطر کاهش سرعت دانلود فونت، اکثر مرورگرها یک بازه زمانی را اجرا می کنند که پس از آن از فونت بازگشتی استفاده می شود. این یک تکنیک مفید است اما متأسفانه مرورگرها در اجرای واقعی متفاوت هستند.
| مرورگر | تایم اوت | بازگشت به عقب | تعویض کنید |
|---|---|---|---|
| Chrome 35+ | 3 ثانیه | بله | بله |
| اپرا | 3 ثانیه | بله | بله |
| فایرفاکس | 3 ثانیه | بله | بله |
| اینترنت اکسپلورر | 0 ثانیه | بله | بله |
| سافاری | بدون تایم اوت | N/A | N/A |
- کروم و فایرفاکس یک بازه زمانی سه ثانیه ای دارند که پس از آن متن با فونت بازگشتی نشان داده می شود. اگر فونت موفق به دانلود شود، در نهایت یک جابجایی رخ می دهد و متن با فونت مورد نظر دوباره رندر می شود.
- اینترنت اکسپلورر دارای یک بازه زمانی صفر دوم است که منجر به رندر فوری متن می شود. اگر فونت درخواستی هنوز در دسترس نباشد، از یک بک گراند استفاده می شود و بعداً وقتی فونت درخواستی در دسترس قرار گرفت، متن دوباره ارائه می شود.
- سافاری هیچ رفتار مهلت زمانی ندارد (یا حداقل چیزی فراتر از زمان پایان شبکه پایه).
بدتر از همه، توسعه دهندگان کنترل محدودی در تصمیم گیری در مورد اینکه چگونه این قوانین بر کاربرد آنها تأثیر می گذارد، دارند. یک توسعه‌دهنده با فکر عملکرد ممکن است ترجیح دهد تجربه اولیه سریع‌تری داشته باشد که از فونت بازگشتی استفاده می‌کند و فقط پس از اینکه فرصت دانلود را داشت، در بازدیدهای بعدی از فونت وب زیباتر استفاده کند. با استفاده از ابزارهایی مانند Font Loading API، ممکن است بتوان برخی از رفتارهای پیش‌فرض مرورگر را نادیده گرفت و به دستاوردهای عملکردی دست یافت، اما این به قیمت نیاز به نوشتن مقادیر غیر ضروری جاوا اسکریپت است که باید در صفحه یا داخل صفحه قرار داده شود. از یک فایل خارجی درخواست شده است، با تاخیر HTTP اضافی.
برای کمک به اصلاح این وضعیت، گروه کاری CSS یک توصیفگر @font-face ، font-display و یک ویژگی مربوطه را برای کنترل نحوه نمایش فونت قابل دانلود قبل از بارگیری کامل پیشنهاد کرده است.
جدول زمانی دانلود فونت
مشابه رفتارهای مهلت زمانی فونت موجود که امروزه برخی از مرورگرها اجرا می کنند، font-display طول عمر دانلود فونت را به سه دوره اصلی تقسیم می کند.
- اولین دوره، دوره بلوک فونت است. در طول این مدت، اگر صورت فونت بارگذاری نشده باشد، هر عنصری که سعی در استفاده از آن دارد باید با یک صورت فونت برگشتی نامرئی ارائه شود. اگر چهره فونت در طول دوره بلوک با موفقیت بارگیری شود، از چهره فونت به طور معمول استفاده می شود.
- دوره تعویض فونت بلافاصله پس از دوره بلوک فونت رخ می دهد. در طول این مدت، اگر صورت فونت بارگذاری نشود، هر عنصری که سعی در استفاده از آن دارد باید با یک صورت فونت بازگشتی ارائه شود. اگر چهره فونت در طول دوره تعویض با موفقیت بارگیری شود، چهره فونت به طور معمول استفاده می شود.
- دوره شکست فونت بلافاصله پس از دوره تعویض فونت رخ می دهد. اگر با شروع این دوره، صفحه فونت هنوز بارگذاری نشده باشد، به عنوان بارگیری ناموفق علامت گذاری می شود که باعث بازگشت فونت عادی می شود. در غیر این صورت، صورت فونت به طور معمول استفاده می شود.
درک این دوره‌ها به این معنی است که می‌توانید از font-display برای تصمیم‌گیری در مورد نحوه نمایش فونت خود بسته به اینکه آیا یا چه زمانی دانلود شده است استفاده کنید.
کدام فونت برای شما مناسب است؟
برای کار با توصیفگر font-display ، آن را @font-face at-rules خود اضافه کنید:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display در حال حاضر از محدوده مقادیر زیر پشتیبانی می کند auto | block | swap | fallback | optional .
خودکار
خودکار از هر استراتژی نمایش فونتی که کاربر-عامل استفاده می کند استفاده می کند. اکثر مرورگرها در حال حاضر یک استراتژی پیش فرض مشابه مسدود کردن دارند.
مسدود کردن
بلوک به صورت فونت یک دوره بلوک کوتاه (3s در بیشتر موارد توصیه می شود) و یک دوره تعویض بی نهایت می دهد. به عبارت دیگر، اگر فونت بارگذاری نشده باشد، مرورگر ابتدا متن "نامرئی" را ترسیم می کند، اما به محض بارگذاری، صورت فونت را با آن عوض می کند. برای انجام این کار، مرورگر یک صورت فونت ناشناس با معیارهایی شبیه به فونت انتخاب شده، اما با تمام حروف‌های بدون «جوهر» ایجاد می‌کند. این مقدار فقط در صورتی باید مورد استفاده قرار گیرد که برای قابل استفاده بودن صفحه، رندر متن در یک نوع فونت خاص مورد نیاز باشد.
مبادله
swap به صورت فونت یک دوره بلوک دوم صفر و یک دوره تعویض بی نهایت می دهد. این به این معنی است که اگر صفحه فونت بارگذاری نشده باشد، مرورگر بلافاصله متن را با یک نسخه بازگشتی ترسیم می کند، اما به محض بارگیری، صورت فونت را با آن عوض می کند. مشابه بلوک ، این مقدار باید فقط زمانی استفاده شود که رندر متن در یک فونت خاص برای صفحه مهم است، اما رندر کردن با هر فونت همچنان یک پیام صحیح را دریافت می کند. متن لوگو کاندیدای خوبی برای مبادله است زیرا نمایش نام شرکت با استفاده از یک بازگشت معقول پیام را ارسال می کند، اما در نهایت از تایپ رسمی استفاده می کنید.
بازگشتی
بازگشت به صفحه فونت یک دوره بلوک بسیار کوچک (100 میلی‌ثانیه یا کمتر در بیشتر موارد توصیه می‌شود) و یک دوره تعویض کوتاه (در بیشتر موارد سه ثانیه توصیه می‌شود) به فونت می‌دهد. به عبارت دیگر، اگر فونت بارگذاری نشود، ابتدا با یک بازگشت رندر می‌شود، اما به محض بارگذاری، فونت عوض می‌شود. با این حال، اگر زمان زیادی بگذرد، نسخه بازگشتی برای بقیه عمر صفحه استفاده خواهد شد. backback کاندیدای خوبی برای مواردی مانند متن متنی است که می‌خواهید کاربر هر چه سریع‌تر شروع به خواندن کند و نمی‌خواهید با جابه‌جایی متن در حین بارگیری فونت جدید، تجربه او را مختل کنید.
اختیاری
اختیاری به صورت فونت یک دوره بلوک بسیار کوچک (100 میلی‌ثانیه یا کمتر در بیشتر موارد توصیه می‌شود) و یک دوره تعویض ثانیه صفر می‌دهد. مشابه فونت بک گراند ، این انتخاب خوبی برای زمانی است که فونت بارگیری بیشتر «خوب است» اما برای تجربه حیاتی نیست. مقدار اختیاری این تصمیم را به مرورگر واگذار می‌کند که آیا بارگیری فونت را شروع کند یا نه، که ممکن است انجام نشود یا بسته به آنچه فکر می‌کند برای کاربر بهترین است، آن را با اولویت پایین انجام دهد. این می تواند در شرایطی مفید باشد که کاربر در اتصال ضعیف است و پایین کشیدن یک فونت ممکن است بهترین استفاده از منابع نباشد.
پشتیبانی از مرورگر
font-display در حال حاضر پشت پرچم Experimental Web Platform Features در Chrome 49 دسکتاپ قرار دارد و در Opera و Opera برای Android ارسال می شود.
نسخه ی نمایشی
برای font-display نمونه را بررسی کنید. برای توسعه دهندگانی که به عملکرد فکر می کنند، می تواند یک ابزار مفید دیگر در کمربند ابزار شما باشد!