كيفية استخدام Google Fonts CSS API لعرض خطوط الويب بفعالية
على مر السنين، تغير الكثير مع تكنولوجيا خطوط الويب. ما كان في السابق ممارسة كانت تتطلّب صورة نص أو مكوّنًا إضافيًا لبرنامج فلاش (والذي أدّى إلى اختراق تحسين محركات البحث على موقعك الإلكتروني) أصبح الآن ممارسة عادية على الويب. كان عليك في يوم من الأيام تحميل خط كامل قبل تحميل الصفحة، بأنماط وأحرف ربما لم تكن تستخدمها حتى بعد، ولكن لم يعُد من الضروري أن يحدث ذلك.
تم أيضًا تطوير Google Fonts CSS API على مر السنين لمواكبة التغييرات التي تطرأ على تكنولوجيا Web Fonts. لقد قطعت شوطًا طويلاً عن عرض القيمة الأصلي، وهو زيادة سرعة الويب من خلال السماح لمتصفّحك بتخزين الخطوط الشائعة الاستخدام مؤقتًا عبر جميع المواقع الإلكترونية التي تستخدم واجهة برمجة التطبيقات. ولم يعد ذلك صحيحًا، إلا أنّ واجهة برمجة التطبيقات لا تزال توفّر تحسينات إضافية ومهمة كي يتم تحميل المواقع الإلكترونية بسرعة وتعمل الخطوط بشكل جيد.
باستخدام Google Fonts CSS API، يمكن لموقعك الإلكتروني أن يطلب فقط بيانات الخطوط التي يحتاجها لتقليل مدّة تحميل CSS، ما يضمن لزوّار موقعك الإلكتروني تحميل المحتوى في أسرع وقت ممكن. وستستجيب واجهة برمجة التطبيقات لكل طلب بأفضل خط لمتصفّح الويب هذا.
يحدث كل هذا عن طريق تضمين سطر واحد من HTML في التعليمات البرمجية.
كيفية استخدام Google Fonts CSS API
تلخّص وثائق واجهة برمجة تطبيقات Google Fonts CSS الأمر بشكل جيد:
ولن تحتاج إلى تنفيذ أي برمجة؛ كل ما عليك فعله هو إضافة رابط ورقة أنماط خاصة إلى مستند HTML، ثم الرجوع إلى الخط في نمط CSS.
الحد الأدنى الذي عليك فعله هو تضمين سطر واحد في HTML، على النحو التالي:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
وعندما تطلب خطًا من واجهة برمجة التطبيقات، عليك تحديد العائلة أو العائلات التي تريدها، ويمكنك تحديد الأحجام والأنماط والمجموعات الفرعية وخيارات كثيرة أخرى إذا أردت ذلك. ستتعامل واجهة برمجة التطبيقات بعد ذلك مع طلبك بإحدى الطريقتَين التاليتَين:
- إذا كان طلبك يستخدم معلَمات شائعة تحتوي واجهة برمجة التطبيقات على ملفات لها، سيتم عرض CSS على الفور للمستخدم وتوجيهه إلى هذه الملفات.
- إذا طلبت خطًا يتضمّن معلَمات غير مضمّنة في واجهة برمجة التطبيقات في الوقت الحالي، سيتم إنشاء مجموعة فرعية من الخطوط بسرعة باستخدام HarfBuzz لتنفيذ ذلك بسرعة، وعرض CSS للإشارة إليها.
يمكن أن تكون ملفات الخطوط كبيرة، ولكن ليس من الضروري أن تكون
يمكن أن تكون خطوط الويب كبيرة؛ وهذا صحيح. يبلغ حجم Noto Sans Japan واحد في WOFF2 ما يقرب من 3.4 ميغابايت، وسيؤدي تنزيل هذا الحجم إلى كل مستخدم من المستخدمين إلى زيادة مقدار الوقت المستغرق في تحميل الصفحة. عندما تحسب كل مللي ثانية وكل بايت ثمينًا، ستحتاج إلى التأكد من أنك لا تُحمِّل سوى البيانات التي يحتاجها المستخدمون لديك.
يمكن لواجهة Google Fonts CSS API إنشاء ملفات خطوط صغيرة جدًا (تُسمّى مجموعات فرعية) يتم إنشاؤها في الوقت الفعلي، وذلك بهدف عرض النصوص والأنماط التي يتطلبها موقعك الإلكتروني فقط للمستخدمين. بدلاً من عرض خط بالكامل، يمكنك طلب أحرف معيّنة باستخدام المَعلمة text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
توفّر واجهة CSS API أيضًا تحسينات إضافية لخطوط الويب للمستخدمين تلقائيًا، بدون أيّ مَعلمات لواجهة برمجة التطبيقات. ستعرض واجهة برمجة التطبيقات ملفات CSS للمستخدمين الذين سبق تفعيل unicode-range (إذا كان متصفّح الويب لديهم)، لذلك يحمِّلون الخطوط للأحرف المحدّدة التي يحتاجها موقعك الإلكتروني فقط.
أداة وصف CSS ذات النطاق يونيكود هي إحدى الأدوات التي يمكن استخدامها الآن لمكافحة عمليات تنزيل الخطوط الكبيرة الحجم. تحدّد سمة CSS هذه نطاقًا من أحرف يونيكود التي يتضمّنها بيان @font-face. إذا تم عرض أحد هذه الأحرف على الصفحة، يتم تنزيل هذا الخط. وهذا يناسب جميع أنواع اللغات، وبالتالي يمكنك استخدام خط يتضمّن أحرفًا لاتينية أو يونانية أو سيريلية وإنشاء مجموعات فرعية أصغر. في المخطط السابق، يمكنك أن ترى أنه إذا كان عليك تحميل مجموعات الأحرف الثلاث هذه جميعها، فستكون أكثر من 600 حرف رسومي.
يتيح هذا أيضًا استخدام الخطوط الصينية واليابانية والكورية (CJK) على الويب. في المخطط السابق، يمكنك أن ترى أن خط CJK يغطي 15-20 مرة عدد الأحرف التي يغطيها خط الحرف اللاتيني. عادةً ما تكون هذه الخطوط كبيرة جدًا ولا يتم استخدام العديد من الأحرف في تلك اللغات بشكل متكرر مثل الآخرين.
يمكن أن يؤدي استخدام واجهة برمجة التطبيقات CSS API ونطاق يونيكود إلى تقليل عمليات نقل الملفات بنسبة 90%تقريبًا. باستخدام أداة الوصف unicode-range، يمكنك تحديد كل جزء بشكل منفصل، ولا يتم تنزيل كل شريحة إلا بعد أن يحتوي المحتوى على أحد الأحرف في نطاقات الأحرف هذه.
مثال: إذا أردت ضبط الكلمة "こんたち苯" فقط في Noto Sans JP، يمكنك إجراء ما يلي:
- إجراء استضافة ذاتية لملفات WOFF2 الخاصة بك.
- استخدم CSS API لاسترداد WOFF2.
- استخدِم واجهة برمجة تطبيقات CSS مع ضبط المعلمة text= على "こんたちこ".
في هذا المثال، يمكنك ملاحظة أنه باستخدام واجهة برمجة تطبيقات CSS، يتم توفير 97.5% من خلال الاستضافة الذاتية لخط WOFF2، وذلك بفضل دعم واجهة برمجة التطبيقات المضمن لفصل الخطوط الكبيرة إلى نطاق يونيكود. من خلال المضيّ قدمًا وتحديد النص الذي تريد عرضه بالضبط، يمكنك تقليل حجم الخط إلى 95.3% فقط من خط CSS API، أي أصغر بنسبة 99.9% من الخط الذي تتم استضافته ذاتيًا.
ستعرض Google Fonts CSS API الخطوط تلقائيًا بأصغر حجم وأكثر توافقًا مع متصفّح المستخدم. إذا كان المستخدم يستخدم متصفحًا يتيح استخدام WOFF2، فستوفر واجهة برمجة التطبيقات الخطوط بتنسيق WOFF2، لكن إذا كان يستخدم متصفحًا قديمًا، ستقدم واجهة برمجة التطبيقات الخطوط بتنسيق متوافق مع هذا المتصفح. ولتقليل حجم الملف لكل مستخدم، تزيل واجهة برمجة التطبيقات أيضًا البيانات من الخطوط عند عدم الحاجة إليها. على سبيل المثال، ستتم إزالة بيانات التلميح للمستخدمين الذين لا تحتاج متصفّحاتهم إلى تلك البيانات.
تصميم خطوط الويب على موقعك الإلكتروني مستقبلًا باستخدام Google Fonts CSS API
يساهم فريق Google Fonts أيضًا في وضع معايير W3C الجديدة التي تواصل ابتكار تقنيات الخطوط على الويب، مثل WOFF2. أحد المشاريع الحالية هو مشروع النقل التدريجي للخطوط الذي يتيح للمستخدمين تحميل أجزاء صغيرة جدًا من ملفات الخطوط أثناء استخدامها على الشاشة وبثّ المحتوى الباقي عند الطلب، متجاوزًا أداء نطاق يونيكود. عند استخدام Web Font API، سيحصل المستخدمون على هذه التحسينات الأساسية لتقنية نقل الخطوط عندما تصبح متوفّرة في المتصفّح.
هذا هو جمال واجهة برمجة تطبيقات Fonts: يستفيد المستخدمون من كل تحسين جديد للتكنولوجيا بدون إجراء أي تغييرات على موقعك الإلكتروني. هل تريد استخدام تنسيق جديد للخط على الويب؟ ما من مشكلة. هل توافق على استخدام المتصفح أو نظام التشغيل الجديد؟ لقد تمت الاعتناء به. لذا بدلاً من الانشغال بصيانة خطوط الويب الخاصة بك، لك مطلق الحرية في التركيز على المستخدمين والمحتوى الخاص بك.
تتوافق الخطوط المتغيّرة مع الميزات المضمّنة
الخطوط المتغيّرة هي ملفات خطوط يمكنها تخزين مجموعة من الأشكال المختلفة في التصميم بين محاور متعددة، ويشمل الإصدار الجديد من Google Fonts CSS API دعمًا لهذه الخطوط. تتيح إضافة محور تباين إضافي مرونة جديدة مع الخط - ولكن يمكنها تقريبًا مضاعفة حجم ملف الخط.
عندما تكون أكثر تحديدًا في طلب واجهة برمجة تطبيقات CSS، يمكن لواجهة Google Fonts CSS API عرض جزء الخط المتغيّر الذي يحتاجه موقعك الإلكتروني فقط، لتقليل حجم التنزيل للمستخدمين. ويتيح هذا استخدام الخطوط المتغيّرة على الويب بدون تحمّل أوقات تحميل طويلة للصفحات. يمكنك القيام بذلك عن طريق تحديد قيمة واحدة على أحد المحور، أو تحديد نطاق؛ ويمكنك حتى تحديد عدة محاور وعائلات خطوط متعددة في طلب واحد. تتميّز واجهة برمجة التطبيقات بالمرونة في تلبية احتياجاتك.
سهولة التنفيذ وتحسين الأداء لتناسب احتياجاتك
تساعدك Google Fonts CSS API في عرض الخطوط التالية:
- أكثر توافقًا مع متصفحات الويب.
- أصغر قدر ممكن.
- يتم التسليم بسرعة.
- الذي يسهل استخدامه.
للاطّلاع على مزيد من المعلومات حول Google Fonts، يُرجى الانتقال إلى fonts.google.com. ولمعرفة المزيد حول CSS API، يمكنك مراجعة مستندات واجهة برمجة التطبيقات.
شكر وتقدير
صورة رئيسية من lesehee