يشرح هذا الدليل كيفية استخدام 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 الأساسي لواجهة برمجة تطبيقات Google Fonts:
https://fonts.googleapis.com/css
بعد ذلك، أضِف مَعلمة عنوان URL family= مع اسم ونمط مجموعة خطوط واحد أو أكثر.
على سبيل المثال، لطلب خط Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
لطلب مجموعات خطوط متعدّدة، افصل بين الأسماء باستخدام رمز الشرطة الرأسية
(|).
على سبيل المثال، لطلب الخطوط Tangerine وInconsolata وDroid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
يتيح لك طلب خطوط متعددة استخدام كل هذه الخطوط في صفحتك. (ولكن لا تسرف، فمعظم الصفحات لا تحتاج إلى الكثير من الخطوط، وقد يؤدي طلب العديد من الخطوط إلى إبطاء تحميل صفحاتك.)
توفر واجهة برمجة تطبيقات Google Fonts الإصدار العادي للخطوط المطلوبة بشكل تلقائي. لطلب أنماط أو قيم ترجيح أخرى، أضِف علامة نقطتين (:) إلى اسم الخط متبوعًا بقائمة من الأنماط أو قيم الترجيح مفصولة بفواصل (,).
مثال:
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. على سبيل المثال، يتم تمثيل كلمة !Hola! على النحو التالي:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
تفعيل تأثيرات الخطوط (إصدار تجريبي)
عند صياغة العناوين أو النصوص على موقعك الإلكتروني، سترغب في غالب الأحيان في تصميم نصّك بطريقة زخرفية. لتبسيط عملك، قدّمت Google مجموعة من تأثيرات الخطوط التي يمكنك استخدامها بأقل جهد لإنتاج نص عرض جميل. مثال:
لاستخدام هذه الميزة التجريبية، ما عليك سوى إضافة effect= إلى طلب واجهة برمجة التطبيقات لـ Google Fonts وإضافة اسم الفئة المقابل إلى عناصر 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 |
| النقوش | 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 | 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 |
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.
- اطّلِع على طريقة استخدام Web Font Loader (أداة تحميل خطوط الويب) للتحكّم بشكل أكبر في تحميل الخطوط.
- يمكنك التعرّف على مزيد من المعلومات حول طريقة عمل Google Fonts API في صفحة الاعتبارات الفنية.