واجهة برمجة تطبيقات لخطوط الويب السريعة والرائعة

كيفية استخدام Google Fonts CSS API لعرض خطوط الويب بفعالية.

Jimmy Mooney

على مرّ السنين، حدثت تغييرات كثيرة في تكنولوجيا خطوط الويب. إنّ ما كان يُعدّ ممارسة تخصصية تتطلّب صورة نصية أو مكوّن إضافي Flash (وكانت تؤثر سلبًا في تحسين موقعك الإلكتروني لمحركات البحث) أصبح الآن ممارسة شائعة على الويب. في السابق، كان عليك تحميل خط كامل قبل تحميل الصفحة، مع أنماط وشخصيات قد لا تستخدمها، ولكن حتى هذا الأمر أصبح من الماضي.

تطورت أيضًا Google Fonts CSS API على مرّ السنين لمواكبة التغييرات في تكنولوجيا خطوط الويب. وقد قطعت هذه الخدمة شوطًا طويلاً منذ طرحها، حيث كانت تهدف في الأصل إلى تسريع الويب من خلال السماح لمتصفّحك بتخزين الخطوط الشائعة الاستخدام في ذاكرة التخزين المؤقت على جميع المواقع الإلكترونية التي تستخدم واجهة برمجة التطبيقات. لم يعُد هذا صحيحًا، ولكن لا تزال واجهة برمجة التطبيقات توفّر تحسينات إضافية ومهمة حتى يتم تحميل المواقع الإلكترونية بسرعة وتعمل الخطوط بشكل جيد.

باستخدام واجهة برمجة التطبيقات CSS API في "خطوط Google"، يمكن لموقعك الإلكتروني طلب بيانات الخطوط التي يحتاجها فقط لتقليل وقت تحميل CSS إلى الحد الأدنى، ما يضمن أن يتمكّن زوّار موقعك الإلكتروني من تحميل المحتوى الخاص بك في أسرع وقت ممكن. تستجيب واجهة برمجة التطبيقات لكل طلب باستخدام الخط الأنسب لمتصفّح الويب هذا.

ويتم تنفيذ كل ذلك من خلال تضمين سطر واحد من HTML في الرمز.

كيفية استخدام واجهة برمجة التطبيقات CSS API في Google Fonts

تلخّص مستندات Google Fonts CSS API هذه العملية بشكل جيد:

لست بحاجة إلى إجراء أيّ برمجة، ما عليك سوى إضافة رابط خاص بملف الأنماط إلى مستند HTML، ثمّ الإشارة إلى الخط في أسلوب CSS.

الحد الأدنى من الإجراءات التي يجب اتّخاذها هو تضمين سطر واحد في ملف HTML، على النحو التالي:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

عند طلب خط من واجهة برمجة التطبيقات، يمكنك تحديد العائلة أو العائلات التي تريدها، واختياريًا، مستويات الخط وأنماطه ومجموعاته الفرعية والعديد من الخيارات الأخرى. ستعالج واجهة برمجة التطبيقات طلبك بعد ذلك بإحدى الطريقتَين التاليتَين:

1. إذا كان طلبك يستخدم مَعلمات شائعة تتوفّر لها ملفات في واجهة برمجة التطبيقات، ستُرجع واجهة برمجة التطبيقات فورًا CSS للمستخدم، وستوجّهه إلى هذه الملفات.
2. إذا طلبت خطًا مع مَعلمات لم يتم تخزينها مؤقتًا في واجهة برمجة التطبيقات، ستُنشئ مجموعة فرعية من الخطوط على الفور باستخدام 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 هذه نطاقًا من أحرف Unicode التي يحتوي عليها تعريف @font-face. إذا تم عرض أحد هذه الأحرف على الصفحة، يتم تنزيل هذا الخط. يعمل هذا بشكل جيد مع جميع أنواع اللغات، لذا يمكنك استخدام خط يتضمن أحرف لاتينية أو اليونانية أو سيريلية وإنشاء مجموعات فرعية أصغر. في الرسم البياني السابق، يمكنك الاطّلاع على أنّه إذا كان عليك تحميل كل مجموعات الأحرف الثلاثة هذه، سيكون لديك أكثر من 600 رمز.

يتيح ذلك أيضًا استخدام الخطوط الصينية واليابانية والكورية (CJK) على الويب. في الرسم البياني السابق، يمكنك الاطّلاع على أنّ خط CJK يغطي من 15 إلى 20 ضعف عدد الأحرف التي يغطيها خط الأحرف اللاتينية. وتكون هذه الخطوط عادةً كبيرة جدًا، ولا يتم استخدام العديد من الأحرف في هذه اللغات بقدر اللغات الأخرى.

