آموزش font-display

[mir.seyyed 444]

سلام،

منظور از اینکه با استفاده از این تگ مرور گر 3 ثانیه برای فونت اصلی صبر میکنه و اگر نبود از فونت جایگزین استفاده می کنه چیست؟

@font-face {
  font-family: 'Example';
  font-display: auto;
  src: local('Example'), url( ... ) format( 'woff2' );
}

در این مثال، فونت جایگزین رو چطور میشه تعریف کنیم؟

 

این آموزش انگلیسی هست:

https://css-tricks.com/almanac/properties/f/font-display/

 

ویرایش شده دی 99 توسط mir.seyyed

[فرشاد گوهری 1681]

سلام، باید کدتون رو به این شکل بنویسید:

@font-face {
  font-family: 'Example';
  src: local('Example'), url( ... ) format( 'woff2' );
  font-display: swap;
}

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

حالت auto: پیش‌فرض مرورگر هست و اگر نذاشتید هم فرقی نمی‌کنه، توی این حالت مرورگر نوشته‌ها رو نشون نمیده تا اینکه فونت لود بشه، از نظر تجربه‌ی کاربری خوب نیست و حتی پیج‌اسپید اینسایت گوگل هم ایراد می‌گیره بهش.

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

حالت fallback: ترکیبی از auto و swap هست، ینی تایم خیلی کوتاهی صبر می‌کنه مرورگر (و متنی رو نشون نمیده) اگر فونت لود شد (در کمتر از ۱۰۰ میلی‌ثانیه) که فونت اصلی رو استفاده می‌کنه، اگرم هنوز لود نشده باشه، از فونت پیش‌فرض استفاده می‌کنه تا فونت اصلی دانلود شه و بعد جایگزینش میکنه.

حالت optional: به زبان ساده اگر بخوام بگم، تصمیم رو به مرورگر میسپاره، اول نوشته رو مخفی میکنه و بعد وقتی فونت لود شد میره روی حالت swap ولی خب همونطوری که گفتم بسته به تصمیم مرورگر و سرعت اینترنت کاربر داره و گاهی وقتا اصلا روی حالت fallback نمیره و مستقیم میبره به حالت swap (مرورگر با توجه به سرعت یوزر تصمیم می‌گیره)

از نظر تجربه‌ی کابری (طبق چیزی که توی web.dev گوگل دیده بودم) حالت swap مناسب‌ترین حالت هست.

[mir.seyyed 444]

در 16 ساعت قبل، فرشاد گوهری گفته است :

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

 

بسیار ممنون،  

 

منظور اونت پیشفرش (یا همون جایگزین که ابتدا مرورگر به سُراغ اون میره) چیه؟

همین فونت های arial و tahoma هستند؟

[فرشاد گوهری 1681]

در 5 ساعت قبل، mir.seyyed گفته است :

بسیار ممنون،  

منظور اونت پیشفرش (یا همون جایگزین که ابتدا مرورگر به سُراغ اون میره) چیه؟

همین فونت های arial و tahoma هستند؟

خواهش می‌کنم، بله همینا هستند (البته بستگی به سیستم عامل و... هم داره)