CSS @font-face

@font-face هي قاعدة CSS at-rule تُخبر المتصفح أين يجد ملف الخط وكيف يُسمّيه. دُعمت لأول مرة في IE 4 عام 1997، لكنها أصبحت عملية على مستوى المتصفحات حوالي عام 2010 حين وصل WOFF وطبّقت المتصفحات الأخرى القاعدة بشكل متسق.

بالنسبة لخطوط الأيقونات، تُعدّ @font-face الوصلة الرابطة بين ملفات الخطوط وفئات CSS التي تعرض الأيقونات. بدونها، لا تملك المتصفح وسيلة لمعرفة أن font-family: 'MyIcons' يجب أن يُحمّل ملفاً محدداً من خادمك.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

تُعطي الخاصية الوصفية font-family الخط اسماً ستستخدمه لاحقاً. تُخبر الخاصية الوصفية src المتصفح من أين يُنزّل الملف وما تنسيقه. تضمن الخاصيتان الوصفيتان font-weight وfont-style أن المتصفح لن يحاول توليد صيغ عريضة أو مائلة. وتتحكم font-display فيما يحدث أثناء تحميل الخط.

يُخبر تلميح format() الذي يلي كل URL المتصفَ بالتنسيق الذي يحتويه الملف، كي يتمكن من تخطي التنسيقات غير المدعومة دون تنزيلها أولاً. على مر السنين، تقلّصت مجموعة التنسيقات الموصى بها بشكل كبير مع تحسّن دعم المتصفحات.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

بتغطية 97%+ من المتصفحات، يكفي WOFF2 وحده لغالبية المشاريع الحديثة. إنه أبسط أسلوب وأعلاها أداءً.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

إضافة WOFF كاحتياطي يغطي IE 11 الذي لا يدعم WOFF2. تأخذ المتصفحات الحديثة ملف WOFF2؛ يتراجع IE 11 إلى WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

تتضمن المجموعة الكاملة "المضادة للرصاص" EOT لـ IE 6-8، وWOFF2 للمتصفحات الحديثة، وWOFF لـ IE 9-11، وTTF كاحتياطي نهائي. يجرّب المتصفح كل إدخال src بالترتيب ويستخدم أول تنسيق يفهمه. هذا الأسلوب ضروري فقط للمشاريع ذات متطلبات الإرث القصوى.

النمط المعياري لخطوط الأيقونات يستخدم فئة أساسية تضبط font-family وأنماط التصيير المشتركة، ثم فئات أيقونات فردية تستخدم العناصر الزائفة ::before مع content مضبوطة على نقطة كود Unicode لكل أيقونة.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

تُعيد الفئة الأساسية ضبط تنسيق الخط لمنع المتصفح من تطبيق خط عريض أو مائل أو تحويلات أخرى قد تُشوّه الأيقونات. تُفعّل خصائص -webkit-font-smoothing و-moz-osx-font-smoothing مضادات الحواف للتصيير الأحد في macOS وiOS.

تضبط كل فئة أيقونة عنصراً زائفاً ::before بنقطة كود Unicode المخصصة لذلك الحرف الرسومي. الترميز بالشرطة المائلة العكسية (\E001) هو طريقة CSS للإشارة إلى حرف Unicode برمزه السداسي عشر.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

كلا العنصرَين <i> و<span> يعملان بالقدر ذاته من الكفاءة. العنصر نفسه فارغ — تُصيَّر الأيقونة بالكامل بواسطة العنصر الزائف ::before.

تتحكم الخاصية الوصفية font-display فيما يعرضه المتصفح بينما لا يزال ملف الخط يُنزَّل. هذا أمر بالغ الأهمية لخطوط الأيقونات لأن الإعداد الخاطئ قد يجعل الأيقونات غير مرئية أثناء تحميل الصفحة.

بالنسبة لخطوط الأيقونات، swap هو الخيار الموصى به. وميض وجيز للمحتوى غير المنسَّق (حيث قد تظهر نقاط كود الأيقونات كمربعات أو مسافات فارغة) أفضل بكثير من الأيقونات غير المرئية. مع block، قد يرى المستخدمون مساحة فارغة حيث يجب أن تكون الأيقونات لمدة تصل إلى 3 ثوانٍ على الاتصالات البطيئة — مما يبدو كصفحة معطوبة. مع swap، تظهر الأيقونات بمجرد تحميل الخط، والانتقال غير ملحوظ عادةً على الاتصالات الحديثة.

ملفات الخطوط تحجب التصيير افتراضياً — لن يرسم المتصفح النص بخط مخصص حتى يكتمل تنزيل الملف. إليك تقنيات لتقليل هذا التأثير:

• التحميل المسبق لملف الخط — استخدم <link rel="preload"> لبدء تنزيل الخط في أقرب وقت ممكن، قبل أن يُحلّل المتصفح CSS الذي يُشير إليه.
• استضافة الخطوط ذاتياً — تقديم ملفات الخطوط من المصدر ذاته كـ HTML يتجنب عمليات بحث DNS الإضافية وإعداد الاتصال، ويُزيل مشكلات CORS.
• تجزئة الخط — أزل الأيقونات غير المستخدمة لتقليل حجم الملف. خط من 500 أيقونة تستخدم منها 50 فقط يُهدر 90% من التنزيل.
• استخدام unicode-range — إذا كان لديك مجموعات أيقونات متعددة، تُخبر هذه الخاصية الوصفية المتصفح بتنزيل ملف الخط فقط عند استخدام الحروف في النطاق المحدد فعلياً في الصفحة.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

خاصية crossorigin مطلوبة حتى للخطوط ذات المصدر ذاته — هذه سمة غريبة في مواصفات تحميل الخط. بدونها، يُنزّل المتصفح الخط مرتين: مرة من تلميح preload (بدون CORS) ومرة من قاعدة @font-face (مع CORS).

• أخطاء CORS — ملفات الخط المقدَّمة من مصدر مختلف (مثل نطاق CDN الفرعي) تحتاج رؤوس Access-Control-Allow-Origin على الخادم. بدلاً من ذلك، استخدم خاصية crossorigin على العلامة <link>. بدون تكوين CORS صحيح، يحجب المتصفح الخط بصمت.
• تظهر الأيقونات كمربعات أو مستطيلات — يعني هذا عادةً أن مسار ملف الخط خاطئ، أو أن الخط لم يُحمَّل بعد، أو أن اسم font-family في فئة الأيقونة لا يطابق الاسم في إعلان @font-face. تحقق من علامة تبويب الشبكة في متصفحك للتأكد من تحميل ملف الخط بالحالة 200.
• تعرض الأيقونات حروفاً رسومية خاطئة — تعارض نقطة كود Unicode مع خطوط النظام. إذا كان خط الأيقونات يستخدم نقاط كود في نطاقات تتداخل مع خطوط النظام الشائعة، فقد يُصيّر المتصفح حرف نظام بدلاً من الأيقونة. تستخدم خطوط الأيقونات عادةً منطقة الاستخدام الخاص (U+E000 إلى U+F8FF) لتجنب ذلك.