web font loading recipes
1.0.0
حفنة من العروض التوضيحية لاستراتيجيات تحميل خطوط الويب المختلفة. يتم تضمين بعضها في دليل شامل لاستراتيجيات تحميل الخطوط ، بعضها أكثر تجريبية .
يتم استضافة العروض التوضيحية على https://www.zachleat.com/web-fonts/demos/
نظرًا لأن خطوط الويب هي تعزيز تدريجي ومع دعم متزايد لواجهة برمجة تطبيقات FONT FONT CSS ، يمكننا أن نتطلع إلى وقت لن نحتاج فيه إلى ضمّن polyfill في الرأس (حتى لتحميل الخطوط الأسرع). إن وصفات API الخاصة بتحميل خطوط CSS المبسطة هي الإعدادات الافتراضية ، ولكن يتم تضمين الإصدارات المتعددة لدعم المتصفح الأوسع - ولا سيما أن الإصدارات المتعددة المليئة بعرض خطوط ويب في Internet Explorer و Edge Web Browsers (والتي لا تملك دعمًا لمواجهة واجهة برمجة تطبيقات Font Loading CSS).
font-display: swap@font-facepreload<link> علامةfont-display: swap مع preload<link> علامة و CSS : @font-face واصفfont-display و preloadعلى غرار ما سبق ، ولكن دون استخدام فئة - باستخدام واجهة برمجة تطبيقات خط CSS فقط. هذا لا يتطلب أي تعديل لـ CSS ، ويحقق خطوط الويب باستخدام JS برمجيًا. رأيت أولاً هذه الطريقة في دليل WebFont من Bramstein.
.style.fontFamily طريقة (لا تعمل بشكل جيد مع عائلة واحدة لكل صفحة) ، شاهد هذا أولاً في تغريدة من Simevidasتحميل مرحلتين ، باستخدام ملف خط روماني واحد في المرحلة الأولى (مع التخليق الخط).
preload<link> Tag و JavaScript : CSS Font Loading APIfont-display: optional مع JavaScript.preload ، مع عوامل معروضة للضغط على الطابق font-display: optional<link> Tag و JavaScript : CSS Font Loading API و fontfaceObserver polyfillهذه ليست بالضرورة استراتيجيات تحميل الخطوط بمفردها ولكنها تحوّنات إضافية يمكنك وضعها في أعلى وتواصل الاستراتيجيات الحالية.
إلغاء الاشتراك في خطوط الويب على سرعات اتصال بطيئة.
prefers-reduced-motion إلغاء الاشتراك في خطوط الويب عند تمكين المستخدم Reduce Motion .
save-data إلغاء الاشتراك في خطوط الويب عندما يقوم المستخدم بتمكين وضع Data Saver .
من المحتمل أن ترى منشورات المدونة على هذه في مرحلة ما.
font-display: optionalهيا. ؟
تستخدم المتصفحات القديمة لتقديم FOIT دون مهلة ، والتي جعلت في الممارسة العملية Web Points نقطة فشل واحدة. إن استخدام Woff2 يقطع فقط الخردل إلى المتصفحات الحديثة التي لديها مهلة FOIT ثلاث ثوان لخطوط الويب. نحن هنا نص مضاد للمرؤوس هنا ، ولكن هذا النهج يستحق الذكر.
font-synthesis ليس منتجًا جيدًا.
<style> الحقن أي شيء يستخدم javaScript لحقن <style> مع كتل @font-face في الداخل. تكلفة إعادة طلاء سيئة حقا - تجنب هذا. يتم استخدام هذا في طريقة URI للبيانات غير المتزامنة أعلاه ولكنها شائعة أيضًا في طرق الأداء الأسوأ أيضًا.
font-display: optional preloadpreload باستخدام font-display: optional هو مضاد للانهيارfont-display فقط (خلط قيم font-display عبر font-family )هذه الطريقة لا تملك حاليًا دعم المتصفح. آمل أن يتغير هذا - احتل المزيد.
swap / 3 optional ) هذا شيء شائع يحاول الناس - لقد قاموا بتحميل CSS بشكل غير متزامن (و CSS فقط). هيك ، لقد استخدمت هذا السلوك قبل أن أبدأ دراسة تحميل خط الويب.
@supports و font-displayfont-displayfont-display (ويعمل بشكل جيد بدون تبعيات JS)@supports لا يعمل مع واصفات Font-Face.font-family ضع خطتين أو أكثر من خطوط الويب font-family الخط في مكدس font-family واحد.
فشل : تختار خوارزمية مطابقة الخط أول خط ويب يتطابق ويحاول تحميله (تجاهل عائلات خطوط الويب اللاحقة). حتى إذا قمت preload المرحلة الأولى من المجموعة الفرعية ، فسيتم تبديلها بسبب أولوية طلب font-family .
شفرة
العرض التوضيحي
تحديث : على الرغم من أنه يمكنك تخفيف المشكلة أعلاه مع font-display ، وربما تعديل ترتيب مكدس font-family و @font-face ، لا تزال هناك مشاكل في إزالة خط الويب الفرعي غير الضروري من الصفحة بعد تحميل الإصدار الأكبر. سيتم كسر ميزات الخط التي تحدث مع الحروف الرسومية التي تعبر حدود ملفات الخطية (kerning ، ligatures ، et cetera). ذات الصلة ، لا يمكنك إزالة كائن FontFace المقترن باستخدام واجهة برمجة تطبيقات FONT FONT CSS (وفقًا للمواصفات).
** لاحظ أن هذه الأساليب ستشعر في Internet Explorer و Edge من خلال الاستفادة من سلوك تحميل الخطوط الافتراضية.
