تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تعديل واجهة CSS API

أصبحت خدمة Google Fonts متوافقة الآن بالكامل مع الخطوط المتغيّرة في الإصدار 2 من واجهة برمجة التطبيقات. سنقوم شرح كيفية استدعاء كل من عائلتي الخطوط الفردية والمتعددة وكيفية تحديد ونطاقات المحاور. للحصول على نظرة متعمقة حول الخطوط المتغيرة، تعرف على المزيد من خلال هذا كتيّب مصوّر تفاعلي من ديفيد بيرلو في TypeNetwork.

الميزات الجديدة

كل شيء يبدأ بعنوان URL أساسي جديد:

https://fonts.googleapis.com/css2

تغير بناء الجملة لتحديد الأنماط داخل كل عائلة لوصف خط متغير "تصميم المساحات"

أدلة البدء السريع

انسخ قصاصة HTML والصقها في ملف:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

وباستخدام متصفح لفتح الملف، يجب أن تعرض الصفحة النص "إنشاء ملف Web Beautiful"، بخط Crimson Pro.

إضفاء جمال على الويب

عدة عائلات

لطلب عدّة عائلات، حدِّد مَعلمة family= لكلّ عائلة.

على سبيل المثال، لطلب الخطوط Crimson Pro Literata:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

انسخ قصاصة HTML والصقها في ملف:

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

باستخدام متصفح لفتح الملف، من المفترض أن تعرض الصفحة النص "Making the Web Beautiful" أولاً في Crimson Pro ثم في Literata.

إضفاء جمال على الويب

نطاقات المحور

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

لطلب نطاق من محور خط متغيّر، يجب ربط القيمتَين باستخدام ...

