ماذا تفعل الأداة
يُنشئ مولّد مجموعات خطوط CSS قيمة font-family جاهزة للصق من خطوط مثبّتة مسبقًا على أجهزة زوّارك. اختر نمطًا، مثل خط واجهة النظام الأصلي، أو خط neo-grotesque مثل Inter وHelvetica، أو serif انتقالي مثل Charter، أو خط monospace مناسب للأكواد، وستعرض الأداة أفضل خط على كل نظام بالترتيب الصحيح.
تتبع المجموعات مجموعة Modern Font Stacks المعروفة، إضافة إلى المجموعة الكلاسيكية -apple-system, BlinkMacSystemFont, "Segoe UI" التي ما زالت مواقع كثيرة تستخدمها. ويمكنك إضافة بدائل للنصوص الصينية المبسّطة أو التقليدية أو اليابانية أو الكورية أو العربية أو التايلاندية أو الهندية، وخطوط رموز تعبيرية ملوّنة في النهاية.
طريقة الاستخدام
- اختر مجموعة الخطوط. تُظهر المعاينة على اليمين شكلها على الجهاز الذي تستخدمه الآن، ويمكنك تعديل نصها لتجرّب كلماتك الخاصة.
- اختر خطوط لأنظمة كتابة أخرى إذا كانت صفحاتك تحتوي على نص صيني أو ياباني أو كوري أو عربي أو تايلاندي أو هندي.
- فعّل إضافة خطوط الرموز التعبيرية أو أوقفه.
- اختر المخرجات: تصريح
font-familyعادي، أو خاصية CSS مخصّصة، أو مُدخلfontFamilyفي Tailwind، أو قائمة بسيطة. - انسخ النتيجة أو نزّلها كملف
.css.
تُحاط الأسماء التي تحتوي على مسافات أو تبدأ برقم بعلامات اقتباس تلقائيًا، أما كلمات CSS المفتاحية مثل system-ui وsans-serif فلا تُحاط بها أبدًا، لأن ذلك سيحوّلها إلى أسماء خطوط غير موجودة.
مثال
واجهة النظام مع بدائل للصينية المبسّطة:
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";نصائح
- استخدم مجموعة واحدة لنص المحتوى ومجموعة monospace للأكواد: مجموعتا النظام لا تكلّفان شيئًا في التحميل.
- تعتمد المعاينة على الخطوط المثبّتة على جهازك أنت، لذا تحقّق من الصفحة على Windows وعلى هاتف أيضًا.
- إذا أضفت لاحقًا خط ويب، فضعه أولًا في القائمة واحتفظ بمجموعة النظام كبديل.
الأسئلة الشائعة
› ما هي مجموعة الخطوط (font stack)؟
قائمة بعائلات الخطوط في خاصية font-family في CSS. يستخدم المتصفح أول خط مثبّت على الجهاز وينتقل إلى التالي إن لم يجده، لتنتهي القائمة بعائلة عامة مثل sans-serif.
› لماذا أضيف خطوطًا صينية أو يابانية أو كورية؟
الخطوط الغربية مثل Inter أو Charter لا تحتوي على حروف CJK. وإدراج PingFang SC أو Microsoft YaHei أو Noto Sans SC قبل العائلة العامة يجعل النص الصيني يستخدم خطًا يناسب النمط بدلًا مما يختاره النظام عشوائيًا. والأمر نفسه ينطبق على العربية والتايلاندية والهندية (الديفناغارية). أما الروسية والأوكرانية واليونانية والفيتنامية والتركية والبولندية وغيرها من اللغات المكتوبة بالحروف اللاتينية أو السيريلية فلا تحتاج إلى أي إضافة، إذ تغطيها خطوط النظام وخطوط Noto الموجودة في كل مجموعة.
› لماذا تُدرج خطوط الرموز التعبيرية بعد sans-serif؟
خطوط الرموز التعبيرية لا تغطي إلا الرموز التعبيرية. ووضعها في النهاية يضمن ألا تُعرض الحروف والأرقام العادية أبدًا بخط رموز تعبيرية، مع بقاء الرموز التعبيرية ملوّنة على كل الأنظمة.
› هل تحتاج هذه المجموعات إلى تنزيل خطوط ويب؟
لا. تستخدم كل مجموعة خطوطًا مضمّنة في Windows أو macOS أو iOS أو Android أو توزيعات Linux الشائعة، فتُحمَّل الصفحات دون أي طلب خطوط.