تدعم 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>
باستخدام متصفح لفتح الملف، يجب أن تعرض الصفحة النص "جعل الويب جميلاً"، بخط 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>
وباستخدام متصفح لفتح الملف، يجب أن تعرض الصفحة النص "جعل الويب جميلاً"، أولاً في Crimson Pro ثم في Literata.
نطاقات المحور
تقدم الخطوط المتغيرة نطاقات مستمرة من الأنماط، غالبًا بدون وقت استجابة إضافي. ويرتبط هذا بالتصميم سريع الاستجابة. تستخدم طريقة الطباعة الديناميكية هذه نطاقات متواصلة من الأنماط، وتعرض جميع الأوزان بين 100 و900 على الصفحة، وتغير الوزن بشكلٍ متجاوب بناءً على بعض الحالات.
لطلب نطاق من محور خط متغير، اربط القيمتين مع ..
| الخطوط | الطلب |
|---|---|
كريمسون برو [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 Italic & [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
أنماط فردية، مثل الوزن
بدون مواصفات النمط، توفر واجهة برمجة التطبيقات النمط الافتراضي للعائلة المطلوبة. لطلب أنماط فردية أخرى، مثل قيم ترجيح معينة، أضف علامة النقطتين (:) بعد اسم مجموعة الخطوط، متبوعًا بقائمة من الكلمات الرئيسية لمواقع المحور بالترتيب الأبجدي، وعلامة (@)، وقائمة واحدة أو أكثر من قيم خصائص المحور هذه.
تعرض هذه الأمثلة ذلك عمليًا.
| الخطوط | الطلب |
|---|---|
| Crimson Pro (تلقائي) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| كريمسون برو غامق | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| كريمسون برو عادي وغامق | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| كريمسون برو غامق ومائل غامق | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
تعرض خطوط Google جميع الأنماط المتاحة لكل مجموعة خطوط.
النمط التلقائي
عندما لا يحدد الطلب موضعًا أو نطاقًا للمحور، سيتم استخدام الموضع التلقائي. يكون الموضع الافتراضي للمحور المائل 0 (عادي) والمحور الافتراضي للمحور الوزن هو 400 (عادي).
بالنسبة إلى العائلات التي تحتوي على محاور لا تحتوي على الموضع التلقائي، سيتعذّر تنفيذ الطلبات التي لا تحدّد مواضع لهذه المحاور. على سبيل المثال، عند طلب عائلة بمحور وزن يتراوح من 500 إلى 900، يجب تحديد موضع الوزن.
أوزان غير قياسية
باستخدام الخطوط الثابتة، يتم تحديد أنماط الوزن عادةً على شكل مضاعفات العدد 100 (على سبيل المثال، 300، 400، 700). تقدم الخطوط المتغيرة كلاً من قيم الترجيح القياسية والأوزان المتوسطة. لعرض وزن متوسط:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
تحسين وقت الاستجابة وحجم الملف
كن دقيقًا بشأن الأنماط التي تستخدمها. توفر واجهة برمجة التطبيقات الأنماط المطلوبة في مجموعة الخطوط المدمجة. قد يتسبب طلب أنماط غير مستخدمة في تنزيل المستخدمين لخط أكثر مما يلزم، مما يتسبب في مزيد من وقت الاستجابة. إذا كنت تستخدم 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 المحدّثة أكثر صرامة بشأن الطلبات المقبولة من واجهة برمجة تطبيقات CSS الأصلية.
إرشادات عامة:
- إدراج المحاور أبجديًا (لغة واحدة (
en-US)) - يجب ترتيب مجموعات قيم المحور (أي التلاميذ) رقميًا.
- لا يمكن أن تتداخل الخزائن أو المسها (مثل
wght400..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 على صفحة الاعتبارات الفنية.