تثبيت وتخصيص خطوط Google لبلوجر
تعد الخطوط ضرورية لتخصيص المدونة بالكامل ، وبفضل خطوط Google لدينا القدرة على استخدام مصادر الويب المجانية. اليوم سوف نتعلم كيفية تثبيت خطوط جوجل ، وتحسينها وتخصيصها.
تم النشر في
وقت القراءة
2 دقيقه للقراءة
تعد الخطوط ضرورية لتخصيص المدونة بالكامل ، وبفضل خطوط Google لدينا القدرة على استخدام مصادر الويب المجانية. اليوم سوف نتعلم كيفية تثبيت خطوط جوجل ، وتحسينها وتخصيصها.
تثبيت مصادر الخطوط
سنقوم بزيارة الصفحة الرئيسية لخطوط Google وإضافة جميع المصادر التي سنحتاج إليها بالضغط على رمز الإضافة: |
| تثبيت وتخصيص خطوط Google لبلوجر |
 |
| تثبيت وتخصيص خطوط Google لبلوجر |
في علامة التبويب "CUSTOMIZE" ، يمكننا تهيئة الخط وسمك الخط ، وفي "EMBED" ، نجد طرق إدراج الخطوط في أي صفحة ، في هذا الجزء نقوم بنسخ كامل الموسم
<link/>
 |
| تثبيت وتخصيص خطوط Google لبلوجر |
سنقوم الآن بإدراج كود المصدر هذا في رأس المدونة. سنلصقه أسفل الوسم
<head>. في حالة بلوجر ، من الضروري إغلاق علامة الارتباط عن طريق إضافة / في النهاية كالمثال التالي:<link href="https://fonts.googleapis.com/css?family=Amiri|Cairo&display=swap" rel="stylesheet">
بهذه الطريقة نتجنب الخطأ في بلوجر وسيٌسمح لنا بحفظ التغييرات. وذلك لأن بلوجر يستخدم XML بشكل صارم ، لذلك من الضروري إغلاق جميع العلامات بالشكل الصحيح والمناسب.
أستخدام مصادر الخطوط
لاستخدام المصادر نلجأ إلى خاصية . في المثال التالي ، قمت بإنشاء فئة تسمي font وقمت بتضمين خاصية Font-Family مع الخط "Cairo":
.font { font-family: 'Cairo', sans-serif; }
الآن سيكون يكفي فقط إضافة font للفئة إلى علامة html ، والتي ستمنحك نمط الخط "Cairo". هنا مثال:
<p class="font">هذا الخط هوا خط Cairo</p> }
يمكنك أيضًا إضافة خاصية
font-family إلى أي قاعدة في css. على سبيل المثال ، مع رمز css التالي ، أوضح للمتصفح أن جسم الصفحة بالكامل ستعمل بالخط Tajawal:body { font-family: 'Tajawal', sans-serif; }
تحسين سرعة المدونة
إذا كنت أحد أولئك الذين يسعون لتحسين المدونة وتحقيق درجة جيدة في Google Page Speed ، فيجب ألا يتم تحميل المصادر بين الوسم<head> ، لأن الاختبار سيعود بالاقتراح التالي:
قم بإزالة JavaScript الذي يحظر العرض و CSS من محتوى النصف العلوي من الصفحة
إذا كنت تريد تجنب بطئ المدونة وتحسين الأداء ، فقم بنسخ كود css الخاص بـ Google Fonts والصقه مباشرةً في مدونتك. في
@font-face أضف خاصية font-display. مثال:@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Tajawal'), local('Tajawal-Regular'), url(https://fonts.gstatic.com/s/tajawal/v2/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
خفض الوزن
ربما قررت استخدام خطوط من خطوط Google لتمييز كلمة أو عبارة. في هذه الحالة ، يمكنك تقليل حجم الخط عن طريق تحميل الأحرف المحددة فقط اليك مثال.https://fonts.googleapis.com/css?family=Tajawal&&text=Mintسوف يقوم الرمز أعلاه بتحميل الأحرف M و i و n و t فقط ، وبما أنها تشكل النص المشار إليه. يُسمح أيضًا باستخدام أحرف خاصة ومسافات فارغة. مثال:
https://fonts.googleapis.com/css?family=Tajawal&text=%C2%مرحباً%20بكم!
أعرف أنه يقرأ بشكل غريب ، لكن ما فعلته هو رمز الأحرف الخاصة لاستخدامها في عناوين url. إذا كنت تريد أن تفعل نفس الشيء ، فإنني أقدم لك الأداة التالية:
تشفير النص الخاص بـ URL
تحميل الأنماط
إذا قمنا بتحميل مصادر لنص معين فقط ، فمن المحتمل أيضًا أننا نريد إعطاء أنماط. تسمح خطوط Google أيضًا بإحدى وظائفها التجريبية باستخدام effect علي النص كما يلي:
https://fonts.googleapis.com/css?family=Source+Sans+Pro:900&effect=3d
الآن للاستفادة من التأثيرات ، يتم استخدام الفئة
font-effect-NAME في علامة html ، حيث يتم استبدال NAME بأسم التأثير الذي يكون في هذه الحالة سنستخدم التائثير 3D ثلاثي الأبعاد ، مثال:<span class="font-effect-3d">Google</span>
يمكننا أيضًا مواصلة إضافة الأنماط ، بصرف النظر عن الأنماط التي ستضيفها خطوط google لتفسير التأثير المحدد. سيبدو الرمز أعلاه كما يلي:
Google
يمكنك أيضًا ربط التأثيرات باستخدام شريط عمودي |. في هذا المثال ، أقوم بتسلسل التأثيرات ثلاثية الأبعاد و anaglyph.
https://fonts.googleapis.com/css?family=Open+Sans&effect=3d|anaglyph
إذا كنت تريد معرفة المزيد ومعرفة الجدول بالتأثيرات المتاحة ، نوصيك بقراءة واجهة خطوط google حول التأثيرات ، بحيث يمكنك أيضًا معرفة التحديثات.
لقد كان هذا كل شيء ، أي مشكلة ، مهما كانت صغيرة ، اتركه في التعليقات ، وسأساعدك. إذا كانت هذه المقالة قد خدمك ، فلا تنسَ أن تشاركها على مواقع التواصل الأجتماعي ، فهي ستساعد المزيد من الناس وسأقدرها كثيرًا أيضًا.
من المحتمل أنك لم تجد أي شرح بمثل هذا الوضوح منة قبل فكلها تقوم فقط بعرض عناوين جزابه بدون محتوي جيد علي سبيل المثال خطوط عربية إحترافية لمدونات البلوجر و خطوط جوجل لبلوجر لقد قمت بجمعهم معاً وكتابة هذا المقال أرجو ان تكون أستفدت من هذا المقل وشكراً.
