دليل Google Font API
نشرت: 2021-08-03يبتهج مصممو الويب لأن الويب أصبح أكثر إرضاءً من الناحية الجمالية بسبب التطورات الحديثة في تقنية الخطوط.
كل هذا بفضل شيء يسمى خطوط الويب ، وهي عبارة عن مجموعة من الأدوات التي يمكن استخدامها لتضمين الخطوط في صفحات الويب. إنها أداة مهمة للمطورين ، لأنها تتيح لهم إنشاء مواقع ويب فريدة وجذابة. لم نعد مضطرين لاستخدام آرييل أو تايمز نيو رومان لكل مشروع ويب!
يمنحك الدليل التالي نظرة متعمقة حول كيفية استخدام Google Font API كطريقة لتطبيق خطوط الويب. المورد مجاني وسهل لأي شخص لديه اتصال بالإنترنت ، لذلك يجدر الاستفادة من هذه الأداة الرائعة!
دليل Google Font API
Google Font API عبارة عن مجموعة من الأدوات التي يمكن استخدامها لتضمين الخطوط في صفحات الويب. إنها أداة مهمة للمطورين ، حيث تتيح لهم إنشاء مواقع ويب فريدة وجذابة. تعد Google Fonts طريقة سريعة وسهلة لإضافة الخطوط إلى موقعك دون الحاجة إلى القيام بأي برمجة معقدة. ما عليك سوى إدخال سلسلة نصية واختيار الخط الذي تريد استخدامه ، ثم - فويلا! يتم تحديث موقع الويب الخاص بك على الفور بطباعة جميلة.
مزايا استخدام Google Font API
إذا كنت ترغب في استخدام Google Font API ، فإنه يحتوي على عدد من الميزات المفيدة للغاية.
استمر في استخدام نص HTML
تعد طباعة الويب مسعى جادًا ، وقد أصبح من الصعب تحقيق التوازن المثالي بين الجماليات وتحسين محرك البحث. لحسن الحظ ، @ font-face يمكن أن يساعد! على عكس استخدام الصور أو استبدال صورة خلفية CSS كحلول لطباعة الويب الأكثر جمالًا ، فقد أثبت باحثو Google أن هذه الطريقة مناسبة لتحسين محركات البحث.
الوصول إلى الويب
على عكس صور CSS ، يمكن قراءة نص HTML بواسطة برامج قراءة الشاشة ، لذلك لن يؤثر على الأشخاص الذين يستخدمونها.
سريع وسهل
كل ما عليك فعله هو الرجوع إلى الخط الخاص بالمحتوى الخاص بك ، ثم إضافة بعض إعدادات CSS لكيفية ظهوره على الشاشة. بمجرد الإعداد ، من السهل تغيير هذه الرموز أيضًا! تتعامل Google Font API مع المراوغات في متصفحات الويب ، وتعالج أنواعًا متعددة من الملفات ، وتجعل فهم @ font-face أمرًا سهلاً.
مجاني للاستخدام
خطوط Google مجانية الاستخدام وقد تم نسخها احتياطيًا بواسطة Google. هذا يعني أنه يمكنك تصميم موقع الويب الخاص بك بثقة دون التعرض لخطر الوقوع في مشكلة لاستخدام خط لا يجب عليك.
هذا جيد لأنه سيبقي التكلفة الإجمالية لموقع الويب الخاص بك منخفضة. إذا كنت مهتمًا بمعرفة التكلفة التي قد يكلفها موقع ويب نموذجي ، فراجع مقال المدونة الخاص بنا كم سيكلف موقع الويب الخاص بي لمعرفة نوع الميزانية التي ستحتاج إلى تخصيصها للحصول على موقع الويب المثالي الخاص بك!
سريع وموثوق
عندما يقوم متصفحك بتحميل صفحة ويب ، فسيقوم بفحص ذاكرة التخزين المؤقت للمستخدم لمعرفة ما إذا كان لديهم أي خطوط مستخدمة في مواقع أخرى. إذا كان الأمر كذلك ، فهذا يؤدي إلى تسريع أوقات تحميل الصفحات لأن الخط سيكون متاحًا بالفعل في ذاكرة التخزين المؤقت على الويب ولن يحتاج إلى التحميل من الخادم مرة أخرى.
خيار ضخم
مع وجود أكثر من 850 خطًا مختلفًا في متناول يدك ، ستتمكن من العثور على الخط المثالي لمشروعك الأخير. يمكنك استخدام دليل خطوط Google لجعل البحث سريعًا وخاليًا من المتاعب.
يمكن أن يكون استخدام واجهة برمجة تطبيقات Google Fonts مؤشرًا كبيرًا على إنشاء موقع ويب مدروس! علاوة على ذلك ، لدينا قائمة بـ 10 خصائص أخرى لتصميم الويب الراقي التي قد ترغب في محاكاتها على موقع الويب الخاص بك
كيفية استخدام Google Font API؟
لاستخدام خطوط Google في مستند HTML الخاص بك ، تحتاج أولاً إلى الرجوع إلى ورقة أنماط CSS عن طريق إضافتها داخل علامات <head>. تأكد من تضمين هذا المرجع في كل صفحة تريد أن يظهر الخط عليها. باستخدام WordPress ، يمكنك القيام بذلك عن طريق إضافة المرجع إلى قالب القالب.
<title>Home Page</title> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName"> </head>حان الوقت الآن لاستخدام CSS لتحديد الطريقة التي تريد بها استخدام الخط الجديد. يمكنك استخدام الكود التالي إذا كنت تريد أن يكون لكل H1 خط Google:
h1 { font-family: 'FontName', serif; font-size: 12px; }هل لاحظت أنني قمت أيضًا بتضمين خط serif؟ لقد فعلت هذا لأنه من المستحسن أن يكون لديك خط احتياطي. في الأساس ، هذا يعني أن المتصفح سيستخدم الخط serif تلقائيًا إذا كانت هناك أي مشكلة في خط Google.
أدوات خطوط Google
أنشأت منصة الخطوط في Google العديد من الأدوات لتسهيل الأمر عليك. يمكنك استخدام Font Directory و Previewer و Web Font Loader التي يتم التحكم فيها جميعًا بواسطة Google API. سنقدم أدناه نظرة عامة على كل أداة بالتفصيل حتى يتمكن أي شخص لديه شغف بالخطوط من البدء!
دليل خطوط Google
مع وجود العديد من الخطوط للاختيار من بينها ، قد يكون من الصعب العثور على الخط المثالي لمشروعك. لحسن الحظ ، قامت Google بتجميع قائمة بجميع خطوطها في دليل يسهل الوصول إليه حيث يمكنك البدء في اختيار الخط المناسب لك! عند النقر فوق علامة التبويب "الحصول على رمز" ، ستظهر لك قائمة من الرموز التي يمكن نسخها ولصقها لتشغيل هذا الخط.
Google Font Previewer
باستخدام Google Font Previewer ، يمكنك رؤية كيف يبدو كل خط وتعديله حسب رغبتك. لديك مجموعة متنوعة من الخيارات مع الحجم والنمط (البديل) والتباعد!
محمل خط الويب
يمكن لمطوري الويب الآن التحكم بشكل أكبر في خطوط Google الخاصة بهم بمساعدة مكتبة JavaScript. يمكن للمطور ربط مستمع الحدث لأي مرحلة في تسلسل تحميل الخط وإضافة وظائف بناءً على ما يحدث في كل مرحلة.
من يقوم بإنشاء الخطوط؟
Google Fonts هو مشروع مفتوح المصدر يمنح الأشخاص القدرة على استخدام هذه الخطوط مجانًا. يرجع الفضل في تنوع أنواع الخطوط المتاحة اليوم إلى مجتمع التصميم العالمي لمصممي الأنواع والمسابك.
ماذا يوجد بداخلها لجوجل؟
تحب Google البيانات! يمكن العثور على روابط API لخطوط Google في العديد من مواقع الويب ويمثل كل منها فرصة لـ Google لاستخراج المزيد من البيانات. ولكن يمكننا أن نكون شاكرين لأن عملهم قد حل مشكلة أخرى لمستخدمي الإنترنت.
استنتاج
في الختام ، تعد Google Font API أداة قوية للمطورين والمصممين الذين يمكنهم المساعدة في إنشاء مواقع ويب فريدة وجذابة. كما أنه سهل الاستخدام - لذا إذا كنت تبحث عن إضافة بعض التنوع إلى تصميم موقع الويب الخاص بك أو تجربة الخطوط في مشروعك الأخير ، فنحن نوصي بشدة بتجربته!