يوفر تطوير الويب اليوم العديد من الفرص لتخصيص مظهر مواقع الويب. أحد هذه الاحتمالات هو استخدام الخطوط المختلفة التي يمكن العثور عليها في خطوط جوجل. في هذه المقالة ، سوف ننظر في كيفية استخدام خطوط جوجل الخطوط في كس والتعرف على تعليمات خطوة بخطوة.
توفر جوجل الخطوط مجموعة واسعة من الخطوط لمشاريع مختلفة. يتم دمجها بسهولة في كس مع اتصال بسيط. تشمل مزايا استخدام خطوط جوجل المرونة في تخصيص نوع الخط ، وتحسين مواقع الويب ، والقدرة على العمل بلغات مختلفة.
للبدء ، نحتاج إلى تحديد الخط المناسب من مكتبة خطوط جوجل. انتقل إلى موقع جوجل الخطوط (https://fonts.google.com /) وتصفح الخطوط المتاحة. حدد الشخص الذي يعجبك وانقر على الزر" تحديد هذا الخط".
بعد تحديد الخط ، نحن بحاجة للحصول على رمز لتوصيل الخط إلى كس. في الصفحة التي تحتوي على الخط المحدد ، ابحث عن كتلة "تضمين الخط" وانسخ الكود المقترح. يجب إدراج هذا الرمز في ملف كس لمشروعك بين العلامات أو داخل العلامة.
- الخطوة 1: حدد خطا من مكتبة خطوط جوجل
- كيفية العثور على الخط المناسب لمشروعك
- الخطوة 2: احصل على رمز اتصال الخط
- كيفية الحصول على رابط إلى خط لاستخدامه في كس
- الخطوة 3: أضف رابطا إلى الخط في قسم مستند هتمل
- كيفية توصيل خط بمشروعك
- الخطوة 4: حدد الخطوط المطلوبة في كس الخاص بك
- كيفية استخدام الخطوط المحددة في أنماط موقعك
- الخطوة 5: تحقق من دعم الخط على أجهزة مختلفة
- سؤال وجواب
- ما هو جوجل الخطوط?
- كيفية استخدام الخطوط جوجل الخطوط في المغلق?
- كيف يمكنني اختيار الخط الصحيح في جوجل الخطوط?
- هل يمكنني استخدام الخطوط جوجل على موقع الويب الخاص بي?
- كيف يمكنني تغيير حجم الخط من جوجل الخطوط إلى المغلق?
- هل يمكنني إضافة النص الخاص بي إلى خطوط جوجل?
الخطوة 1: حدد خطا من مكتبة خطوط جوجل
جوجل الخطوط هي مكتبة الخطوط المجانية التي تقدمها جوجل. يحتوي على مجموعة كبيرة من الخطوط المختلفة ، من بينها يمكنك العثور على شيء يناسب احتياجاتك تماما.
للبدء ، انتقل إلى موقع جوجل الخطوط الرسمي في https://fonts.google.com .
في الصفحة الرئيسية سترى مجموعة متنوعة من الخطوط والأدوات المتاحة للبحث عنها وتصفيتها. يمكنك استخدام البحث أو تصفح الخطوط حسب الفئة.
بالإضافة إلى اختيار الخط ، ستجد في صفحة كل خط معلومات عنه ، بما في ذلك اسمه ومصممه ووصفه. يمكنك أيضا عرض أمثلة للنص المكتوب بالخط المحدد لترى كيف سيبدو في بيئة حقيقية.
بعد تحديد الخط المناسب ، انقر فوق الزر" تحديد هذا الخط " الموجود في الزاوية العلوية اليمنى من بطاقة الخط. يوجد أسفل الزر أيضا خيارات لتكوين عرض نموذج النص واختيار الوزن ونوع الخط.
بعد تحديد الخط وتكوين معلماته ، ستكون الأداة متاحة لتضمين الخط على موقع الويب الخاص بك. في هذه القطعة ، وسوف تجد مختلف الخيارات رمز المغلق التي يمكنك استخدامها لربط الخط المحدد إلى موقع الويب الخاص بك.
الآن بعد أن قمت بتحديد خط ، يمكنك المتابعة إلى الخطوة التالية — توصيله بملف كس أو صفحة هتمل.
كيفية العثور على الخط المناسب لمشروعك
يمكن أن يؤدي استخدام الخط الصحيح في مشروعك إلى تحسين تأثيره البصري وسهولة قراءته بشكل كبير. فيما يلي بعض النصائح لمساعدتك في العثور على الخط المناسب لمشروعك واختياره:
- تحديد أهداف ومزاج المشروع. قبل اختيار الخط ، تحتاج إلى فهم المشاعر والجمعيات التي تريد استحضارها في المستخدم. اضبط المزاج العام لمشروعك-رسمي ، مرح ، جاد ، إلخ
- . تحديد نوع المحتوى والغرض منه. تتطلب أنواع المحتوى المختلفة خطوطا مختلفة. على سبيل المثال ، قد تتطلب العناوين والعناوين الفرعية والنص الأساسي خطوطا مختلفة لسهولة القراءة بشكل أفضل وفصلها بصريا.
- تأخذ في الاعتبار خصائص الخط. من المهم أن تأخذ في الاعتبار ميزات الخط مثل الطول والوزن والعرض والميل. يمكن لكل خط إنشاء تأثير بصري معين ، ويجب أن تكون منتبها لهذه التفاصيل.
- حدد الخطوط المقترنة. الخطوط المقترنة هي مزيج من خطين أو أكثر يتطابقان جيدا مع بعضهما البعض. تحقق مما إذا كانت الخطوط التي اخترتها متوافقة وما إذا كانت تضيف الانسجام والتنوع إلى مشروعك.
- استكشاف مكتبة الخطوط جوجل. تقدم جوجل الخطوط مجموعة كبيرة من الخطوط المجانية التي يمكن إضافتها بسهولة إلى موقع الويب الخاص بك. استخدم الأدوات للتصفية حسب المعلمات مثل الحالة المزاجية والفئة والشعبية للعثور على الخط المثالي لمشروعك.
- اختبر الخط قبل استخدامه. قبل اختيار الخط أخيرا ، تأكد من أنه يبدو جيدا على شاشة الأجهزة المختلفة وبأحجام مختلفة. اختبر الخط على كتل نصية مختلفة واستخدم الحالات للتأكد من أنه مناسب لمشروعك.
تذكر أن الخط الصحيح يجب ألا يكون ممتعا من الناحية الجمالية فحسب ، بل يجب أن يكون عمليا أيضا. يجب أن تكون قابلة للقراءة ، تعرض جيدا على أجهزة مختلفة وتتحد مع عناصر التصميم الأخرى لمشروعك.
الخطوة 2: احصل على رمز اتصال الخط
قبل البدء في استخدام خطوط جوجل ، تحتاج إلى الحصول على رمز اتصال الخط. سوف تحتاج إلى لصق هذا الرمز في ملف كس الخاص بك لتوصيل الخط المحدد.
للحصول على رمز اتصال الخط ، انتقل إلى موقع جوجل الخطوط الرسمي في https://fonts.google.com / وحدد الخط الذي تهتم به. بعد تحديده ، سترى صفحة تحتوي على معلومات حول الخط المحدد.
في صفحة الخط ، ابحث عن الزر" تحديد هذا النمط " وانقر عليه. ثم حدد الخطوط التي تحتاجها (غامق ، مائل ، إلخ.). بعد تحديد الأنماط ، انقر فوق الزر" تحديد العائلة".
يوجد رمز اتصال الخط في صفحة العائلة المحددة. يحتوي هذا الرمز على ارتباط إلى ملف الخط وخصائص كس لتوصيل الخطوط. لنسخ الرمز ، انقر على زر" @استيراد "بجوار النص"إضافة هذا الرمز إلى ملف كس الخاص بك". يمكنك أيضا نسخ التعليمات البرمجية مع الخط دون خصائص كس ، إذا كنت بحاجة فقط لتوصيل الخط دون تغيير الخطوط العريضة لها.
بعد نسخ رمز اتصال الخط ، الصقه في ملف كس الخاص بك. وعادة ما يتم ذلك في بداية ملف كس قبل رمز النمط الرئيسي. الآن يمكنك استخدام الخط المحدد في الأنماط الخاصة بك باستخدام الخاصية المغلق الخط الأسرة.
كيفية الحصول على رابط إلى خط لاستخدامه في كس
لاستخدام خطوط جوجل في كس ، سوف تحتاج إلى الحصول على رابط لهذا الخط. يمكن القيام بذلك على النحو التالي:
- افتح مستعرض ويب وانتقل إلى موقع خطوط جوجل.
- في شريط البحث ، أدخل اسم الخط الذي تريد استخدامه ، أو قم بالتمرير خلال قائمة الخطوط المتاحة.
- ابحث عن الخط الذي تريده وانقر عليه.
- في صفحة الخط ، سترى أشكالا مختلفة من هذا الخط ، بما في ذلك الخطوط المختلفة والإعدادات الإضافية.
- حدد خيارات الخط المطلوبة ، على سبيل المثال ، نوع الخط والخط الغامق.
- بعد تحديد الخيارات المطلوبة ، قم بالتمرير لأسفل الصفحة وابحث عن قسم "تضمين الخط".
- في هذا القسم سترى رمز كس التي تحتاج إلى نسخ.
- انسخ هذا الرمز والصقه في ملف كس الخاص بك.
بعد تلقي رابط الخط وإدراجه في ملف كس الخاص بك ، يمكنك استخدام هذا الخط في التصميم الخاص بك عن طريق تطبيقه على العناصر مع محدد عائلة الخط.
الخطوة 3: أضف رابطا إلى الخط في قسم مستند هتمل
لاستخدام خط من خطوط جوجل على موقع الويب الخاص بك ، تحتاج إلى إضافة رابط إلى الخط المحدد في قسم الرأس في مستند هتمل الخاص بك. سيسمح هذا للمتصفح بتنزيل الخط من خادم جوجل.
سوف تحتاج إلى نسخ ولصق رابط الخط التي تقدمها جوجل الخطوط في فتح وإغلاق علامات الرأس. هنا مثال:
| هتمل5 وثيقة نوع الإعلان |
| فتح العلامة للمستند بأكمله |
| بداية قسم الرأس |
| رابط لخطوط جوجل |
| نهاية الخط من قسم الرأس |
| بداية قسم الجسم |
... | محتوى موقع الويب الخاص بك |
| نهاية قسم الجسم |
| علامة الإغلاق للمستند بأكمله |
ستحتاج إلى استبدال الخط + الاسم باسم الخط الذي حددته بمسافات تم استبدالها بالإيجابيات. على سبيل المثال ، إذا كنت تريد استخدام خط روبوتو ، فسيبدو الرابط كما يلي:
بعد إضافة رابط الخط إلى قسم الرأس في مستند هتمل ، تكون جاهزا لاستخدام الخط المحدد على موقع الويب الخاص بك باستخدام كس. سيتم شرح ذلك في الخطوات التالية.
كيفية توصيل خط بمشروعك
يتيح لك توصيل الخطوط بمشروعك إنشاء نمط مرئي فريد وتحسين إمكانية قراءة النص. واحدة من الطرق الأكثر شعبية ومريحة لربط الخطوط إلى المشروع الخاص بك هو استخدام الخطوط من الخطوط جوجل.
- انتقل إلى موقع خطوط جوجل وحدد الخط الذي تريده.
- في صفحة الخط المحدد ، انقر فوق الزر" تحديد هذا النمط".
- في النافذة التي تظهر ، انسخ رمز اتصال الخط. هذا هو عادة ملف كس مع وصلة إلى الخط.
- الصق الكود المنسوخ في قسم مستند هتمل.
مثال على رمز اتصال الخط:
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
الخطوة 4: حدد الخطوط المطلوبة في كس الخاص بك
بعد توصيل خطوط جوجل الخطوط إلى المشروع الخاص بك ، يمكنك تعيين الخطوط المطلوبة في ملف كس الخاص بك.
أولا ، حدد المحدد الذي تريد تطبيق الخط عليه. على سبيل المثال ، إذا كنت تريد تغيير الخط لجميع عناوين موقعك ، فاستخدم المحدد
ح1 ، ح2 ، ح3 ، ح4 ، ح5 ، ح6
الخط الأسرة
لتعيين الخط. لاستخدام خط من خطوط جوجل ، حدد اسمه كقيمة الخاصية
الخط الأسرة
. على سبيل المثال:
ح1 ، ح2 ، ح3 ، ح4 ، ح5 ، ح6 {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
يمكنك أيضا استخدام خطوط متعددة عن طريق تعيينها بترتيب التفضيل. سيحاول المتصفح تحميل الخطوط بالترتيب واستخدام أول خط متاح. على سبيل المثال:
ح1 ، ح2 ، ح3 ، ح4 ، ح5 ، ح6 {
الخط الأسرة: 'روبوتو' ، 'أريال' ، بلا الرقيق;
}
في هذا المثال ، حددنا خط روبوتو كخيار أول ، ثم أريال ، وأخيرا الخط الافتراضي بدون اسم محدد مسبقا.
لا تنس تطبيق الخصائص
الخط الوزن
و
نمط الخط
، إذا كنت ترغب في تغيير تشبع (سمنة) الخط و/أو النمط (الميل).
فيما يلي أمثلة على الاستخدام:
ح1 ، ح2 ، ح3 ، ح4 ، ح5 ، ح6 {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
وزن الخط: 700;
}
م {
نمط الخط: مائل;
- }
- في هذا المثال ، قمنا بتعيين خط بتشبع 400 (عادي) ونمط غير مائل للعناوين ، وتشبع 700 (غامق) للعناصر
- عناصر إم
.
الآن أنت تعرف كيفية استخدام الخطوط جوجل الخطوط في المغلق الخاص بك. استمر في تجربة الخطوط وتخصيصها لجعل صفحة الويب الخاصة بك فريدة وجذابة!
كيفية استخدام الخطوط المحددة في أنماط موقعك
بعد تحديد الخطوط التي تحتاجها من خطوط جوجل ، تحتاج إلى إضافة الرمز إلى ملف نمط موقعك. هنا تعليمات خطوة بخطوة:
انسخ الكود الذي توفره خطوط جوجل والصقه في الجزء العلوي من ملف النمط. يتم ذلك عادة في قسم.
ابحث عن المحدد الذي تريد تطبيق الخط المحدد عليه. يمكن أن يكون هذا محددا للفقرات (
- ) ، العناوين (,
- ، إلخ.) ، قوائم التنقل () أو عناصر أخرى من موقعك.
- أضف خاصية عائلة الخط إلى المحدد المحدد وحدد اسم الخط الذي توفره خطوط جوجل. على سبيل المثال ، إذا قمت بتحديد الخط "راليواي" ، الممتلكات الخاصة بك تبدو مثل هذا: الخط الأسرة: "راليواي" ، بلا الرقيق;
- في ما يلي نموذج رمز يوضح تطبيق الخط المحدد على فقرة:
- بعد إضافة رمز الخطوط المحددة إلى ملف النمط ، احفظ التغييرات وقم بتحديث موقعك. يجب أن ترى أن الخط المحدد يتم تطبيقه على العناصر المقابلة على موقعك.
بهذه الطريقة ، يمكنك بسهولة استخدام الخطوط المحددة من خطوط جوجل لإعطاء موقعك نظرة فريدة وجذابة من الناحية الجمالية.
الخطوة 5: تحقق من دعم الخط على أجهزة مختلفة
بعد إضافة خطوط جوجل المحددة إلى ملف كس الخاص بك وتكوين استخدامها على موقع الويب الخاص بك ، من المهم التحقق من كيفية عرضها على أجهزة مختلفة. بعد كل شيء ، يمكن للزائرين الوصول إلى الموقع من أجهزة مختلفة: أجهزة الكمبيوتر والأجهزة اللوحية والهواتف المحمولة وغيرها.
باتباع هذه الإرشادات ، يمكنك معرفة كيفية تشغيل الخط المحدد على أجهزة مختلفة والتأكد من أنه يبدو بالطريقة التي تقصدها:
قم بزيارة موقع الويب الخاص بك باستخدام أجهزة مختلفة وتحقق مما إذا كان يتم عرض الخطوط المحددة بشكل صحيح. تحقق مما إذا كان الحجم ونمط الخط والأنماط الأخرى المحددة للخط في ملف كس تتطابق مع توقعاتك.
يرجى ملاحظة أنه قد يتم تنشيط قابلية توسيع النص على الأجهزة المحمولة ، وقد يؤثر ذلك على عرض الخط. تأكد من أن الخط الذي اخترته يظل قابلا للقراءة وجميلا حتى عند تكبير النص.
تحقق من عرض الخط في متصفحات مختلفة. من الممكن أن يكون للخط المحدد بعض القيود وقد لا يتم عرضه بشكل صحيح في بعض المتصفحات. تحقق من موقع الويب الخاص بك في المتصفحات الشائعة مثل جوجل كروم وموزيلا فايرفوكس وسفاري وما إلى ذلك.
إيلاء اهتمام خاص لفحص الخطوط على أجهزة أبل مثل اي فون وتطلب الشركة. في بعض الحالات ، قد يتم عرض الخطوط بشكل مختلف على أجهزة أبل ، لذلك التحقق من هذه الأجهزة هو جزء مهم من عملية الاختبار.
تحقق من توافر الخطوط على أنظمة التشغيل المختلفة مثل ويندوز ، ماك ، دائرة الرقابة الداخلية ، الروبوت ، الخ. اعتمادا على الجهاز ونظام التشغيل ، قد يتم عرض الخط المحدد بشكل مختلف.
بعد التحقق من دعم وعرض الخطوط على أجهزة مختلفة ، سوف تكون على استعداد لاستخدام الخطوط جوجل الخطوط على موقع الويب الخاص بك مع الثقة.
سؤال وجواب
ما هو جوجل الخطوط?
جوجل الخطوط هي خدمة مجانية تقدمها جوجل التي تسمح للمطورين على شبكة الإنترنت لاستخدام مجموعة متنوعة من الخطوط لمشاريعهم.
كيفية استخدام الخطوط جوجل الخطوط في المغلق?