في تطوير الويب ، يوفر الاستخدام الصحيح لتصميم الخط مظهرًا جذابًا للتطبيق. توفر أنماط الخطوط هذه أدلة مرئية حول ترتيب قراءة المستند. على سبيل المثال ، يجب أن يكون نمط خط عنوان المستند غامقًا وهامًا من الآخرين. يساعد التصميم أيضًا على تمييز المحتوى المهم عن الآخرين.
نتائج التعلم من هذه المقالة هي:
ما هي Google Web Fonts؟
يعد خط الويب من Google مكتبة مفتوحة المصدر تحتوي على مئات أنماط الخطوط أو العائلات. كما أنه يوفر واجهات برمجة التطبيقات التي تساعدنا على استخدام خطوط الويب مع Android و CSS. تعد Google Fonts أخف بكثير من مكتبات الخطوط الأخرى ومتاحة مجانًا للاستخدام التجاري. هذه أسهل في التنفيذ على أي موقع ويب.
بشكل افتراضي ، تقدم CSS أنماط خطوط خيالية ، و serif ، و Sans serif ، و cursive ، و monospace. يمكن استخدام Google Fonts إذا كنت ترغب في استخدام بعض أنماط الخطوط الأخرى.
كيفية استيراد خطوط جوجل بصيغة HTML؟
لاستخدام خطوط Google على صفحة HTML ، اتبع الخطوات التالية.
الخطوة 1: حدد مجموعة الخطوط
أولاً ، افتح ملف خطوط جوجل الموقع الرسمي وحدد الخط الذي تريده. على سبيل المثال ، اخترنا ' لوبستر تو ' خط العائلة:
الخطوة 2: حدد الأنماط
بعد ذلك ، قم بالتمرير لأسفل لعرض قائمة الأنماط. قم بإضافتها إلى مجموعتك من خلال النقر على زر ' + ' لافتة:
الخطوة 3: عرض العائلات المختارة
لعرض العائلات المختارة ، انقر فوق الرمز المميز أدناه:
الخطوة 4: انسخ الرابط لتضمينه في HTML
بعد ذلك ، قم بالتمرير لأسفل وانسخ رابط عائلة الخطوط باستخدام ' ينسخ ' أيقونة:
كيفية استخدام Google Fonts في ملف CSS؟
لاستخدام نسخة Google Fonts في CSS للتصميم ، انتقل إلى الأمثلة الواردة.
مثال 1
تشتمل علي ' 'لتحديد بعض المحتوى أو الفقرة:
< ص > 'أفضل موقع تعليمي' ص >لاستيراد خطوط Google ، الصق الرمز المنسوخ في ' <ستايل> 'علامة ملف HTML:
@ استيراد URL ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ؛عنصر النمط 'p'
ص {خط العائلة: 'لوبستر تو' مخطوطة
محاذاة النص: مركز ؛
حجم الخط: 45 بكسل ؛
اللون: rgba ( 64 و 3 و 162 و 0.8 ) ؛
}
يتم تطبيق خصائص CSS الموضحة التالية على HTML ' ' بطاقة شعار:
- ' خط العائلة 'بالقيمة' 'Lobster Two' ، مخطوطة '. يتم استيراد عائلة الخطوط هذه من Google Fonts.
- ' محاذاة النص 'يضبط محاذاة النص.
- ' حجم الخط 'يحدد حجم الخط.
- ' اللون 'يحدد لون الخط.
توضح الصورة أنه تم تطبيق عائلة الخطوط بنجاح:
مثال 2
لنأخذ مثالاً آخر لاستيراد ' نيركو وان 'خط Google. لهذا الغرض ، الصق رمز عنوان URL لخط Google 'Nerko One' مرة أخرى في ' <ستايل> ' جزء:
@ استيراد URL ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ؛عنصر النمط 'p'
ص {خط العائلة: 'نيركو وان' مخطوطة
وزن الخط: 300 ؛
حجم الخط: 30 بكسل ؛
}
ال ' خط العائلة '،' وزن الخط '، و ' حجم الخط 'يتم تطبيق خصائص' على HTML ' ' جزء.
انتاج |
لقد علمنا كيفية استيراد خطوط الويب من Google في ملف CSS.
استنتاج
لاستيراد خطوط Google في CSS ، قم أولاً بزيارة ملف خطوط جوجل الموقع الرسمي وحدد نمط الخط. ثم انسخ الرمز الذي يحتوي على ' @يستورد 'الكلمة الرئيسية ولصقها في ملف CSS أو في' <ستايل> 'من ملف HTML. أظهرت هذه الدراسة الإجراء الكامل لاستيراد خطوط Google إلى ملف CSS.