التخفيف بشكل فعال من تأخير تحميل الخط في عرض الويب

يعد تضمين الخطوط المخصصة عبر @font-face ممارسة شائعة في تصميم الويب، ومع ذلك قد يقدم تأثيرًا وامضًا حيث يتم عرض النص في البداية بخط النظام الافتراضي ثم يتحول إلى الخط المخصص عند اكتماله. ينشأ هذا التأخير غير المرغوب فيه من التحميل غير المتزامن لملفات الخطوط.

التحميل الوقائي للخط باستخدام "التحميل المسبق"

لتقليل هذا التأخير، الحل المتوافق مع معايير الصناعة هو الاستفادة من سمة HTML للتحميل المسبق التي يدعمها المتصفحات الحديثة. تمكّن هذه السمة المتصفح من تحديد أولوية تحميل ملفات الخطوط قبل عرض محتوى الصفحة.

من خلال دمج التحميل المسبق، يمكنك توجيه المتصفح لبدء تحميل ملف الخط المحدد بشكل غير متزامن، مما يسمح له بأن يكون جاهزًا للتحميل. استخدمه بمجرد أن تطلب الصفحة عرض النص. والنتيجة هي انتقال سلس، حيث يتم تطبيق الخط المخصص دون أي تأخير ملموس.

على سبيل المثال، خذ بعين الاعتبار مقتطف التعليمات البرمجية التالي:

موارد إضافية للإتقان

لمزيد من الأفكار حول الموضوع، نوصي باستكشاف الموارد التالية:

• [هل يمكنني استخدام: link-rel- التحميل المسبق](https://caniuse.com/#feat=link-rel-preload)
• [وثائق rel=preload - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch_and_preload)
• [تلميحات التحميل المسبق لخطوط الويب - Bram Stein](https://bramstein.com/blog/ 2013/01/14/preload-hint-web-fonts/)