يمكن أن يؤدي استخدام CSS API وunicode-range إلى تقليل عمليات نقل الملفات بنسبة %90 تقريبًا. باستخدام العنصر الوصفي unicode-range، يمكنك تحديد كل جزء بشكل منفصل، ولا يتم تنزيل كل شريحة إلا بعد أن يحتوي المحتوى على أحد الأحرف في نطاقات الأحرف هذه.

مثال: إذا كنت تريد ضبط كلمة "مطوّري التطبيقات الصغيرة" (التوافق مع) فقط في Noto Sans JP، يمكنك إجراء ما يلي:

• استضافة ملفات WOFF2 بنفسك
• استخدِم CSS API لاسترداد WOFF2.
• استخدِم واجهة CSS API مع ضبط المَعلمة text= على "こんにちは".

في هذا المثال، يمكنك ملاحظة أنّه باستخدام CSS API، يمكنك توفير ‎97.5% مقارنةً باستضافة خط WOFF2 بنفسك، وذلك بفضل التوافق المضمّن لواجهة برمجة التطبيقات مع فصل الخطوط الكبيرة إلى نطاق Unicode. ومن خلال المضي قدمًا وتحديد النص الذي تريد عرضه بالضبط، يمكنك تقليل حجم الخط إلى 95.3% فقط من خط واجهة CSS API، أي أصغر بنسبة 99.9% من الخط المستضاف ذاتيًا.

ستقدّم Google Fonts CSS API الرموز تلقائيًا بتنسيق أصغر حجمًا وأكثر توافقًا مع المتصفّح الذي يستخدمه المستخدم. إذا كان المستخدم يستخدم متصفّحًا متوافقًا مع WOFF2، ستوفّر واجهة برمجة التطبيقات الخطوط بتنسيق WOFF2، ولكن إذا كان يستخدم متصفّحًا قديمًا، ستوفّر واجهة برمجة التطبيقات الخطوط بتنسيق متوافق مع هذا المتصفّح. لتقليل حجم الملف لكل مستخدم، تزيل واجهة برمجة التطبيقات أيضًا البيانات من الخطوط عندما لا تكون مطلوبة. على سبيل المثال، ستتم إزالة بيانات التلميح للمستخدمين الذين لا تحتاج متصفّحاتهم إليها.

إتاحة خطوط الويب في المستقبل باستخدام واجهة برمجة التطبيقات CSS API في Google Fonts

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

هذه هي جمال واجهة برمجة تطبيقات الخطوط: يمكن للمستخدمين الاستفادة من كل تحسين تقنية جديدة بدون أي تغييرات على موقعك الإلكتروني. هل تريد استخدام تنسيق خط ويب جديد؟ لا مشكلة. هل تريد إتاحة استخدام متصفّح أو نظام تشغيل جديد؟ لقد تم الاهتمام بهذا الأمر. لذا، بدلاً من الانشغال بصيانة خطوط الويب، يمكنك التركيز على المستخدمين والمحتوى.

تتيح الخطوط المتغيّرة استخدام

الخطوط المتغيّرة هي ملفات خطوط يمكنها تخزين مجموعة من أشكال التصميم المختلفة في محاور متعددة، ويتضمن الإصدار الجديد من Google Fonts CSS API إتاحة استخدامها. تتيح إضافة محور إضافي للتباين إمكانية مرونة جديدة بأحد الخطوط - ولكنها يمكن أن تضاعف حجم ملف الخط تقريبًا.

عندما تكون أكثر تحديدًا في طلبك من CSS API، يمكن أن تعرِض Google Fonts CSS API الجزء من الخط المتغيّر الذي يحتاجه موقعك الإلكتروني فقط، وذلك لتقليل حجم التنزيل للمستخدمين. ويتيح هذا استخدام الخطوط المتغيرة للويب بدون تحمل أوقات تحميل طويلة للصفحات. يمكنك القيام بذلك عن طريق تحديد قيمة واحدة على محور، أو تحديد نطاق، ويمكنك حتى تحديد محاور متعددة وعائلات خطوط متعددة في طلب واحد. إنّ واجهة برمجة التطبيقات مرنة لتلبية احتياجاتك.

حلول بسيطة وفعّالة

تساعدك Google Fonts CSS API في عرض الخطوط التي:

• المزيد من التوافق مع متصفّحات الويب
• أصغر حجم ممكن
• تم تسليمها بسرعة.
• ويسهل استخدامها.

لمزيد من المعلومات عن Google Fonts، يُرجى الانتقال إلى fonts.google.com. لمزيد من المعلومات عن CSS API، يُرجى مراجعة مستندات واجهة برمجة التطبيقات.

الشكر والتقدير

الصورة الرئيسية من إنشاء leesehee.