كيفية توجيه استخدام خطوط Google مع Google والمكونات الإضافية!

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

ما هو أسلوب الطباعة؟
يدور أسلوب الطباعة حول تحديد طول الخط وحجم النقطة وتباعد الأسطر والمحارف وضبط المسافات بين مجموعات الحروف.

لماذا يعد Google Fonts اختيارًا واضحًا؟
كانت هناك أوقات كان فيها الإنترنت يحتوي على خطوط قياسية من شأنها أن تحمل أي شخص ينظر إليها ، ولكن مع مرور الوقت ، اضطر مصممو الويب والمطورون إلى تقييد خيارات خطوط النص المباشر وتصميم الخطوط التي تتوافق مع أكبر عدد من المستخدمين. الإنترنت. لقد توصلوا إلى CSS3. بدأ Typekit ذلك.

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

كان السعر 49 دولارًا وفي حالة رغبة المصمم في تطوير موقعين ، فعليه دفع 99 دولارًا فقط لاستخدام الخطوط على صفحة الويب. شكرًا لـ Google التي أتت بتصميمات خطوط رائعة وعرضتها مجانًا.

من الواضح تمامًا أنك لا تحصل على ما يمكنك الحصول عليه بالمال مجانًا ولكن صدق ذلك ، فإن خطوط الويب من Google كانت مع ذلك أكثر من تلك التي تقدمها Typekit. بالطبع ، تكون خطوط الويب من Google هي الأفضل عندما لا ترغب في إنفاق الكثير على الخطوط لأنك تعلم أن إنشاء موقع ويب بالكامل يكلف الكثير.

خطوط جوجل وتخصيصها:
اعتبارًا من اليوم ، هناك أكثر من 647 خطًا منفصلًا عن عائلات الخطوط في مكتبة Google. عندما تحدد خطًا لمحتوى موقع الويب الخاص بك ، فمن الضروري مشاهدته بطريقة مشابهة لكيفية تنفيذ هذا الخط. تبدو بعض الخطوط مثالية لمحتوى الجسم ولكنها مروعة كعنوان.

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

قمع أسفل الخط الصحيح!
نظرًا لأننا ندرك أن هناك أكثر من ستمائة مجموعة خطوط يمكن التدقيق فيها ، فمن الصعب التصفية واختيار المجموعة الصحيحة ببساطة عن طريق التمرير خلالها واحدة تلو الأخرى. لذلك ، استخدم الخطوات التالية للتركيز على ما تحتاجه بالضبط لموقعك على الويب:

• ألق نظرة سريعة على الخطوط التي تم تحديثها مؤخرًا بواسطة Google. من المحتمل أن تحصل على خط شائع وخالي من الأخطاء دون الحاجة إلى النظر إلى بقية الخطوط. راجع أيضًا الخطوط التي يستخدمها معظم المصممين والمطورين. سيسمح لك القيام بذلك بمعرفة الخطوط متعددة الاستخدامات التي يمكنك استخدامها في أنماط وعروض متعددة.
• إذا كنت تعرف محرف موقع الويب الخاص بك ، فيمكن لخصائص الخطوط ونمطها تحسين نتائجك مثل إذا كنت تريد خطًا مكتوبًا بخط اليد ، فقم بتعطيل جميع أنواع النتائج الأخرى.
• تتيح لك Google تحسين البحث عن الخط بشكل أكبر عن طريق إضافة سمك وميل وعرض الحرف كخيارات تصفية. أليست ميزة رائعة أن تحصل على أفضل خط لموقعك على الويب؟

اختيار الخطوط
تمتلك Google طرقًا مختلفة لاختيار الخطوط ثم تنفيذها وفقًا لاحتياجات مالك موقع الويب. لا يوجد شيء صحيح أو خطأ هنا. كل ما هو أفضل بالنسبة لك ، سوف تحصل عليه. يدعم ثلاثة أزرار لمساعدتك في اختيار الخط الصحيح:

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

كيفية استخدام خطوط جوجل؟
بمجرد تحديد الخطوط التي ترغب في استخدامها على صفحة الويب الخاصة بك ، يمكنك النقر فوق علامة التبويب "استخدام" لرؤيتها أثناء العمل. الآن ، عندما تكون متأكدًا من الخط ، كل ما تحتاجه هو نسخ ولصق بعض التعليمات البرمجية على صفحة الويب الخاصة بك. ستحصل على ثلاثة خيارات للاختيار من بينها:

اساسي:
إنه ارتباط قياسي لورقة الأنماط. تحتاج إلى وضعه في الجزء الرئيسي من ملف HTML الخاص بك ، مما يوفر لك خطوة إضافة قاعدة الاستيراد @ لأنك تضيف بشكل كبير في ورقة الأنماط التي تم إلقاؤها فيها بالفعل. مثال:

CSS:
استخدم قاعدة CSSimport في حالة عدم رغبتك في الارتباط بورقة الأنماط المُنشأة تلقائيًا في رأسك. استخدم الكود أدناه لدمج الخطوط في CSS الخاص بك:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

