الخطوط المتغيرة في الإنتاج: كيف تشحنها دون أن تدمّر الأداء
دليل عملي للخطوط المتغيرة في الإنتاج. المحاور الأربعة التي تستحق الشحن، واستراتيجية التقسيم الفرعي التي تقلص حجم الملف إلى النصف، ووصفة التحميل التي تمنع الصفحة من القفز.
الخطوط المتغيرة في الإنتاج: كيف تشحنها دون أن تدمّر الأداء
الخط المتغير هو ملف واحد بأوزان لا نهائية، والفرق التي تشحنه بشكل صحيح توفر البايتات وتفتح باب التعبير. أما الفرق التي تشحنه بشكل خاطئ فتحمّل خطوطًا بحجم 800 كيلوبايت وتعطّل أول رسم للصفحة من أجل أنيميشن لن يراه أحد. الفرق ليس في اختيار الخط. الفرق في استراتيجية الإنتاج.
الخط المتغير هو ملف واحد بأوزان لا نهائية
يشحن الخط المتغير كل الأوزان والميلان والعرض داخل ملف واحد بمحاور يمكنك الاستيفاء بينها، وهذه هي الفكرة كلها وهي أيضًا المقايضة كلها. طلب شبكة واحد يحل محل أربعة إلى سبعة طلبات من الخطوط الثابتة. الملف أكبر من أي وزن ثابت منفرد، لكنه أصغر من مجموعة الأوزان الثابتة كاملة. هذه هي الصفقة.
الصيغة هي OpenType مع بيانات تباين مضمّنة. يقوم المتصفح بالاستيفاء بين نهايتي كل محور وقت العرض، أي أنك تحصل على font-weight: 350 أو font-weight: 723 مجانًا، وليس فقط الأعداد الصحيحة التي قررت الشركة المصممة للخط شحنها. هذا ما يجعل نمط أنيميشن الوزن عند التمرير ممكنًا، وهو نفسه ما يجعل التنفيذ المتهاون يحمّل ملفًا بحجم 600 كيلوبايت لموقع لا يستخدم إلا وزنين.
المحاور الأربعة التي تستحق الشحن
الوزن، الميلان، الحجم البصري، العرض. معظم مواقع الإنتاج تحتاج اثنين أو ثلاثة منها، وشحن محاور أكثر مما تستخدم هو بايتات مهدورة.
تحدد مواصفة OpenType خمسة محاور مسجلة: الوزن (wght)، والعرض (wdth)، والميلان (slnt)، والمائل (ital)، والحجم البصري (opsz). وبعدها يمكن للشركات المصممة تعريف محاور مخصصة لأي شيء من الدرجة إلى التعبيرية. المحاور المخصصة ممتعة في عينة الخط. لكنها نادرًا ما تستحق حجم الملف في الإنتاج. التزم بالأربعة المسجلة ما لم يتطلب تصميمك شيئًا آخر صراحة.
| المحور | خاصية CSS | المدى النموذجي | متى تستخدمه |
|---|---|---|---|
الوزن (wght) | font-weight | 100–900 | دائمًا تقريبًا |
العرض (wdth) | font-stretch | 75%–125% | التحريري، العناوين المتجاوبة |
الميلان (slnt) | font-style: oblique Xdeg | -15deg إلى 0deg | بديل للمائل الحقيقي أو للأنيميشن |
الحجم البصري (opsz) | font-optical-sizing | 6–144 | العرض والمتن من ملف واحد |
الوزن هو حصان العمل
محور الوزن يحل محل ملفات الأوزان الثابتة الأربعة إلى السبعة التي تشحنها معظم المواقع، وهو المحور الذي يبرر الخطوط المتغيرة وحده. موقع يشحن Regular وMedium وSemiBold وBold وExtraBold كملفات ثابتة يرسل خمسة طلبات خطوط. الخط المتغير بمحور وزن يرسل طلبًا واحدًا، ويقدم كل القيم الوسيطة مجانًا.
كود CSS هو font-weight: 300 حتى font-weight: 900 على أي عنصر. القيم الوسيطة مثل font-weight: 450 صالحة وتُعرض بشكل صحيح. راجع توثيق مدى المحور لدى الشركة المصممة قبل أن تفترض أن الخط المتغير يغطي المدى الكامل من 100 إلى 900. بعضها يشحن مدى أضيق ويقصّ بصمت، فينتج درجات خفيفة لكنها قبيحة بدل الانتقالات السلسة.
الميلان يفتح الباب للمائل الحقيقي
محور الميلان الحقيقي يتيح لك الانتقال من القائم إلى المائل بأي قيمة، وهو ما لا تستطيعه معظم أزواج الخطوط الثابتة دون ملف ثانٍ. التمييز بين slnt (الميلان) وital (المائل) مهم: الميلان مدى متصل من القائم إلى المنحرف، بينما المائل مفتاح ثنائي ينتقل إلى تصميم مائل منفصل ومصحح بصريًا.
لنص المتن، محور المائل مع مائل بصري سليم هو الخيار الصحيح دائمًا تقريبًا. أما للعناوين التي تخطط لتحريكها فالميلان هو المحور المطلوب. كود CSS هو font-style: oblique -10deg، وقيمة الدرجة تقابل مدى المحور. اختبر الميلان بحجم عنوانك الفعلي قبل أن تلتزم بقيمة. زوايا الميلان المتطرفة تبدو أسوأ بالأحجام الصغيرة مما توحي به عينة الخط.
الحجم البصري يُبقي خط العرض حيًا
يضبط الحجم البصري التباين وارتفاع x والتفاصيل حسب حجم العرض، وهذا هو الفرق بين خط عرض وخط متن مدمجين في خط واحد. خط مصمم لمتن بحجم 12px له تفاصيل مبسطة وفتحات مفتوحة وتباعد سخي. أما قص العرض بحجم 80px فله تباين أحدّ وتباعد أضيق وتفاصيل أدق. الحجم البصري يمنحك الاثنين من ملف واحد.
الخاصية هي font-optical-sizing: auto، وتتيح للمتصفح تطبيق الإعدادات البصرية الصحيحة بحسب font-size المعلن. ويمكنك ضبطه يدويًا عبر font-variation-settings: 'opsz' 72 لعنوان بحجم 72px. الخطوط التي تدعم هذا المحور بشكل سليم، وأشهر مثال Inter Display مقابل Inter Text، صُممت والحجم البصري ميزة أساسية فيها. أما الخطوط التي تضيف محور opsz كفكرة لاحقة فنادرًا ما تقدم فرقًا بصريًا ذا معنى. اعرف أيهما تشتري.
العرض هو المحور التحريري
محور العرض يتيح لك ضغط العناوين وتوسيع الاقتباسات البارزة دون تبديل الخطوط، وهي الحركة التي تجعل التخطيطات التحريرية تغني. الخاصية هي font-stretch، وتأخذ قيمًا مئوية: font-stretch: 75% للمضغوط، وfont-stretch: 125% للموسّع.
يستحق هذا المحور حجم ملفه في المواقع ذات التخطيطات التحريرية المتجاوبة. عنوان بحجم 120px على سطح المكتب قد يحتاج إلى الضغط ليناسب العمود في جوال بعرض 375px، ومحور العرض يتولى ذلك باستعلام @media واحد بدل تحميل خط ثانٍ. يشحن Roboto Flex واحدًا من أوسع مدى محور عرض في خط متغير جاهز للإنتاج، ويستحق الدراسة إن كنت تنوي استخدام هذا المحور بجدية. أما للمواقع التسويقية ذات العناوين ثابتة العرض فتجاوزه تمامًا.
متغير مقابل ثابت، شجرة القرار
تفوز الخطوط المتغيرة عندما تستخدم ثلاثة أوزان أو أكثر، أو تحرّك الخط، أو تحتاج الحجم البصري. غير ذلك، ابقَ على الثابت. نقطة التعادل عادة عند وزنين إلى ثلاثة، والحساب يتغير حسب متطلبات تغطية اللغات.
| السيناريو | الخيار الأفضل | السبب |
|---|---|---|
| 1–2 وزن، بلا أنيميشن | ثابت | بايتات إجمالية أقل |
| 3+ أوزان | متغير | ملف واحد يتفوق على ثلاثة |
| أنيميشن للوزن أو الميلان | متغير | ممكن فقط مع المتغير |
| الحاجة للحجم البصري | متغير | يوفر تحميل خط ثانٍ |
| لاتيني ضيق فقط، وزن واحد | ثابت | لا فائدة من المتغير |
| لغات ولغات متعددة | متغير مع التقسيم الفرعي | ملف أساسي واحد وامتدادات لكل لغة |
موقع يشحن Regular وBold الأفضل له غالبًا ملفان ثابتان بمجموع 40 إلى 60 كيلوبايت بدل خط متغير واحد بحجم 120 إلى 200 كيلوبايت. يميل الحساب بحسم إلى المتغير بمجرد تجاوز ثلاثة أوزان أو إضافة أنيميشن إلى المتطلبات.
التقسيم الفرعي يقص الملف إلى النصف
التقسيم الفرعي يسقط الرموز التي لا تستخدمها، وفي موقع تسويقي يعني ذلك أن خطًا متغيرًا بحجم 600 كيلوبايت يصبح 200 كيلوبايت دون تغيير مرئي. الخط المتغير الكامل يشحن كل رمز صممته الشركة: اللاتينية واللاتينية الموسعة والسيريلية واليونانية والرموز الرياضية ورموز العملات والربطات التي لن تستخدمها أبدًا. أما الخط المتغير المقسّم فرعيًا فيشحن فقط ما يحتاجه محتواك.
الأداة لهذا هي pyftsubset من مكتبة fonttools. أمر تقسيم لاتيني أساسي:
pyftsubset font.woff2 \
--output-file=font-subset.woff2 \
--flavor=woff2 \
--unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD \
--layout-features="kern,liga,calt,rlig"
احتفظ بميزات التخطيط kern وliga وcalt وrlig. وأزل كل ما عداها ما لم يستخدمه التصميم صراحة. مرّر الناتج عبر ضاغط WOFF2 إن لم تتولَّ الأداة الضغط تلقائيًا.
اللاتينية واللاتينية الموسعة ونطاقات اللغات
استراتيجية التقسيم الصحيحة هي ملف لاتيني واحد مع ملف امتداد لغوي لكل لغة، يُحمَّل عند الحاجة فقط. معظم المواقع التسويقية ومواقع المنتجات تخدم محتوى لاتينيًا في الأساس. اشحن المجموعة اللاتينية كافتراضية، وحمّل مجموعات الأحرف الموسعة عبر الواصف unicode-range في @font-face، الذي يخبر المتصفح بجلب ملف فقط عندما يصادف أحرفًا مطابقة في الصفحة.
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
يحمّل المتصفح فقط الملفات المطابقة للأحرف الموجودة في الصفحة الحالية. صفحة فرنسية تحمّل ملف اللاتينية الموسعة. صفحة إنجليزية لا تفعل. هكذا يشحن Google Fonts على نطاق واسع، وهو النمط الصحيح لنسخه مع خطوطك المتغيرة.
التحميل بلا تعثر
الخط المتغير الذي يُحمَّل بعد أول رسم سيزحزح التخطيط، ووصفة التحميل هي preload مع font-display بقيمة swap مع بديل مطابق للمقاييس. هذا ليس اختياريًا. الخط المتغير أكبر من وزن ثابت واحد، أي أنه يستغرق وقتًا أطول للوصول، أي أن نافذة إزاحة التخطيط أوسع.
يوضع رابط preload في <head> قبل أي ورقة أنماط:
<link
rel="preload"
href="/fonts/yourfont-latin.woff2"
as="font"
type="font/woff2"
crossorigin
>
الإعلان font-display: swap في @font-face يخبر المتصفح بالعرض بالبديل فورًا ثم تبديله بالخط المتغير عند وصوله. الخط المتغير ملف واحد بأوزان لا نهائية، واستراتيجية التحميل الخاطئة ستحمّله مرتين بلا فائدة إذا خلطت إعلانات preload وغير preload عبر أوراق الأنماط. preload واحد لكل ملف مجموعة فرعية. هذه هي القاعدة كلها.
تريد خطوطًا متغيرة تُشحن بنصف البايتات ولا تزعزع الصفحة أبدًا؟ وظّف Brainy وسنشحن لك حزمة الطباعة للإنتاج بالمحاور الصحيحة والمجموعات الفرعية الصحيحة ووصفة التحميل التي تُبقي Lighthouse أخضر.
البدائل المطابقة للمقاييس
البديل النظامي المطابق للمقاييس يستخدم size-adjust وascent-override وdescent-override ليجعل البديل يُعرض بنفس إيقاع الخط المتغير. من دون ذلك، يستبدل font-display: swap النص غير المرئي بإزاحة تخطيط عند وصول الخط المتغير. ومع مطابقة المقاييس يصبح التبديل غير ملحوظ بصريًا.
@font-face {
font-family: 'YourFont Fallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
القيم الدقيقة تعتمد على خطك المتغير. أدوات مثل Fontaine وnext/font تولّد هذه القيم تلقائيًا. إذا كنت تبني على Next.js فإن next/font يتولى سلسلة البدائل كاملة. وإن لم تكن، فـ Fontaine أسرع طريق إلى قيم تجاوز صحيحة دون حسابها يدويًا.
أربعة أنماط أنيميشن تفتحها الخطوط المتغيرة
وزن عند التمرير بالمؤشر، ووزن عند التمرير بالصفحة، وميلان عند التمرير بالمؤشر، وعرض عند الكشف. هذه الأنيميشنات الأربعة لا تتحقق إلا بالخطوط المتغيرة، وهي تستحق حجم الملف عند استخدامها باعتدال. ضع الأربعة كلها في صفحة واحدة فتبدو عرضًا تقنيًا لا تصميمًا.
وزن عند المرور بالمؤشر (Hover-weight) ينقل font-weight من 400 إلى 700 عند المرور. الاستيفاء سلس لأن بيانات المحور داخل الخط. وtransition: font-weight 0.15s ease على العنصر هو كل الـ CSS. يعمل على روابط التنقل ونصوص الدعوة إلى الإجراء والتسميات التفاعلية.
وزن عند التمرير (Scroll-weight) يقود font-weight من موضع التمرير باستخدام مستمع تمرير في JavaScript يربط scrollY بقيمة في مدى المحور. أبقِ المدى ضيقًا: من 300 إلى 700 يبدو مقصودًا، ومن 100 إلى 900 يبدو خللًا. مكانه أقسام الهيرو حيث يصبح الخط أثقل كلما تعمق المستخدم في المحتوى.
ميلان عند المرور (Hover-slant) ينقل font-style: oblique 0deg إلى font-style: oblique -10deg عند المرور. هو البديل الأهدأ لـ hover-weight ويبدو أرقى على روابط التنقل والعناصر التفاعلية المضمنة. اجمعه مع hover-weight فقط إذا صُمم الخط لدعم الاثنين معًا.
عرض عند الكشف (Reveal-width) يحرك font-stretch كجزء من أنيميشن دخول. يدخل النص عند font-stretch: 75% ويتوسع إلى font-stretch: 100% خلال 400ms. ومع ظهور تدريجي يصبح من أنظف أنماط الكشف الطباعي المتاحة. تجاوزه في نص المتن. مكانه خط العرض وعناوين الهيرو فقط.
سبعة مواقع تشحن الخطوط المتغيرة على نطاق واسع
GitHub وStripe Press وVercel وLinear وThe New York Times وApple Music وFigma، كلها تشحن خطوطًا متغيرة في الإنتاج، والأنماط المشتركة بينها هي التي تستحق النسخ.
GitHub يشحن Mona Sans وHubot Sans، وكلاهما خط متغير مخصص لهوية GitHub. محور الوزن فقط في معظم سياقات الواجهة. بلا أنيميشن إلا في بعض الأقسام التسويقية. أحجام الملفات ضيقة لأنهم يقسمون بشراسة حسب مجموعات اللغات.
Stripe Press يستخدم خط عرض متغيرًا مخصصًا للعناوين التحريرية. يدفعون محور الوزن بقوة، بعناوين عرض بأوزان ثقيلة وتعليقات بأوزان خفيفة من ملف واحد. الحجم البصري ظاهر عند أحجام العناوين الكبيرة. إنه أكثر استخدام للخط المتغير طموحًا تحريريًا في هذه القائمة.
Vercel يشحن Geist، خطها المتغير الخاص، عبر Geist Sans وGeist Mono. محور الوزن يغطي المدى الكامل. الخط مفتوح المصدر، وتقسيمه اللاتيني نظيف، ويُحمَّل بسرعة تكفي ليكون مرجعًا لما يبدو عليه خط متغير مشحون جيدًا في تطبيق Next.js إنتاجي.
Linear يشحن Inter كخط متغير. يمتد محور الوزن عبر أوزان الواجهة، ويبقى في المدى الأضيق المناسب لواجهة كثيفة. هو أكثر استخدام محافظ في هذه القائمة، وأيضًا من الأصح لواجهة منتج كثيفة البيانات حيث يكون الأنيميشن ضجيجًا.
The New York Times تستخدم خط سيريف متغيرًا مخصصًا لخط العرض. محورا الوزن والحجم البصري كلاهما نشط، والانتقالات بين العرض والمتن تستخدم محور الحجم البصري لتحويل عرض شخصية الحروف. هذا أرقى ما يبلغه استخدام الخط المتغير في الإنتاج على النطاق التحريري.
Apple Music يشحن San Francisco بصيغته المتغيرة مع محوري الوزن والحجم البصري نشطين. انتقالات المحاور بين الخط الكبير والصغير سلسة بما يكفي لأن معظم المستخدمين لا يلاحظون أن الخط متغير، وهذا هو الهدف الصحيح. يجب أن يختفي الخط داخل تجربة القراءة.
Figma يشحن Inter Display كخط متغير عبر التطبيق. إذا كنت تعمل على اختيار خط العرض لواجهة منتج، فادرس كيف توازن Figma بين Inter بأوزان الواجهة الصغيرة وInter Display بأحجام العناوين الكبيرة. انضباط مدى الوزن يستحق النسخ مباشرة.
قائمة فحص الخط المتغير قبل النشر
شغّل هذه القائمة قبل شحن خط متغير وستلتقط الأخطاء التي تعض في الإنتاج.
- التقسيم الفرعي متحقق منه. شغّل
pyftsubsetبـنطاقات unicode المستهدفة. تأكد أن ملف المجموعة اللاتينية أقل من 200KB. افحص عينات للتأكد أن الأحرف التي يستخدمها محتواك موجودة في الناتج. - المحاور موثقة. اعرف أي المحاور يشحنها الخط والحد الأدنى والأقصى لكل منها. لا تعلن
font-weight: 800إذا كان المحور ينتهي عند 700. سيُقصّ بصمت وسيكون تصميمك خاطئًا. - preload مضبوط.
<link rel="preload">واحد لكل ملف مجموعة فرعية، في<head>، مع السمةcrossorigin، يشير إلى الملف اللاتيني الأساسي فقط. عمل preload لملف لا تستخدمه يهدر عرض النطاق. - font-display مضبوط. كل كتلة
@font-faceفيهاfont-display: swap. تأكد في تبويب Network في DevTools أن الخطوط لا تحجب عرض أي موارد على المسار الحرج. - مقاييس البديل مطابقة. كتلة
@font-faceللبديل النظامي معsize-adjustوascent-overrideوdescent-overrideمحسوبة. تحقق بخنق الشبكة إلى Slow 3G في DevTools وراقب إزاحة التخطيط عند التحميل. يجب أن يكون CLS صفرًا أو قريبًا منه. - المحاور التي يستخدمها التصميم مؤكدة. كل محور معلن في CSS مستخدم فعلًا في التصميم النهائي. المحاور الموجودة في ملف الخط وغير المستخدمة في CSS ما زالت تضيف بايتات. إن لم تكن تستخدم العرض، فكر في التقسيم الفرعي لمدى المحور لتقليم تلك البايتات.
- درجة Lighthouse مفحوصة. شغّل Lighthouse على رابط الإنتاج مع الخط في مكانه. يجب أن يكون LCP وCLS المتعلقان بالخط خضراوين. وإن لم يكونا كذلك، فمقاييس البديل خاطئة أو preload مفقود.
- ترويسات CORS مؤكدة. الخطوط المتغيرة المحمّلة من CDN أو مصدر خارجي تحتاج ترويسات
Access-Control-Allow-Origin. افحص تبويب Network بحثًا عن أخطاء CORS. فشل CORS ينتج بديلًا صامتًا للخط يصعب تشخيصه في الإنتاج.
الأسئلة الشائعة
ما هو الخط المتغير وكيف يختلف عن الخط الثابت؟
الخط المتغير هو ملف خط واحد يحتوي على المدى الكامل لتصميم الخط، تتحكم فيه محاور مثل الوزن والعرض والميلان والحجم البصري. أما الخط الثابت فهو لقطة واحدة بوزن وأسلوب واحد. الفرق العملي أن الخط المتغير يتيح لك استخدام font-weight: 350 أو تحريك الوزن بسلاسة في CSS، بينما الخطوط الثابتة تسمح فقط بالقيم المحددة التي اختارت الشركة شحنها كملفات منفصلة.
هل تحسّن الخطوط المتغيرة الأداء فعلًا؟
يعتمد على عدد الأوزان التي تحمّلها. إذا كنت تشحن وزنين ثابتين بمجموع 60KB، فالتحول إلى خط متغير بحجم 180KB تراجع في الأداء. وإذا كنت تشحن خمسة أوزان بمجموع 300KB، فالتحول إلى خط متغير مقسّم فرعيًا بحجم 120KB مكسب واضح. حجة الأداء للخطوط المتغيرة حقيقية، لكنها تنطبق فقط بعد تجاوز عتبة الأوزان الثلاثة والتقسيم الفرعي الصحيح.
ما أفضل خط متغير لتصميم الواجهات؟
Inter هو الخط المتغير الأوسع انتشارًا في تصميم الواجهات. محور وزنه معايَر جيدًا للشاشات، ويُقسَّم بنظافة، وتشحنه Figma كمرجع إنتاجي. أما Roboto Flex فهو الخيار الصحيح عندما تحتاج مدى محاور واسعًا لتخطيطات تحريرية متجاوبة. وRecursive يستحق الدراسة إذا أردت خط sans متغيرًا وخط mono متغيرًا من عائلة خطوط واحدة. وبالنسبة لـمبادئ تصميم الويب التي تتطلب خطًا عرضيًا تعبيريًا، فإن Fraunces وPlayfair Display كلاهما يشحنان محوري حجم بصري ووزن قويين.
كيف أستخدم font-variation-settings في CSS؟
font-variation-settings هي الخاصية منخفضة المستوى لضبط محاور الخط المتغير مباشرة باستخدام وسم المحور ذي الأحرف الأربعة وقيمة رقمية: font-variation-settings: 'wght' 450, 'wdth' 85. للمحاور المسجلة مثل الوزن والعرض، فضّل خصائص CSS عالية المستوى (font-weight وfont-stretch) لأنها تورَّث وتتركب بشكل صحيح. استخدم font-variation-settings فقط للمحاور المخصصة التي ليس لها خاصية CSS عالية المستوى.
هل يمكن للخطوط المتغيرة أن تسبب إزاحة في التخطيط؟
نعم، وهي أكثر عرضة لذلك من الخطوط الثابتة لأن الملف أكبر ويستغرق وقتًا أطول للتحميل. الحل هو font-display: swap مع بديل مطابق للمقاييس. هذا المزيج يجعل التبديل غير ملحوظ بصريًا. ومن دون البديل المطابق للمقاييس، يستبدل font-display: swap النص غير المرئي بقفزة تخطيط ظاهرة عند وصول الخط. المشكلتان تُحلّان معًا أو لا تُحلّان.
هل الخطوط المتغيرة مدعومة في كل المتصفحات؟
الخطوط المتغيرة مدعومة في كل المتصفحات الحديثة: Chrome وFirefox وSafari وEdge. خط الأساس متين بما يكفي لأنك لا تحتاج بديل خط ثابت لأجل توافق المتصفحات. نسبة المستخدمين على متصفح لا يدعم الخطوط المتغيرة أقل من واحد بالمئة في معظم مواقع الإنتاج. وفّر بديل خط نظام لتلك الحالة الهامشية، وليس حزمة خطوط ثابتة.
كيف يعمل التقسيم الفرعي للخط المتغير؟
يزيل التقسيم الفرعي من ملف الخط الرموز التي لن يعرضها محتواك أبدًا، باستخدام أداة مثل pyftsubset من مكتبة Python fonttools. تحدد نطاقات أحرف unicode التي تحتاجها، وتزيل الأداة كل ما عداها. قد يشحن الخط المتغير الكامل 3,000 رمز. والمجموعة اللاتينية فقط تُبقي نحو 250. النتيجة ناتج بصري مطابق للمحتوى اللاتيني بنحو ثلث حجم الملف. راجع مدخل التقسيم الفرعي في المسرد للمرجع الكامل للأوامر.
التحول الذي تفتحه الخطوط المتغيرة فعلًا
الخطوط المتغيرة ليست فضولًا طباعيًا. إنها طريقة لشحن تعبير أكثر ببايتات أقل، والفرق التي تعاملها كأداة إنتاج هي التي تقدم طباعة أفضل بتكلفة شبكة أقل.
إن بنية متغيرات Figma التي تقود أنظمة التصميم الحديثة تتطابق بشكل طبيعي مع محاور الخط المتغير. فرمز font-weight في Figma هو قيمة محور في الخط. اقرن نظام رموز جيد البنية بخط متغير مقسّم فرعيًا بشكل سليم فتحصل على قرارات تصميم تنتقل من ملف التصميم إلى الإنتاج بلا غموض. واقرن ذلك بنظام ألوان OKLCH في حالات المرور بالمؤشر فتبني تفاعلات منتج تبدو مدروسة لا مجمّعة.
المعيار للخطوط المتغيرة في الإنتاج ليس "هل شحنا خطًا متغيرًا". المعيار هو تقسيم فرعي صحيح، وpreload سليم، ومقاييس بديل مطابقة، ومحاور يستخدمها التصميم فقط. هذا هو المعيار الذي يفصل الفرق التي تمارس الطباعة في الإنتاج عن الفرق التي تمارس مسرح الطباعة.
تريد خطوطًا متغيرة تُشحن بنصف البايتات ولا تزعزع الصفحة أبدًا؟ وظّف Brainy وسنشحن لك حزمة الطباعة للإنتاج بالمحاور الصحيحة والمجموعات الفرعية الصحيحة ووصفة التحميل التي تُبقي Lighthouse أخضر.
Want variable fonts that ship at half the bytes and never jank the page? Brainy ships production typography stacks with the right axes, the right subsets, and the loading recipe that keeps Lighthouse green.
Get Started
