رفتن به مطلب

آموزش font-display


پست های پیشنهاد شده

سلام،

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

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

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

 

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

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

 

ویرایش شده توسط mir.seyyed
لینک به ارسال

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

@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 مناسب‌ترین حالت هست.

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

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

 

بسیار ممنون،  

 

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

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

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

بسیار ممنون،  

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

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...