الانتقال إلى مكدس خطوط النظام في WordPress (كيف ولماذا)

أنا معجب كبير بأداء الويب. لكنني أيضًا لا أعتقد أنه ينبغي أو يجب أن يفسد التصميم. هناك دائمًا توازن جيد في المنتصف. مرة أخرى في عام 2017 ، كنت في مدونة GitHub وكنت أحفر خطهم. كان من السهل جدا قراءتها. لذلك تعمقت في الخصائص مع Chrome Devtools ورأيت أنهم كانوا يستخدمون مكدس خطوط النظام .

لقد كنت أستخدم خطوط النظام لسنوات حتى الآن وأحبها. لذلك اليوم ، أريد أن أوضح لك كيفية استخدام مكدس خطوط النظام على موقع WordPress الخاص بك.

ما هو مكدس خطوط النظام؟

هناك أنواع مختلفة من الخطوط للاختيار من بينها لموقع ويب. لديك إلى حد كبير أربعة خيارات مختلفة:

• الخطوط الآمنة للويب: مجانية ولا يتطلب المستعرض وقت التنزيل ، ولكنها عادةً ما تبدو قديمة وبالتالي لا يتم استخدامها كثيرًا. لا أحد يحب Arial أو Tahoma حقًا ، أليس كذلك؟ شاهد قائمة كاملة من الخطوط الآمنة للويب.
• خطوط الويب: تبدو جميلة ، لكنها تتطلب التنزيل بواسطة المتصفح. هل لديك كل من الخيارات المجانية والمتميزة المتاحة. يضيف إلى الوزن الإجمالي لصفحة موقع الويب الخاص بك. ومع ذلك ، يمكن تقديمها من CDN المخزنة مؤقتًا. يشمل الموفرون Google و Adobe Fonts (TypeKit) وما إلى ذلك.
• استضافة خطوط الويب محليًا: تتوفر كل من الخيارات المجانية والمتميزة. لا يزال يتطلب وقت التنزيل ويمكنه الاستفادة من اتصال HTTP / 2 واحد على CDN المخزن مؤقتًا. تحتوي جميع المتصفحات الرئيسية الآن على تقسيم منفصل لذاكرة التخزين المؤقت ، لذا فإن استضافتها محليًا هي في الواقع أفضل للأداء. يمكنك استضافة خطوط Google الخاصة بك محليًا باستخدام Perfmatters.
• خطوط النظام: مجانًا ، تبدو جيدة جدًا لأنها تتوافق مع نظام التشغيل ، ولا يلزم وقت تنزيل! يتم استخدامها بواسطة Weather.com و GitHub و Bootstrap و Medium و Ghost و Booking.com (اقرأ قصة خط النظام) و PubMed وحتى لوحة معلومات WordPress الخاصة بك. في رأيي الشخصي ، تبدو خطوط النظام أفضل قليلاً على macOS مقابل Windows.

خطوط النظام ليست جديدة. في الواقع ، كان Medium يستخدمهم في عام 2015. إنهم يشعرون تمامًا بنظام التشغيل الخاص بك لأنهم يستخدمون خطوطًا أصلية. تختار العديد من أنظمة التشغيل الحديثة الخطوط بحكمة شديدة ، وتتميز جميعها بمظهر وملمس أنيق للغاية. لا يشبه الأمر العودة إلى الخط الآمن للويب من Arial أو Times New Roman. صدقني؛ لا أحد يريد مشاهدة Times New Roman على موقع ويب.

وأفضل ما في الأمر هو أن خطوط النظام تعمل تمامًا مثل الخطوط الآمنة للويب ، من حيث أنها لا تتطلب أي وقت تنزيل بواسطة المتصفح. يمكن أن يساعد ذلك في تقليل الوزن الإجمالي للصفحة على موقع الويب الخاص بك. اعتبارًا من أبريل 2022 ، تمثل خطوط الويب ، في المتوسط ​​، حوالي 6.07٪ من إجمالي وزن موقع الويب. على الرغم من أن هذا ليس ضخمًا ، تذكر أن كل تحسين صغير تقوم به يضيف إلى موقع ويب سريع ، خاصة على الهاتف المحمول.

هل هناك أي عيوب لاستخدام خطوط النظام؟ لا! هذا هو جمالها. لا يتم تشغيل التحذيرات في PageSpeed ​​Insights مثل "تأكد من بقاء النص مرئيًا أثناء تحميل الخط" ، لأنه من الناحية الفنية لا يوجد شيء يتم تنزيله.

مكدس خط النظام CSS

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

على سبيل المثال ، إليك كيفية ظهور CSS مع خط الويب.

 عائلة الخطوط: "Open Sans" ، "Helvetica Neue" ، sans-serif ؛

وإليك كيف قد تبدو مجموعة خطوط النظام. والخبر السار هو أنهم لا يتم تحميلهم جميعًا ؛ إنه مجرد ترتيب للخطوط التي يجب تحميلها من نظام التشغيل إذا كانت متوفرة.

 عائلة الخطوط: -apple-system و system-ui و BlinkMacSystemFont و "Segoe UI" و Helvetica و Arial و sans-serif و "Apple Color Emoji" و "Segoe UI Emoji" و "Segoe UI Symbol"

