الدليل

شرح موجز لما تفعله شيفرة CSS المولَّدة ولماذا تمنع النص من القفز عند وصول خط الويب.

لماذا تُحدث الخطوط انزياحًا في التخطيط

أثناء تحميل خط الويب يرسم المتصفح النص بخط احتياطي. وعند وصول خط الويب يُعاد رسم النص: فإن كانت أشكال الحروف أعرض أو الأسطر أطول، التفّت الأسطر بشكل مختلف وتحرك كل ما تحتها. تقيس Google ذلك باسم Cumulative Layout Shift (CLS): القيمة 0.1 أو أقل جيدة، وما فوق 0.25 ضعيف. وجعل الخط الاحتياطي مطابقًا لمقاييس خط الويب يُبقي الأسطر في أماكنها.

واصفات @font-face التي نولّدها

كل خط احتياطي هو خط نظام local() يُصرَّح عنه بواصفات تعيد تحجيمه: يغيّر size-adjust حجم أشكال الحروف ليكون عرض النص نفسه، وتضبط ascent-override وdescent-override وline-gap-override المقاييس العمودية ليكون ارتفاع الأسطر نفسه. تسرد مجموعة font-family خط الويب أولًا ثم الخطوط الاحتياطية المضبوطة ثم عائلة عامة.

@font-face {
  font-family: "Inter Fallback Arial";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF;
}

body {
  font-family: "Inter", "Inter Fallback Arial", sans-serif;
}

أول إصدار من المتصفح يدعم كل ميزة (MDN browser-compat-data 8.1.5)
الواصفة	Chrome	Edge	Firefox	Safari
`size-adjust`	92	92	92	17
`ascent-override`	87	87	89	—
`descent-override`	87	87	89	—
`line-gap-override`	87	87	89	—
`font-size-adjust`	127	127	3	16.4
`unicode-range`	1	12	36	3.1

— تعني غير مدعوم، و? تعني غير معروف. تتجاهل المتصفحات التي تفتقر إلى واصفة ما تلك الواصفة ببساطة، لذا فإن CSS آمن في كل مكان.

Safari والتجاوزات العمودية

يدعم Safari الواصفة size-adjust (منذ الإصدار 17) لكنه لا يدعم ascent-override ولا descent-override ولا line-gap-override. لهذه المتصفحات يضيف المولِّد font-size-adjust الذي يطابق ارتفاع الحرف x في خط الويب، وline-height ثابتًا يجعل صندوق السطر مستقلًا عن مقاييس الخط الاحتياطي.

unicode-range

لا يُستخدم الوجه الذي له unicode-range إلا للنقاط الرمزية المذكورة. وحصر الخطوط الاحتياطية المضبوطة في الحروف التي يغطيها خط الويب يمنع انطباق الضبط على أشكال حروف لن يرسمها خط الويب أبدًا. تُضغط النطاقات دون فقد (تُدمج النقاط الرمزية المتجاورة) وتطابق المجموعات الفرعية التي تستخدمها Google Fonts.

صيغ الخطوط

استخدم WOFF2 للويب: فهو الأصغر حجمًا وتدعمه كل المتصفحات الحالية. وتعمل ملفات WOFF وTrueType (TTF) وOpenType (OTF) أيضًا مع @font-face. أما مجموعات الخطوط (TTC وOTC) فلا يمكن استخدامها مباشرة في المتصفح، لذا تقسّمها هذه الأداة إلى خطوط منفصلة.

تراخيص الخطوط

ملف الخط برمجية، ويحدد ترخيصه ما إذا كان يحق لك وضعه على موقع إلكتروني. لا تشير شيفرة CSS المولَّدة إلا إلى خطوط مثبّتة أصلًا على نظام الزائر (local())، لكن خط الويب الذي تقدّمه يجب أن يكون مرخَّصًا لذلك:

رخصة SIL Open Font License (OFL): مجانية للاستخدام والتضمين، ولا يجوز بيع الخط وحده.
رخصة Apache 2.0: مجانية للاستخدام والتضمين مع إشعار الرخصة.
رخصة Ubuntu Font Licence (UFL): مجانية للاستخدام والتضمين، ويجب تغيير اسم النسخ المعدَّلة.
غالبًا لا تشمل التراخيص التجارية وتراخيص سطح المكتب التضمين في الويب: تحقّق من وجود ترخيص ويب منفصل.

نص الترخيص ورابطه موجودان في جدول الأسماء في الخط (معرّفا الاسم 13 و14) وأذونات التضمين في جدول OS/2 (fsType). اقرأ الترخيص دائمًا من مصدر الخط أيضًا.