الانتقال إلى المحتوى الرئيسي

كيفية توصيل خطوط جوجل إلى هتمل

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

الخطوة 1: أولا وقبل كل شيء ، افتح صفحة خطوط جوجل (الشبكي://fonts.google.com /) وحدد الخطوط اللازمة. يرجى ملاحظة أن جوجل الخطوط يقدم عددا كبيرا من الخطوط من أنماط مختلفة والمزاجية ، حتى تتمكن من اختيار الخيار الأمثل لمشروعك.

الخطوة 2: بعد تحديد الخطوط التي تحتاجها ، انتقل إلى قسم "الاتصال". قم بالتمرير لأسفل وسترى الكود الذي يجب إضافته إلى صفحة هتمل الخاصة بك. يتكون هذا الرمز من ارتباط إلى ملف كس مع الخطوط المحددة.

مثال:

الخطوة 3: انسخ هذا الرمز والصقه بين العلامات وصفحة هتمل الخاصة بك. ثم ، في المكان الذي تريد استخدام الخط المحدد ، إضافة قواعد كس اللازمة.

الآن يمكنك استخدام الخط عن طريق تحديد اسمه في قواعد كس للعناصر المقابلة على صفحة الويب الخاصة بك.

  1. جوجل الخطوط: الاتصال عبر أتش تي أم أل
  2. الخطوة 1: اختيار خط مناسب والبحث عنه
  3. الخطوة 2: توصيل خط بمستند هتمل
  4. الخطوة 3: تطبيق الخطوط على النص

جوجل الخطوط: اتصال عبر أتش تي أم أل

1. انتقل إلى موقع جوجل الخطوط الرسمي على الرابط https://fonts.google.com / وحدد الخط المطلوب. يمكنك استخدام المرشحات للبحث عن الخطوط بمعلمات مختلفة.

2. ابحث عن الخط المحدد وانقر على الزر "تحديد هذا الخط". يمكنك إضافة خطوط متعددة لاستخدامها في مشروعك.

3. بعد تحديد الخطوط ، انقر فوق رمز "العائلة المحددة" في الزاوية اليمنى السفلية من الشاشة. ثم ستظهر نافذة جديدة مع رمز كس لتوصيل الخطوط المحددة.

4. انسخ رمز كس من النافذة والصقه في قسم مستند هتمل. يتم ذلك عادة داخل علامة أو .

5. لاستخدام الخط المحدد في مشروعك ، قم بتطبيقه على العنصر أو المحدد المطلوب. للقيام بذلك ، استخدم الخاصية كس "الخط الأسرة" ، وتحديد اسم الخط الذي تراه في رمز كس نسخها من موقع الخطوط جوجل.

على سبيل المثال:

ص {

الخط الأسرة: 'روبوتو' ، بلا الرقيق;

}

بعد الانتهاء من كل هذه الخطوات ، سيتم تطبيق الخط المحدد على العناصر المحددة على موقع الويب الخاص بك أو تطبيق الويب الخاص بك. الآن يمكنك إنشاء تصميم فريد وجذاب لعناصر النص الخاص بك باستخدام مجموعة واسعة من الخطوط جوجل!

وهكذا ، وربط الخطوط جوجل عبر أتش تي أم أل بسيطة وفعالة بما فيه الكفاية لخلق نظرة أنيقة وعصرية لمشروع الويب الخاص بك.

الخطوة 1: اختيار خط مناسب والبحث عنه

للبدء ، افتح موقع خطوط جوجل على https://fonts.google.com . ستجد هنا مجموعة ضخمة من الخطوط المختلفة التي يمكنك استخدامها في مشاريعك.

يمكنك تصفية الخطوط حسب معايير مختلفة مثل الشعبية والفئة وسمك الخط والمزيد. استخدم البحث أو تصفح الفئات المختلفة للعثور على خط يناسب احتياجاتك ويتطابق مع تصميم موقع الويب الخاص بك.

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

الخطوة 2: توصيل خط بمستند هتمل

لتوصيل خطوط جوجل بمستند هتمل الخاص بك ، تحتاج إلى إضافة رمز خاص إلى القسم

المستند الخاص بك.

1. انتقل إلى موقع خطوط جوجل وحدد الخط الذي تريده.

2. بعد تحديد الخط ، انقر فوق الزر" تحديد الأنماط " بجواره.

4. سيظهر قسم" التضمين " أسفل الخطوط. انسخ الرمز من هذا القسم.

5. ارجع إلى مستند هتمل والصق الكود المنسوخ في القسم

  • .
  • لجميع رؤوس ح1:

لجميع الفقرات ع:

ف {الخط الأسرة: 'اسم الخط' ، بلا الرقيق؛}

7. احفظ التغييرات على مستند هتمل وافتحه في متصفح. الآن يجب أن ترى أن النص الخاص بك يتم عرضه في الخط الذي حددته باستخدام خطوط جوجل.

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

الجسم

الجسم {

الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق;

}

اسم