جافا سكريبت
قام كل من Google و Typekit بتطوير هذا الرمز هنا كجزء من أداة تحميل WebFont لمنح المستخدمين مزيدًا من التحكم في تحميل الخط.

احصل على مقتطف HTML وضعه بالقرب من رأس HTML على النحو التالي:

عنوان الصفحة

انتقل إلى CSS واتبع هذا:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

بمساعدة الإضافات!
هناك بعض المكونات الإضافية المتاحة التي تقدم تكاملاً سلسًا مع Google Font. استخدام المكونات الإضافية له حدوده مثل البرنامج المساعد لن يعرف البحث عن نص معين دون تخصيص المزيد بمساعدة HTML أو CSS. ولكن مع ذلك ، إليك بعض المكونات الإضافية لتضمين خطوط Google في موقع الويب الخاص بك.

1. الخطوط البرنامج المساعد

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

2. خطوط جوجل سهلة

باستخدام المكون الإضافي Easy Google Fonts ، لن تحتاج إلى لمس أي ترميز للحصول على الخطوط على موقع الويب الخاص بك. من الاختيار إلى التحسين وإعطاء ألوان فريدة للعيش إلى المعاينة ، يمكن عمل كل شيء باستخدام الخطوط باستخدام Easy Google Fonts.

3. TK Google Fonts

ستضيف TK Google Fonts جميع خطوط ويب Google البالغ عددها 291 إلى لوحة المحرر المرئي عندما تقوم بتطوير صفحات أو منشورات. فقط قم بتثبيته وابدأ في استخدامه.

تثبيت الإضافات أعلاه:

• قم بتسجيل الدخول إلى مدير WordPress
• انقر فوق "الإضافات"
• انقر فوق "إضافة جديد"
• اكتب اسم المكونات الإضافية في الزاوية اليمنى العلوية وانقر على "تثبيت الآن"

لتخصيص الإضافات

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

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

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

كمصمم ، من الجيد دائمًا تحسين البحث عن الخط الخاص بك عن طريق إضافة سمك وميل وعرض الحرف كخيارات تصفية. لا تبدو كل الخطوط جيدة في محتوى النص الأساسي و / أو العنوان.

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

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

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

قمع أسفل الخط الصحيح!

حاليًا ، يبلغ عدد الخطوط في مكتبة Google 647 ، مما يجعل من الصعب تصفية واختيار الخط المناسب. ومع ذلك ، من خلال هذه الخطوات الثلاث ، يمكنك الحصول على ما تحتاجه بالضبط لموقع الويب الخاص بك:

• ألق نظرة على الخطوط التي تم تحديثها مؤخرًا على Google واحصل على خط شائع وخالي من الأخطاء. ابحث أيضًا عن الخطوط التي يستخدمها غالبية المصممين للسماح لك بمعرفة مدى تعدد استخدامات الخطوط التي يمكنك استخدامها في أنماط وعروض متعددة.
• تعرف على محرف موقع الويب الخاص بك ، وخصائص وأسلوب الخطوط لتحسين نتائجك.
• قم بتحسين البحث عن الخط الخاص بك عن طريق إضافة سمك وانحراف وعرض الحرف كخيار تصفية.

اختيار الخطوط

بناءً على احتياجاتك ، لدى Google عدة طرق لمساعدتك في تحديد الخط. لاختيار الخط الصحيح ، ضع في اعتبارك:

وصول سريع - لإلقاء نظرة بسرعة على الخط الذي تريده

Pop Out- لمعرفة المزيد عن الخط ، أي الوظائف والاستخدامات

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

كيفية استخدام خطوط جوجل

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

قياسي - هذا رابط قياسي لورقة الأنماط. ضعه في الجزء الرئيسي من ملف HTML الخاص بك. سيوفر لك خطوة إضافة قاعدةimport لأنك تضيف بشكل ملحوظ ورقة أنماط تحتوي عليها بالفعل.

CSS - استخدم قاعدة CSSimport في حالة عدم رغبتك في الارتباط بورقة الأنماط المُنشأة تلقائيًا في رأسك . استخدم الكود أدناه لدمج الخطوط في CSS الخاص بك:

عائلة الخطوط: "Henry Pigeous" ، serif ؛
عائلة الخطوط: "دبلوماسي". مخطوطة

قام كل من JavaScript -Google و Typekit بتطوير هذا الرمز هنا كجزء من أداة تحميل خط الويب لمنح المستخدمين مزيدًا من التحكم في تحميل الخط .

احصل على مقتطف HTML وضعه بالقرب من رأس HTML على النحو التالي:

عنوان الصفحة

انتقل إلى CSS واتبع هذا:

h1 {

الخط: 400 45 بكسل / 0.5 "دبلوماسي"، Arial، sans-serif ؛

}

ص {

الخط: 400 14 بكسل / 1.5 "Henry Pegasus"، Times، serif؛

}

عن المؤلف:
كاثرين جارسيا مطور ويب ذو خبرة في Hosting Facts ومدون متحمس. تحب مشاركة معرفتها من خلال مقالاتها حول تطوير الويب و WordPress.