Stylepack

الخطوط

الخطوط التي يستخدمها teenage.engineering

يستخدم teenage.engineering الخط te-20 لعناوينه ونصه الأساسي. te-20 خط مرخّص يقدّمه الموقع بنفسه. أقرب بديل مجاني على Google Fonts: Inter.

تم القياس من teenage.engineering قبل 4 أيام.

افتح حزمة التصميم الكاملةتنزيل الحزمة

عائلات الخطوط

1 عائلة خطوط
te-20
يُستخدم في
body, button, label
المصدر
مستضافة ذاتيًا
البديل المجاني
Inter

CSS لإعادة إنتاجه

متغيرات الخطوط مع البديل المجاني في سلسلة الخطوط، فيعمل CSS نفسه مع الخط المرخّص أو بدونه.

:root {
  --font-body: "te-20", "Inter", sans-serif; /* Inter stands in for te-20 */
  --font-size-base: 19.102px;
}

كيف يُضبط النص

headline-displayQuick brown foxte-20 / 48px / 100 / lh 1.4
headline-lgQuick brown foxte-20 / 32px / 100 / lh 1.4
headline-mdQuick brown foxte-20 / 24px / 100 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogte-20 / 19.102px / 100 / lh 22.0408px
label-mdThe quick brown fox jumps over the lazy dogte-20 / 16px / 300 / lh 24px
buttonThe quick brown fox jumps over the lazy dogte-20 / 16px / 100 / lh 1.5
أحجام الخطوط المستخدمة
161940

لوكلاء الذكاء الاصطناعي

الحزمة نص عادي بلا مفتاح: اجلب DESIGN.md، أو سلّم الحزمة كاملة إلى Claude Code أو Cursor أو Copilot عبر خادم MCP.

curl -s https://stylepack.ai/packs/teenage.engineering/DESIGN.md

أسئلة

ما الخط الذي يستخدمه teenage.engineering؟

يستخدم teenage.engineering الخط te-20. العناوين بخط te-20 والنص الأساسي بخط te-20، مقاسة من الموقع كما يُعرض فعلًا، لا من ملف الأنماط.

هل خط teenage.engineering مجاني الاستخدام؟

لا. te-20 خط مرخّص يقدّمه teenage.engineering بنفسه. أقرب بديل مجاني هو Inter، متاح على Google Fonts. يضعه كود CSS في هذه الصفحة ضمن سلسلة الخطوط كبديل.

كيف أحصل على الطباعة نفسها التي يستخدمها teenage.engineering في مشروعي؟

نزّل حزمة تصميم teenage.engineering من Stylepack: تحتوي على سلسلة الخطوط وسلّم الأحجام وكل أنماط النصوص ولقطات الشاشة، بصيغة يستطيع وكيل برمجة بالذكاء الاصطناعي مثل Claude Code أو Cursor البناء منها.