يشرح هذا الدليل كيفية استخدام Google Fonts API لإضافة خطوط إلى موقعك الإلكتروني. . لست بحاجة إلى تنفيذ أي برمجة. كل ما عليك فعله هو إضافة رمز إلى مستند HTML الخاص بك، ثم ارجع إلى الخط في نمط CSS.
مثال سريع
إليك مثالاً. انسخ قصاصة HTML التالية والصقها في ملف:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
ثم افتح الملف في متصفح ويب حديث. من المفترض أن ترى صفحة تعرض التالي، في الخط المسمى Tangerine:
هذه الجملة عبارة عن نص عادي، لذا يمكنك تغيير شكلها باستخدام CSS. تجربة إضافة ظل إلى النمط في المثال السابق:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
من المفترض أن يظهر الآن تظليل القطرات أسفل النص:
هذه ليست سوى بداية ما يمكنك فعله باستخدام Fonts API وCSS.
نظرة عامة
يمكنك البدء في استخدام Google Fonts API بخطوتَين فقط:
أضف رابط ورقة أنماط لطلب خطوط الويب المطلوبة:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
يمكنك تحديد نمط لعنصر باستخدام خط الويب المطلوب، إما في ورقة أنماط على النحو التالي:
.css-selector { font-family: 'Font Name', serif; }
أو بنمط مضمّن على العنصر نفسه:
<div style="font-family: 'Font Name', serif;">Your text</div>
للحصول على قائمة بالخطوط التي يمكنك استخدامها، راجِع Google Fonts.
تحديد مجموعات الخطوط والأنماط في عنوان URL لورقة الأنماط
لتحديد عنوان URL الذي تريد استخدامه في رابط ورقة الأنماط، ابدأ عنوان URL الأساسي لواجهة Fonts API:
https://fonts.googleapis.com/css
بعد ذلك، أضِف مَعلمة عنوان URL family= مع اسم مجموعة خطوط واحد أو أكثر
الأنماط.
على سبيل المثال، لطلب خط Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
لطلب مجموعات خطوط متعدّدة، يجب الفصل بين الأسماء باستخدام رمز شرطة رأسي.
(|).
على سبيل المثال، لطلب الخطوط اليوسفي، Inconsolata Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
يتيح لك طلب خطوط متعددة استخدام كل هذه الخطوط في صفحتك. (لكن لا تبالغ؛ فمعظم الصفحات لا تحتاج إلى عدد كبير من الخطوط، وطلب الكثير من الخطوط قد يجعل تحميل صفحاتك بطيء).
توفّر واجهة برمجة التطبيقات Google Fonts API الإصدار العادي من الخطوط المطلوبة عن طريق
الافتراضي. لطلب أنماط أو أوزان أخرى، أضِف نقطتَين (:) إلى اسم
الخط، متبوعًا بقائمة من الأنماط أو قيم الترجيح مفصولة بفواصل (,).
على سبيل المثال:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
لمعرفة الأنماط والأوزان المتاحة لخط معين، راجع الخطوط في Google Fonts.
لكل نمط تطلبه، يمكنك إعطاء إما الاسم الكامل أو الاختصار بالنسبة للأوزان، يمكنك بدلاً من ذلك تحديد الوزن العددي:
| النمط | المحددات |
|---|---|
| مائل | italic أو i |
| غامق | bold أو b أو وزن رقمي مثل 700 |
| غامق ومائل | bolditalic أو bi |
على سبيل المثال، لطلب كتابة Cantarell بالخط المائل وDroid Serif بالخط الغامق، يمكنك استخدام أي عن عناوين URL التالية:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
استخدام عرض الخط
font-display
للتحكم في ما يحدث عندما يكون الخط غير متاح. تحديد قيمة أخرى
عن قيمة auto التلقائية تكون عادةً مناسبة.
أدخِل القيمة المطلوبة في مَعلمة display لسلسلة طلب البحث:
https://fonts.googleapis.com/css?family=Roboto&display=swap
تحديد مجموعات فرعية للنص البرمجي
بعض الخطوط في دليل خطوط Google تدعم نصوصًا متعددة (مثل اللاتينية والسيريلية واليونانية). بالترتيب لتحديد المجموعات الفرعية التي يجب تنزيلها، يجب تنزيل معلمة المجموعة الفرعية ملحق بعنوان URL.
فعلى سبيل المثال، لطلب المجموعة الفرعية السيريلية Roboto Mono، فسيكون عنوان URL أن يكون:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
لطلب المجموعة الفرعية اليونانية من Roboto Mono، فسيكون عنوان URL أن يكون:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
لطلب كل من المجموعات الفرعية اليونانية والسيريلية Roboto Mono، فسيكون عنوان URL أن يكون:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
يتم دائمًا تضمين المجموعة الفرعية اللاتينية إذا كانت متاحة ولا يلزم تحديدها. يُرجى ملاحظة أنه إذا كان متصفح العميل يتوافق مع نطاق يونيكود. (http://caniuse.com/#feat=font-unicode-range) يتم تجاهل معلمة المجموعة الفرعية؛ سيختاره المتصفح من المجموعات الفرعية بالخط للحصول على ما يحتاج إليه لعرض النص.
للحصول على قائمة كاملة بالخطوط والمجموعات الفرعية للخطوط المتاحة، يرجى مراجعة Google Fonts:
تحسين طلبات الخطوط
في كثير من الأحيان، عندما تريد استخدام خط ويب على موقع الويب أو التطبيق، يجب وتعرف مسبقًا الخطابات التي ستحتاج إليها. يحدث هذا غالبًا عند استخدام خط الويب في شعار أو عنوان.
في هذه الحالات، عليك تحديد قيمة text= في الخط.
لعنوان URL الخاص بالطلب. سيسمح هذا لـ Google بعرض ملف خط تم تحسينه ليلائم
طلبك. وفي بعض الحالات، قد يؤدي هذا الإجراء إلى تقليل حجم ملف الخط بنسبة تصل إلى 90%.
ولاستخدام هذه الميزة، ما عليك سوى إضافة text= إلى طلبات Google Fonts API. بالنسبة
على سبيل المثال، إذا كنت تستخدم Inconsolata فقط لعنوان مدونتك، يمكنك وضع
العنوان نفسه كقيمة text=. إليك ما سيبدو عليه الطلب
مثل:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
وكما هو الحال مع كل سلاسل طلبات البحث، يجب ترميز القيمة بعنوان URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
تعمل هذه الميزة أيضًا مع الخطوط الدولية، ما يتيح لك تحديد UTF-8. الأحرف. على سبيل المثال، مرحبًا، يتم تمثيلها على النحو التالي:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
تفعيل تأثيرات الخط (إصدار تجريبي)
عند إنشاء عناوين أو عرض نصوص على موقع الويب، ستحتاج غالبًا إلى إضفاء نمط على النص بطريقة زخرفية. لتبسيط عملك، توفّر لك Google تقديم مجموعة من تأثيرات الخطوط التي يمكنك استخدامها بأقل جهد ممكن تنتج نصوص عرض رائعة. على سبيل المثال:
لاستخدام هذه الميزة التجريبية، ما عليك سوى إضافة effect= إلى خطوط Google.
من واجهة برمجة التطبيقات وإضافة اسم الفئة المقابلة إلى عناصر HTML التي
تريدون التأثير فيه. في المثال أعلاه، استخدمنا تأثير الخط shadow-multiple،
لذلك سيبدو الطلب كالتالي:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
لاستخدام التأثير، أضف اسم الفئة المقابل إلى عناصر HTML. تشير رسالة الأشكال البيانية
يكون اسم الفئة المقابل دائمًا هو اسم التأثير الذي يبدأ بـ font-effect-،
إذًا، سيكون اسم الفئة في shadow-multiple هو font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
يمكنك طلب تأثيرات متعددة من خلال فصل أسماء التأثيرات بشرطة مائلة
حرف (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
فيما يلي قائمة كاملة بجميع تأثيرات الخطوط التي نوفرها:
| التأثير | اسم واجهة برمجة التطبيقات | اسم الصف | الدعم |
|---|---|---|---|
| النقش المنقوش | anaglyph |
font-effect-anaglyph |
Chrome وFirefox وOpera وSafari |
| لافتة من الطوب | brick-sign |
font-effect-brick-sign |
Chrome وSafari |
| طباعة لوحات | canvas-print |
font-effect-canvas-print |
Chrome وSafari |
| صوت طقطقة | crackle |
font-effect-crackle |
Chrome وSafari |
decaying |
font-effect-decaying |
Chrome وSafari | |
| الدمار | destruction |
font-effect-destruction |
Chrome وSafari |
| منزعج | distressed |
font-effect-distressed |
Chrome وSafari |
| خشب قديم | distressed-wood |
font-effect-distressed-wood |
Chrome وSafari |
| Embos | emboss |
font-effect-emboss |
Chrome وFirefox وOpera وSafari |
| حريق | fire |
font-effect-fire |
Chrome وFirefox وOpera وSafari |
| صورة متحركة لإطلاق النار | fire-animation |
font-effect-fire-animation |
Chrome وFirefox وOpera وSafari |
| هشة | fragile |
font-effect-fragile |
Chrome وSafari |
| العشب | grass |
font-effect-grass |
Chrome وSafari |
| جليد | ice |
font-effect-ice |
Chrome وSafari |
| الانقسام الميتوزي | mitosis |
font-effect-mitosis |
Chrome وSafari |
| نيون | neon |
font-effect-neon |
Chrome وFirefox وOpera وSafari |
| المخطط | outline |
font-effect-outline |
Chrome وFirefox وOpera وSafari |
| اللون الأخضر | putting-green |
font-effect-putting-green |
Chrome وSafari |
| فولاذ مكشوف | scuffed-steel |
font-effect-scuffed-steel |
Chrome وSafari |
| عدة ألوان | shadow-multiple |
font-effect-shadow-multiple |
Chrome وFirefox وOpera وSafari |
| مقسمة | splintered |
font-effect-splintered |
Chrome وSafari |
| الثابت | static |
font-effect-static |
Chrome وSafari |
| Stonewash | stonewash |
font-effect-stonewash |
Chrome وSafari |
| ثلاثية الأبعاد | 3d |
font-effect-3d |
Chrome وFirefox وOpera وSafari |
| تعويم ثلاثي الأبعاد | 3d-float |
font-effect-3d-float |
Chrome وFirefox وOpera وSafari |
| عتيق | vintage |
font-effect-vintage |
Chrome وSafari |
| الخلفية | wallpaper |
font-effect-wallpaper |
Chrome وSafari |
هناك العديد من الطرق لتصميم الخطوط، ويمكن إجراء الكثير من الأشياء من خلال CSS. نقدم ببساطة بعض الأفكار لمساعدتك على البدء. لمزيد من المعلومات، أفكار، جرّب البحث في Google "تأثيرات نص css" أو وتصفح العديد من الأفكار الموجودة بالفعل على الويب!
محتوى إضافي للقراءة
- اطّلِع على قائمة كاملة بمجموعات الخطوط التي توفّرها Google Fonts API على Google Fonts:
- تعرّف على كيفية استخدام أداة تحميل خطوط الويب للحصول على المزيد من التحكم في تحميل الخطوط.
- تعرّف على مزيد من المعلومات حول طريقة عمل Google Fonts API على الاعتبارات الفنية.