الخطوط	الطلب
Crimson Pro [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
Crimson Pro Italic [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
Crimson Pro Bold مائل [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

يبدو أنّ متصفّحك لا يتيح استخدام الخطوط المتغيّرة (caniuse). في متصفح يتيح استخدام تباينات الخطوط، يجب عرض النص التالي Crimson Pro كمجموعة سلسة من الأوزان من 400 إلى 500. يمكن لرسوم CSS المتحركة النص يختلف بسلاسة في النمط عند التفاعل.

إذا كان المتصفّح يتيح استخدام الخطوط المتغيّرة بالكامل (caniuse)، فعندئذ يجب أن يعرض النص التالي Crimson Pro كمجموعة متجانسة من الأوزان من 400 إلى 500. يمكن لرسوم CSS المتحركة أن تجعل النص يغير نمط التفاعل بسلاسة.

إضفاء جمال على الويب

الأنماط الفردية، مثل الوزن

بدون مواصفات النمط، توفر واجهة برمجة التطبيقات النمط التلقائي وطلبت من العائلة. لطلب أنماط فردية أخرى، مثل الأوزان المحددة، إلحاق نقطتَين (:) بعد اسم مجموعة الخطوط، متبوعة بقائمة المحور الكلمات الرئيسية للخصائص بترتيب أبجدي وعلامة علامة (@) وقائمة واحدة أو أكثر من القيم لخصائص المحور تلك.

توضّح هذه الأمثلة هذا الأمر بشكل عملي.

الخطوط	الطلب
Crimson Pro (تلقائي)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
كريمسون Pro غامق	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
كريمسون Pro العادي غامق	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
Crimson Pro Bold & غامق ومائل	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

تعرض Google Fonts جميع الأنماط المتاحة لكل مجموعة خطوط.

النمط التلقائي

عندما لا يحدد الطلب موضعًا أو نطاقًا للمحور، تحدد موضع الإعلان. الموضع الافتراضي للمحور المائل هو 0 (عادي) الإعداد الافتراضي لمحور الوزن هو 400 (متوسط).

أما بالنسبة إلى العائلات التي تتضمن محاور لا تحتوي على الموضع الافتراضي، فالطلبات التي تتضمن أو تحديد مواضع لهذه المحاور سوف تفشل. على سبيل المثال، عند طلب عائلة ذات محور وزن يتراوح بين 500 و900، يجب أن يكون موضع الوزن المحددة.

الأوزان غير العادية

باستخدام الخطوط الثابتة، عادةً ما يتم تحديد أنماط الوزن كمضاعفات لـ 100 (مثال: 300 أو 400 أو 700). توفر الخطوط المتغيرة كلاً من الأحجام القياسية الأوزان المتوسطة. لعرض وزن متوسط:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

يبدو أنّ المتصفّح لا يتيح استخدام الخطوط المتغيّرة. (caniuse). على متصفّح التي تدعم أشكال الخطوط المختلفة، يجب أن يعرض النص التالي بلون قرمزي Pro بأوزان بارزة مرئيًا، وهي 400 و450 و500.

إذا كان المتصفّح يتيح استخدام الخطوط المتغيّرة بالكامل (caniuse)، النص التالي يجب أن يُظهر Crimson Pro بأوزان مختلفة بصريًا تبلغ 400، و450 و500.

إضفاء جمال على الويب

تحسين وقت الاستجابة وحجم الملف

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

استخدام عرض الخط

font-display التحكم في ما يحدث أثناء تحميل الخط أو غير متاحة في أي موضع آخر. إنّ تحديد قيمة أخرى غير قيمة auto التلقائية هي يكون مناسبًا عادةً.

أدخِل القيمة المطلوبة في المَعلمة display:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

تحسين طلبات الخطوط

في كثير من الأحيان، عندما تريد استخدام أحد خطوط الويب على موقعك أو تطبيقك، يجب عليك وتعرف مسبقًا الخطابات التي ستحتاج إليها. يحدث هذا غالبًا عند استخدام خط الويب في شعار أو عنوان.

في هذه الحالات، عليك تحديد قيمة text= في الخط. لعنوان URL الخاص بالطلب. يسمح هذا لخطوط Google بإرجاع ملف خط تم تحسينه من أجل طلبك. وفي بعض الحالات، يمكن أن يؤدي هذا إلى تقليل حجم ملف الخط بما يصل إلى 90%.

لاستخدام هذه الميزة، ما عليك سوى إضافة "text=" إلى طلب البيانات من واجهة برمجة التطبيقات. على سبيل المثال، إذا كنت تستخدم Inconsolata فقط لعنوان مدونتك، يمكنك وضع العنوان نفسها كقيمة text=. إليك ما سيبدو عليه الطلب:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

وكما هو الحال مع كل سلاسل طلبات البحث، يجب ترميز القيمة بعنوان URL:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

تعمل هذه الميزة أيضًا مع الخطوط الدولية، ما يتيح لك تحديد UTF-8. الأحرف. على سبيل المثال، يتم تمثيل الكلمة ¡Hola! على النحو التالي:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

يرجى ملاحظة أن 'text=' يمكن تحديد المعلمة مرة واحدة فقط. ينطبق لجميع العائلات في الطلب. يُرجى استخدام طلبات بيانات منفصلة من واجهة برمجة التطبيقات إذا كنت بحاجة إلى ذلك. تحسينات مختلفة للنصوص عبر العديد من العائلات.

إنشاء عناوين URL لواجهة برمجة التطبيقات

التشدّد

ملاحظة عامة، أصبحت واجهة CSS API المعدّلة أكثر صرامة في ما يتعلّق بالطلبات. بشكل مقبول من واجهة برمجة تطبيقات CSS الأصلية.

إرشادات عامة:

إدراج المحاور أبجديًا (لغة واحدة (en-US))
يجب فرز مجموعات قيم المحور (أي الصفوف) رقميًا.
لا يمكن أن تتداخل الصفوف أو تلمسها (مثلاً wght 400..500 و500..600).

مواصفات عنوان URL لواجهة برمجة التطبيقات

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name: اسم مجموعة الخطوط

axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis: علامة محور، مثل ital وwdth وwght

axis_tuple_list: <axis_tuple>[;<axis_tuple>...]

axis_tuple: <value>[,<value>...] // Same length as axis_tag_list

value: <range> | <float>

range: <float>..<float>

float: قيمة ضمن نطاق المحور المقابل

text: النص الذي سيتم عرضه بالخط المطلوب

display: auto | block | swap | fallback | optional

دعم المتصفحات القديمة

وقد لا تتمكّن المتصفّحات التي لا تتوافق مع الخطوط المتغيّرة من عرض تصميمك على النحو التالي: المقصودة. تأكَّد من توافق الخطوط في المتصفِّحات على caniuse.

من خلال ممارسة التحسين التدريجي يمكنك تجنب السلوك غير المتوقع في تلك المتصفحات القديمة. استخدام "@supports" الاستعلامات في CSS لحظر ميزات الخطوط المتغيرة.

في هذا المثال، نرغب في استخدام الوزن 450 للنص المركزي، ولكن سنضطر إلى العودة إلى إما متوسط (الوزن 400) أو متوسط (الوزن 500) عند المتغير ميزات الخط غير متاحة:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

يرسل طلب CSS Markazi+Text:wght@450 القيمة 450 إلى العملاء الذين يقدّمون الدعم متغيرين من حيث الخطوط والوزن 400 و500 لتلك التي لا فائدة منها. بشكل عام، ستكون الإجراءات الاحتياطية حول نطاق طلبك متاحة في المتصفحات القديمة.

Axis	العناصر الاحتياطية
`ital`	0، 1
`wght`	100 أو 200 أو 300 أو 400 أو 500 أو 600 أو 700 أو 800 أو 900

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

الطلب	الأنماط المتاحة في المتصفحات القديمة
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

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

يمكنك الاطّلاع هنا على جدول يضمّ الخطوط المتغيّرة المتوفّرة في الإصدار 2 من واجهة برمجة التطبيقات.

محتوى إضافي للقراءة

اطّلِع على قائمة كاملة بمجموعات الخطوط التي توفّرها Google Fonts API على Google Fonts:
تعرّف على مزيد من المعلومات حول طريقة عمل Google Fonts API على الاعتبارات الفنية.