هل تعلم أن لوحة معلومات WordPress الخاصة بك تستخدم مجموعة خطوط النظام؟ هذا هو ما يستخدمونه.

 عائلة الخطوط: -apple-system و BlinkMacSystemFont و "Segoe UI" و Roboto و Oxygen-Sans و Ubuntu و Cantarell و "Helvetica Neue" و sans-serif

يحتوي CSS-Tricks أيضًا على طريقة بديلة حول كيفية تطبيق خطوط النظام باستخدام @ font-face.

ورقة الغش مكدس خط النظام

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

كيفية تنفيذ مكدس خطوط النظام

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

الخيار 1: استخدم سمة GeneratePress WordPress

تريد أن تجعل هذا سهل للغاية؟ ما عليك سوى الانتقال إلى موضوع GeneratePress ، وهو ما أستخدمه في جميع مواقع الويب الخاصة بي. في أداة التخصيص ، ضمن أسلوب الطباعة ، يمكنك ببساطة تحديد "System Stack". وهذا كل شيء!

السمات الأخرى التي تركز على الأداء مثل Astra لديها أيضًا خيار استخدام خطوط النظام.

الخيار 2: إضافة مكدس خطوط النظام باستخدام CSS

إذا كنت تستخدم سمة WordPress أخرى ، فيمكنك الانتقال بسهولة إلى مجموعة خطوط النظام مع القليل من CSS.

الخطوة 1

في WordPress ، ستحتاج إلى تغيير CSS في font-family الخاصة بك. يمكنك استخدام أداة تخصيص WordPress لإضافة الشفرة ، ضمن "CSS إضافي".

الخطوة 2

أدخل الرمز التالي. قد يختلف هذا حسب الموضوع ، ولكن بالنسبة لمعظم ، يجب أن يتجاوز ما يلي كل شيء. أنا أستخدم نفس مكدس خطوط النظام مثل GithHub ، باستثناء أنني أقوم بإضافة system-ui كإصدارات أحدث من Chrome تدعم ذلك. تذكر أنه سيتم استخدامها بالترتيب الذي تظهر به في المكدس.

 body {font-family: -apple-system، system-ui، BlinkMacSystemFont، "Segoe UI"، Helvetica، Arial، sans-serif، "Apple Color Emoji"، "Segoe UI Emoji"، "Segoe UI Symbol"؛}
h1، h2، h3، h4، h5، h6 {font-family: -apple-system، system-ui، BlinkMacSystemFont، "Segoe UI"، Helvetica، Arial، sans-serif، "Apple Color Emoji"، "Segoe UI Emoji "،" Segoe UI Symbol "؛}

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

 body، p {font-family: -apple-system، system-ui، BlinkMacSystemFont، "Segoe UI"، Helvetica، Arial، sans-serif، "Apple Color Emoji"، "Segoe UI Emoji"، "Segoe UI Symbol"؛ }

الخطوه 3

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

إذا كنت تستخدم أحد سمات WordPress الافتراضية ، فيمكنك بسهولة استخدام المكون الإضافي المجاني Disable Google Fonts. أو يمكنك أيضًا تعطيل خطوط Google في المكون الإضافي Perfmatters الخاص بنا.

قبل وبعد اختبارات السرعة

وبالطبع لم أستطع المقاومة. هنا قبل وبعد اختبارات السرعة. تم إجراء كل اختبار خمس مرات ، وتم إجراء متوسط.

اختبار السرعة من قبل

إليك اختبار السرعة من قبل ، عندما كان يتم تحميل خطوط Google.

اختبار السرعة بعد

إليك اختبار السرعة بعد استخدام مكدس خطوط النظام الخاص بي. كما ترى ، فقد قمت بتخفيض وزن صفحتي بالكامل بحوالي 60 كيلوبايت وتخلصت من ثلاثة طلبات. واحد إلى fonts.googleapis.com ثم تنزيلين لإصدارات مختلفة من Roboto بوزن الخط. كانت تكدس خطوط النظام أسرع بنحو 6٪ من استخدام خطوط Google .

أعرف الكثير من المواقع التي تستخدم 4-5 أوزان أو أنماط خطوط مختلفة ، وأحيانًا 2-3 خطوط مختلفة من Google. لذلك من المحتمل أن ترى تحسينات أكثر أهمية مما فعلت.

لقد قمت أيضًا بنقل موقع novashare.io WordPress الخاص بنا إلى خطوط النظام وحققت نتائج رائعة ؛ تحقق من اختبار السرعة هذا أدناه.

تجانس الخط

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

يمكنك إضافة هذا إلى الجسم.

 هيئة {
-تجانس -webkit-font-smoothing: antialiased.
-موز- osx- الخط- تجانس: تدرج الرمادي ؛
}

ملخص

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

فضولي ما هي أفكارك؟ هل استخدمت مكدس خطوط النظام حتى الآن مع WordPress؟ إذا كان الأمر كذلك ، أعلمني أدناه.