هل تتطلع إلى إضافة لمسة من التفرد والأناقة إلى مدونتك على Blogger؟ تلعب الخطوط دورًا حاسمًا في الجماليات العامة وسهولة قراءة المحتوى الخاص بك. من خلال بعض التعديلات البسيطة، يمكنك تحويل شكل ومظهر مدونتك بالكامل، مما يجعلها مميزة وتلقى صدى لدى جمهورك على مستوى جديد تمامًا.
سوف نستعمل جوجل فونت Google Fonts لهذا الغرض وفي مايلي شرح مفصل عن الاكواد المستخدمة، طبعا بعد الدخول الى الموقع واختيار الخط المناسب تقوم بنسخ الكود الذي سوف نستعمله في تغيير خط المدونة و هاهو شرح كل جزء داخل الكود:
<link href="https://fonts.googleapis.com/css2?family=Kufam:wght@900&display=swap" rel="stylesheet">
1. `<link>` :
هذا عنصر HTML يُستخدم لإنشاء اتصال بين مستند HTML الحالي ومورد خارجي، مثل (stylesheet). يُستخدم عادةً للارتباط بملفات CSS، التي تحدد الأنماط المرئية لصفحة الويب.
2. `href="https://fonts.googleapis.com/css2?family=Kufam:wght@900&display=swap"`:
هذه سمة للعنصر `<link>`. فهو يحدد موقع (URL) للمورد الخارجي، وهو في هذه الحالة ملف CSS مستضاف على خادم Google Fonts. يشير عنوان URL إلى عائلة خطوط معينة تسمى "Kufam" بوزن (سمك الخط) يبلغ 900 (وهو وزن غامق جدًا) .
3. `rel = "stylesheet"`:
تحدد هذه السمة العلاقة بين مستند HTML الحالي والمورد المرتبط. في هذه الحالة، يشير ذلك إلى أن المورد المرتبط عبارة عن ورقة أنماط، تُستخدم لتحديد العرض التقديمي المرئي وتخطيط محتوى HTML.
4. `https://fonts.googleapis.com/css2?family=Kufam:wght@900&display=swap`:
هذا هو عنوان URL لملف Google Fonts CSS.
عندما تزور عنوان URL هذا، ستجد رمز CSS الذي يحدد كيفية عرض عائلة الخطوط "Kufam" بوزن 900.
يوجه الجزء `display=swap` من عنوان URL المتصفح إلى استخدام تقنية تبديل الخط، والتي تعرض في البداية خطًا احتياطيًا ثم تقوم بتبديله بالخط المطلوب بمجرد توفره.
5. `&display=swap`
تخيل أنك تستضيف حفل عشاء ولديك حلوى خاصة تريد تقديمها لضيوفك. ومع ذلك، فإن خبز هذه الحلوى يستغرق بعض الوقت، ولا تريد أن ينتظر ضيوفك جائعين أثناء تحضيرها.
في تصميم الويب، قد يؤدي استخدام خطوط مختلفة على موقع الويب أحيانًا إلى إبطاء سرعة تحميل موقع الويب. يمكن أن تكون الخطوط ملفات كبيرة، وإذا استغرق تحميلها وقتًا طويلاً، فقد يرى الزائرون مساحة فارغة أو خطًا افتراضيًا حتى يصبح الخط المطلوب جاهزًا. هذا يشبه ضيوفك الذين يعانون من الجوع أثناء انتظار الحلوى.
الآن، يشبه الجزء `&display=swap` في الكود وجود خطة ذكية لحفل العشاء الخاص بك. إنها طريقة للتعامل مع تحميل الخط بطريقة أفضل. وإليك كيف يعمل:
1. **عرض أولي أسرع** : عند تحميل صفحة الويب، بدلاً من انتظار تحميل الخط الخاص بالكامل قبل عرض أي نص، يعرض المتصفح النص بسرعة باستخدام الخط الافتراضي أو الخط المتوفر بالفعل على جهاز الكمبيوتر الخاص بالزائر . يشبه هذا تقديم مقبلات بسيطة في حفل العشاء الخاص بك أثناء تحضير الحلوى الرئيسية.
2. **تبديل الخط** : عندما يصبح الخط الخاص الذي تريده متاحًا، يستبدل المتصفح الخط الافتراضي بالخط المطلوب. إنه مثل استبدال المقبلات بالحلوى اللذيذة بمجرد أن تصبح جاهزة.
لذلك، في سياق التعليمات البرمجية التي قدمتها، يعد `&display=swap` طريقة للتأكد من أن صفحة الويب لا تعرض مسافات فارغة أو نصًا غريب المظهر أثناء انتظار تحميل الخط الخاص. وبدلاً من ذلك، فإنه يعرض شيئًا ما بسرعة ثم يقوم بالتبديل إلى الخط المطلوب بمجرد أن يصبح جاهزًا.
بهذه الطريقة، يحصل زوار موقع الويب على تجربة أفضل لأنه يمكنهم رؤية المحتوى بشكل أسرع، حتى لو استغرق تحميل الخط الخاص بعض الوقت.
باختصار، يرتبط مقتطف الشفرة هذا بورقة أنماط خارجية (stylesheet) مستضافة على Google Fonts. تحدد ورقة الأنماط أنماط عائلة الخطوط "Kufam" بوزن خط يبلغ 900. سيتم استخدام عائلة الخطوط هذه لعرض النص على صفحة الويب، وتضمن تقنية تبديل الخطوط تجربة مستخدم سلسة من خلال عرض خط احتياطي في البداية و ثم استبدله بالخط المطلوب عند تحميله.
التسميات
الدروس والتعليمات