يعد اختيار الخط المناسب لموقعك على الويب جزءا مهما من عملية إنشاء تصميم جذاب وفعال. واحدة من أكثر الطرق شعبية للوصول إلى مجموعة واسعة من الخطوط هو استخدام جوجل الخطوط. في هذه المقالة ، سوف نوضح لك كيفية دمج خط جوجل بسهولة في كود هتمل الخاص بك.
الخطوة الأولى هي تحديد الخط المناسب من خطوط جوجل. يمكنك اختيار خط من كتالوج ضخم-من الكلاسيكية إلى الحديثة والتجريبية. عندما تجد الخط الذي تريد ، فقط اضغط عليها لفتح صفحة الخط.
في صفحة الخط ، سترى علامات تبويب بخيارات خطوط مختلفة مثل الخط المائل والخط الغامق وغيرها. حدد الخيارات التي تحتاجها ، ثم قم بالتمرير لأسفل وشاهد الرمز الذي تحتاج إلى لصقه في هتمل الخاص بك.
لتوصيل خطوط جوجل إلى هتمل الخاص بك ، تحتاج إلى إضافة رابط إلى أنماط الخطوط في رأس صفحة هتمل الخاصة بك. تحتاج إلى نسخ ولصق هذا الرمز أمام رأسك
بعد إدخال الرمز ، تحقق من توصيل الخط بشكل صحيح عن طريق تحديث صفحة هتمل الخاصة بك. إذا تم كل شيء بشكل صحيح ، يجب أن ترى أن النص الخاص بك معروض الآن بالخط المحدد.
- كيفية استخدام خطوط جوجل في أتش تي أم أل: 2 خطوات لتصميم مثالي
- الخطوة 1: اختيار وربط خط جوجل
- الخطوة 2: تطبيق جوجل الخط إلى النص على موقع الويب الخاص بك
كيفية استخدام الخطوط جوجل في أتش تي أم أل: 2 خطوات لتصميم مثالي
وفيما يلي 2 خطوات بسيطة حول كيفية توصيل جوجل الخط إلى صفحة أتش تي أم أل الخاص بك:
- اختيار الخط على الخطوط جوجل
- إضافة الخط إلى رمز هتمل
الخطوة الأولى ، اختيار الخط ، مهمة لتحديد الخط ونمط النص الذي تريد استخدامه على صفحة الويب الخاصة بك. تقدم خطوط جوجل مجموعة كبيرة من الخطوط المجانية بأنماط وإعدادات مختلفة يمكن أن تكون مناسبة لأي مشروع ويب.
لتحديد الخط ، واذهبوا إلى جوجل الخطوط وتصفح الخيارات المتاحة. يمكنك استخدام المرشحات حسب نمط الخط والوزن والمزاج واللغة للعثور على الخيار المناسب.
الخطوة الثانية ، إضافة خط إلى رمز هتمل ، سوف تسمح لك لتنشيط الخط المحدد على صفحة الويب الخاصة بك. سوف تحتاج إلى نسخ ولصق التعليمات البرمجية التي تقدمها جوجل في "القسم" من وثيقة هتمل الخاص بك.
مثال على الكود:
تحتاج إلى استبدال 'الخط + اسم' مع الاسم الفعلي للخط المحدد. بالإضافة إلى ذلك ، انتبه إلى 'العرض = المبادلة' ، مما يضمن تحميل الخط بشكل صحيح لصفحة الويب.
بعد توصيل الخط ، يمكنك استخدامه في رمز كس الخاص بك عن طريق تعيينه كقيمة الخاصية `الخط الأسرة`.
هذا كل شيء! الآن أنت تعرف كيفية استخدام الخطوط جوجل في أتش تي أم أل في 2 خطوات فقط. هذه طريقة سهلة لإضافة تصميم مثالي إلى صفحة الويب الخاصة بك وجعلها أكثر جاذبية واحترافية.
الخطوة 1: اختيار وربط خط جوجل
تقدم جوجل الخطوط عددا كبيرا من الخطوط المجانية التي يمكن استخدامها على صفحات الويب. للبدء ، تحتاج إلى اختيار الخط المناسب ، مع الأخذ بعين الاعتبار أسلوبه والمزاج.
انتقل إلى الموقع fonts.google.com وتصفح مجموعة الخط. استخدم البحث أو المرشحات للعثور على ما تريد.
عندما تعثر على خط مناسب ، انقر فوقه لفتح صفحة تحتوي على معلومات مفصلة. في هذه الصفحة ، يمكنك رؤية أمثلة للنص بالخط المحدد وضبط إعدادات الخط كما يحلو لك.
لتوصيل الخط المحدد على صفحة الويب الخاصة بك ، تحتاج إلى النقر فوق الزر "تحديد الأنماط". هنا يمكنك تحديد أنماط الخطوط والأوزان التي تريد استخدامها.
بعد تحديد الأنماط المطلوبة ، تحتاج إلى النقر فوق الزر "تضمين العائلة". في الصفحة التالية ، ستتلقى رمزا جاهزا تحتاج إلى إدراجه في ترميز هتمل.
سيبدو هذا الرمز كما يلي:
هنا يجب استبدال "الخط + الاسم" باسم الخط المحدد ، بدون مسافات. على سبيل المثال ، إذا قمت بتحديد الخط "روبوتو" ، سيبدو الرمز كما يلي:
بعد نسخ الكود ، تحتاج إلى لصقه في قسم من مستند هتمل الخاص بك. يتم ذلك عادة فور فتح العلامة.
| هذا كل شيء! الآن سيتم توصيل الخط المحدد بصفحة الويب الخاصة بك وجاهز للاستخدام. | الخطوة 2: تطبيق جوجل الخط إلى النص على موقع الويب الخاص بك |
|---|---|
| بمجرد تحديد خط جوجل وتوصيله بمستند هتمل الخاص بك ، يمكنك البدء في تطبيق هذا الخط على النص الموجود على موقعك. | للقيام بذلك ، سوف تحتاج إلى استخدام كس. يمكنك تطبيق جوجل الخط إلى أي نص على الصفحة الخاصة بك: العناوين والفقرات والقوائم ، أو عناصر أخرى. |
| لتطبيق خط جوجل على عنصر ، حدد اسم الخط في خاصية عائلة الخط. يمكنك العثور على اسم الخط على صفحة الخط في جوجل الخطوط. | مثال رمز المغلق: |
| محدد | مثال |
في هذا المثال ، سيتم تطبيق الخط على
ح1
و