تلعب الخطوط دورا مهما في تطوير الويب. يمكنهم إنشاء أسلوب وجو فريد على صفحة الويب ، وجذب انتباه المستخدمين والتأكيد على أهمية المحتوى. أحد الخيارات الشائعة لتوصيل الخطوط هو استخدام خطوط جوجل ، وهي خدمة توفر للمطورين إمكانية الوصول إلى مجموعة كبيرة من الخطوط عالية الجودة.
ربط الخطوط جوجل الخطوط يمكن القيام به في بضع خطوات فقط. أولا وقبل كل شيء ، تحتاج إلى تحديد الخط المناسب من مكتبة الخطوط جوجل. يتضمن العديد من عائلات الخطوط المختلفة ، بدءا من الكلاسيكية إلى الحديثة والتجريبية.
بعد تحديد الخط المطلوب ، تحتاج إلى نسخ رمز الاتصال المقترح ، والذي سيبدأ بعلامة وينتهي بعلامة. ثم ، يجب إدراج هذا الرمز بين العلامات ومستند هتمل الخاص بك. في الوقت نفسه ، من الضروري التأكد من الحفاظ على ترتيب اتصال الخط لتجنب تغييرات النمط غير المتوقعة.
- كيفية إضافة خطوط جوجل الخطوط
- الخطوة 1: التسجيل مع خطوط جوجل
- الخطوة 2: اختيار وإضافة خط
- الخطوة 3: إنشاء رمز الاتصال
- الخطوة 4: أضف الرمز إلى صفحة الويب
- الخطوة 5: التحقق من اتصال الخطوط
- الخطوة 6: تثبيت أنماط خطوط إضافية
- الخطوة 7: تحسين تحميل الخط
- الخطوة 8: استخدام الخطوط في كس
كيفية إضافة خطوط جوجل الخطوط
توفر جوجل الخطوط الخطوط الفرصة لاستخدام مجموعة غنية من الخطوط على الموقع. لإضافة خطوط جوجل إلى صفحة الويب الخاصة بك ، ستحتاج إلى اتباع الخطوات التالية:
1. ابحث عن الخطوط التي تحتاجها
انتقل إلى الموقع fonts.google.com والعثور على الخطوط التي تحتاج إليها. اختر الخطوط التي تريدها وأضفها إلى مجموعتك.
2. احصل على رمز الاتصال
حدد الخطوط في مجموعتك وانقر على زر" تحديد الأنماط والتضمين". في النافذة التي تظهر ، سترى رمز الاتصال الذي تحتاج إلى إضافته إلى صفحة الويب الخاصة بك.
3. أضف الرمز إلى صفحة الويب الخاصة بك
انسخ رمز الاتصال المستلم والصقه في قسم صفحة الويب الخاصة بك. يتم ذلك عادة داخل علامة ، والتي يمكنك وضعها داخل العلامة.
4. استخدم الخطوط
الآن يمكنك استخدام الخطوط المحددة على صفحة الويب الخاصة بك عن طريق تحديد أسمائهم في خصائص كس. على سبيل المثال ، يمكنك استخدام رمز كس التالي لتطبيق خط "روبوتو" على العناوين:
ح1 {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
}
بهذه الطريقة يمكنك إضافة خطوط جوجل الخطوط إلى صفحة الويب الخاصة بك. لا تنس حفظ التغييرات والتحقق من عرض الخطوط بشكل صحيح على موقع الويب الخاص بك.
الخطوة 1: التسجيل مع خطوط جوجل
للتسجيل ، اتبع هذه الخطوات البسيطة:
- فتح مستعرض ويب وانتقل إلى موقع جوجل الخطوط الرسمية في الشبكي://fonts.google.com/.
- انقر فوق الزر" تسجيل الدخول " الموجود في الزاوية اليمنى العليا من الصفحة.
- إذا كان لديك بالفعل حساب جوجل ، قم بتسجيل الدخول إلى حسابك. إذا لم يكن لديك حساب جوجل حتى الآن ، انقر على الرابط "إنشاء حساب" واتبع التعليمات لإنشاء حساب جديد.
- بعد تسجيل الدخول بنجاح ، ستتم إعادة توجيهك إلى صفحة خطوط جوجل مع الخطوط المتاحة.
- يمكنك الآن تحديد الخطوط التي تحتاجها لمشروعك وإضافتها إلى المجموعة وتخصيص الإعدادات.
مبارك! لقد سجلت بنجاح مع جوجل الخطوط ونحن على استعداد للانتقال إلى الخطوة التالية-ربط الخطوط إلى موقع الويب الخاص بك.
الخطوة 2: اختيار وإضافة خط
عندما تقرر استخدام الخطوط من خطوط جوجل ، ستحتاج إلى اختيار الخط المناسب لمشروعك. تقدم جوجل الخطوط مجموعة غنية من أنماط الخطوط المختلفة والاختلافات.
لتحديد خط ، انتقل إلى موقع جوجل الخطوط الرسمية وعرض الخيارات المتاحة. يمكنك تصفية الخطوط حسب معلمات مختلفة مثل الفئة والسمك والمنحدر.
عندما تعثر على خط مناسب ، انقر فوق الزر "تحديد هذا الخط" الموجود على يمين الخط المحدد. ثم سترى نافذة منبثقة مع خيارات اتصال الخط المختلفة.
حدد الخيارات التي تريدها ، مثل السماكة والمنحدر والرموز التي تريد توصيلها. عند الانتهاء من التحديد ، انسخ الرمز المقدم لك.
لإضافة الخط المحدد إلى صفحة الويب الخاصة بك ، تحتاج إلى لصق التعليمات البرمجية المنسوخة في قسم من مستند هتمل الخاص بك. يمكنك إدراج الرمز مباشرة قبل علامة الإغلاق.
الخطوة 3: إنشاء رمز الاتصال
لتوصيل الخطوط باستخدام خطوط جوجل ، تحتاج إلى إنشاء رمز خاص سيتم إدراجه على صفحة الويب الخاصة بك. يمكن الحصول على هذا الرمز على الموقع الرسمي لخطوط جوجل.
1. افتح الموقع الرسمي لخطوط جوجل في متصفحك.
2. على موقع الويب ، حدد الخطوط التي تريد استخدامها على صفحة الويب الخاصة بك. يمكنك اختيار واحد أو أكثر من الخطوط.
3. بعد تحديد الخطوط ، انقر فوق الزر" تحديد الأنماط " لتحديد أنماط خطوط مختلفة (مثل الخط الغامق والمائل وما إلى ذلك.).
4. عند تحديد أنماط الخطوط المطلوبة ، انقر فوق الزر" الحصول على رمز " في الزاوية اليمنى العليا من الشاشة. سينقلك هذا إلى الصفحة حيث سيتم إنشاء رمز اتصال الخط.
5. انسخ الكود الذي تم إنشاؤه. يبدأ هذا الرمز عادة بعلامة ويحتوي على معلومات حول الخطوط والأنماط المحددة.
6. الصق الكود المنسوخ في صفحة الويب الخاصة بك داخل القسم. عادة ما يتم وضع الرمز قبل علامة الإغلاق.
بعد إدراج هذا الرمز ، سيتم توصيل الخطوط المحددة تلقائيا بصفحة الويب الخاصة بك ، ويمكنك استخدامها في رمز كس الخاص بك لنمط النص.
الخطوة 4: أضف الرمز إلى صفحة الويب
لتوصيل خطوط جوجل الخطوط على صفحة الويب الخاصة بك ، تحتاج إلى إضافة التعليمات البرمجية التالية داخل الكتلة :
في هذا الرمز ، استبدل "اسم الخط" باسم الخط من خطوط جوجل التي تريد استخدامها.
أيضا ، إذا كنت ترغب في استخدام خطوط متعددة ، يمكنك إضافتها مفصولة بفواصل في المعلمة هريف ، على سبيل المثال:
بعد إضافة هذا الرمز ، سيكون الخط متاحا على صفحة الويب الخاصة بك.
الآن يمكنك استخدام هذا الخط في قواعد كس الخاص بك عن طريق تحديد اسمها في خاصية الخط الأسرة. على سبيل المثال:
في هذا المثال ، يشار إلى أنه يجب عرض النص الموجود على صفحة الويب بخط يحمل اسم "اسم التحول" ، وإذا لم يكن هذا الخط متاحا ، فسيتم استخدام خط بلا الرقيق (بلا الرقيق).
الآن بعد أن أضفت الرمز إلى صفحة الويب الخاصة بك ، يمكنك البدء في استخدام خطوط جوجل في مشروعك.
الخطوة 5: التحقق من اتصال الخطوط
للتأكد من أن الخطوط متصلة بنجاح على موقع الويب الخاص بك ، تحتاج إلى إجراء بعض الفحوصات.
1. تحقق من رمز اتصال الخط
تأكد من أنك قمت بنسخ ولصق رمز اتصال الخط بشكل صحيح في ملف نمط كس الخاص بك. تحقق من أن الرابط إلى ملف الخط يبدأ بـ"
https://fonts.googleapis.com/css 2. تحقق من نشاط الشبكة للموقع
افتح موقع الويب الخاص بك في متصفح ، ثم افتح أدوات المطور (غالبا ما توجد في قائمة الأدوات أو اضغط على الفورمولا 12). انتقل إلى علامة التبويب" الشبكة " وقم بتحديث الصفحة. إذا كانت علامة التبويب" الشبكة " فارغة أو طلب "fonts.googleapis.com" ، قد يعني هذا أن الخطوط غير متصلة بشكل صحيح.
إذا كان هناك طلب إلى "fonts.googleapis.com" وحالة الطلب هي" 200 موافق " ، مما يعني أنه تم توصيل الخطوط وتنزيلها بنجاح.
ملاحظة: إذا كانت حالة الطلب هي" نقل 301 بشكل دائم "أو" نقل 302 مؤقتا " ، فقد يشير ذلك إلى وجود مشكلة في توصيل الخطوط. في هذه الحالة ، تحقق من رمز الاتصال الخاص بك أو اتصل بدعم خطوط جوجل.
3. تحقق من مظهر الخطوط
تصفح موقع الويب الخاص بك وتحقق من عرض الخطوط كما تتوقع. تأكد من أن العناوين والنصوص والعناصر الأخرى في الصفحة تستخدم الخطوط التي حددتها.
إذا لم يتم عرض الخطوط أو لم يتم عرضها بشكل صحيح ، فتأكد من تحديد عائلة الخطوط بشكل صحيح واستخدم قواعد كس الصحيحة لتطبيقها.
باتباع هذه الخطوات ، ستتمكن من توصيل خطوط جوجل بنجاح بموقعك على الويب والتحقق من عرضها الصحيح.
الخطوة 6: تثبيت أنماط خطوط إضافية
بمجرد توصيل الخطوط التي تحتاجها باستخدام خطوط جوجل ، يمكنك تخصيص أنماط خطوط إضافية لموقع الويب الخاص بك.
للقيام بذلك ، سوف تحتاج رمز كس التي سوف تضيف إلى ملف نمط موقع الويب الخاص بك. استخدم محددات كس لتطبيق الأنماط على عناصر مختلفة على موقعك.
على سبيل المثال ، لتطبيق خط روبوتو على رأس الصفحة ، أضف التعليمات البرمجية التالية إلى ملف كس الخاص بك:
لتطبيق أنماط خطوط أخرى مثل حجم الخط ، الخط الغامق ، الخط المائل ، إلخ.، يمكنك استخدام خصائص كس مثل
حجم الخط
,
الخط الوزن
,
نمط الخط
وغيرها.
بالإضافة إلى ذلك ، يمكنك أيضا تطبيق أنماط الخطوط على عناصر أخرى على موقع الويب الخاص بك ، مثل العناوين والفقرات والروابط وما إلى ذلك. مجرد استخدام محددات كس المناسبة وإضافة الأنماط المطلوبة.
للتأكد من أن أنماط الخطوط تعمل بشكل صحيح على موقع الويب الخاص بك ، فمن المستحسن التحقق منها في مختلف المتصفحات والأجهزة للتأكد من أنها تبدو صحيحة وقابلة للقراءة.
لا تنس حفظ ملفات نمط موقع الويب الخاص بك وتحديثها عند إجراء تغييرات حتى تصبح التغييرات سارية المفعول.
الخطوة 7: تحسين تحميل الخط
عند توصيل خطوط جوجل إلى موقع الويب الخاص بك ، من المهم أن تأخذ في الاعتبار تحسين تحميلها. لتحسين الأداء وتسريع تحميل الصفحة ، اتبع هذه التوصيات:
1. حدد فقط الخطوط التي تحتاجها حقا. لا تقم بتنزيل جميع الخطوط المتاحة من خطوط جوجل ، حيث سيؤدي ذلك إلى إبطاء تحميل الصفحة.
2. استخدم تجميع الخطوط. إذا كنت بحاجة إلى تنزيل خطوط متعددة ، فقم بدمجها في مجموعة واحدة وقم بتحميلها كملف واحد لتقليل عدد الطلبات إلى الخادم.
3. استخدم سمات" عرض الخط "و" عائلة الخط " للتحكم في عرض الخطوط. على سبيل المثال ، يمكنك تعيين سمة "عرض الخط" على "المبادلة" لإظهار خط بديل أولا حتى يتم تحميل الخط الرئيسي.
4. تكوين التخزين المؤقت للخط. قم بتعيين رؤوس ذاكرة التخزين المؤقت للخط الصحيحة بحيث يمكن للمتصفح حفظها محليا وعدم تنزيلها مرة أخرى في كل مرة تصل فيها إلى موقع الويب.
5. استخدم ضغط الخط. ضغط الخطوط باستخدام أساليب مثل غزيب يمكن أن تقلل إلى حد كبير حجمها وتسريع التحميل.
باتباع هذه الإرشادات ، ستتمكن من تحسين تحميل الخطوط وتحسين أداء موقع الويب الخاص بك.
الخطوة 8: استخدام الخطوط في كس
عندما يكون لديك بالفعل خطوط متصلة من خطوط جوجل ، كل ما تبقى هو استخدامها في رمز كس الخاص بك. للقيام بذلك ، سوف تحتاج إلى خاصيتين: عائلة الخط ووزن الخط.
يتم استخدام خاصية عائلة الخط لتحديد الخط المستخدم. تحتاج إلى تحديد اسم الخط الذي تلقيته بعد توصيله. على سبيل المثال ، إذا قمت بتمكين خط "روبوتو" ، فسيبدو الرمز الخاص بك كما يلي: