CSS/@font-face

القاعدة ‎@font-face في CSS تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا محدودين ببعض الخطوط المثبتة على حاسوب الزوار.

@font-face {
    /* تعليمات تعريف الخط الجديد */
}

أمثلة

كما سنذكر في قسم «البنية العامة»، يجب تحديد قيمة للواصف font-family و src على الأقل لتعريف القاعدة ‎@font-face كما في المثال الآتي:

@font-face {
  font-family: 'Graublau Web';
  src:  url('GraublauWeb.eot?') format('eot'), 
        url('GraublauWeb.woff') format('woff'), 
        url('GraublauWeb.ttf') format('truetype');
}

يُحدِّد الواصف font-family ما هو اسم نوع الخط الذي يمكن أن يستعمل مع الخاصية font-family لتنسيق عناصر الصفحة:

body {
    font-family: "Grablau Web", sans-serif;
}

إضافةً إلى الواصف font-family و src، يمكن تعريف معلومات إضافية عن نسخة الخط المستخدمة، فمثلًا إذا أردنا تعريف نوع خطوط له عدِّة نسخ وأوزان، فيمكننا استخدام الواصفات font-style و font-weight كما في المثال الآتي، لاحظ استخدام الدالة local()‎، مما يطلب استخدام النسخة المحلية من خط Open Sans إذا كان مثبتًا على حاسوب المستخدم (سنجرِّب اسمين مختلفين شائعين لهذا الخط) ثم سننزِّل الخط إن لم يكن متاحًا على حاسوب المستخدم :

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(OpenSans.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(OpenSans-Bold.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(OpenSans-Italic.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(OpenSans-BoldItalic.woff) format('woff');
}

عرّفنا في المثال السابق شكل الخط ووزنه لكل نسخة منه، وهذا يسمح لنا باستخدام مختلف أشكال font-style وأوزان font-weight الخط في الصفحة:

h1 {
    font: 700 italic 'Open Sans', sans-serif;
}

p {
    font-family: 'Open Sans', sans-serif;
}

p .note {
    font-style: italic;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0	3.5	4.0	10.0	3.1
WOFF	6.0	3.5	9.0	11.10	5.1
WOFF2	38	39	غير مدعومة	24	غير مدعومة
خطوط SVG	مدعومة	غير مدعومة	غير مدعومة	مدعومة	مدعومة

جميع الخطوط مدعومة في متصفح Edge ما عدا خطوط SVG.

البنية العامة

تقبل القاعدة ‎@font-face الواصفات (descriptors) التالية.

font-family

يسمح لنا الواصف font-family بتحديد اسم نوع الخط في قاعدة ‎@font-face. يجب استخدام هذا الواصف في قاعدة ‎@font-face، ويقبل سلسلةً نصيةً أو مُعرِّفًا خاصًا كما في المثال الآتي:

/* <string> سلاسل نصية */
font-family: "font family";
font-family: 'another font family';

/* <custom-ident> معرِّفات خاصة */
font-family: examplefont;

src

يُحدِّد هذا الواصف مصدر البيانات التي تحتوي على معلومات الخط. ويجب استخدام هذا الواصف في قاعدة ‎@font-face.

يمكن تحديد قائمة بمصادر الخط مفصولٌ بينها بفاصلة، ويكون لأوّل قيمة الأولوية على بقية القيم؛ وإذا احتوى الخط على بيانات غير صالحة أو لم يستطع المتصفح العثور عليه فسيتجاهله وسيحمِّل ما يليه من خطوط.

وكما في بقية روابط URL في CSS، يمكن أن يكون رابط URL نسبيًا، وسيشير إلى مكان الملف نسبةً إلى مسار ملف CSS الذي يحتوي على قاعدة ‎@font-face.

يقبل هذا الواصف قيمتين من القيم الآتية.

رابط URL

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

<url> [ format( <string># ) ]?

اسم خط محلي

تحديد اسم خط مثبت محليًا على جهاز المستخدم باستخدام الدالة local()‎، مما يُعرِّف إحدى نسخ الخط ضمن نوع الخط، ويمكن تضمين اسم الخط اختياريًا بين علامتَي اقتباس.

local(<family-name>) ]#

أمثلة

أمثلة عن تحديد المورد الخارجي باستخدام رابط URL، إذ إنَّ أوّل سطر فيه رابط URL مطلق، وثاني سطر فيه رابط URL نسبي، أما ثالث سطر فحددنا فيه الصيغة بوضوح (فإن لم يدعم المتصفح هذه الصيغة فلن ينزل الخط وسينتقل إلى ما بعده)، وفي آخر سطر وضعنا رابط URL بين علامتَي اقتباس:

src: url(https://somewebsite.com/path/to/font.woff);
src: url(path/to/font.woff);
src: url(path/to/font.woff) format("woff");
src: url('path/to/font.woff');

أمثلة عن تحديد اسم خط مثبت محليًا على جهاز المستخدم باستخدام الدالة local()‎:

src: local(font);
src: local(some font);
src: local("font");

مثال عن تحديد أكثر من قيمة معًا:

src: local(font), url(path/to/font.svg) format("svg"),
    url(path/to/font.woff) format("woff"),
    url(path/to/font.otf) format("opentype");

font-variant

راجع الخاصية font-variant.

font-stretch

راجع الخاصية font-stretch.

font-weight

راجع الخاصية font-weight.

font-style

راجع الخاصية font-style.

البنية الرسمية

@font-face {
  [ font-family: <string>; ] ||
  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}

لا يجوز تعريف القاعدة ‎@font-face داخل مُحدِّد من مُحدِّدات CSS، فالمثال الآتي لن يعمل:

.className { 
  @font-face { 
    font-family: MyHelvetica; 
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold; 
  } 
}

أنواع الخطوط

تدعم المتصفحات القاعدة ‎@font-face دعمًا جيدًا، لكن تسمح لك باستخدام بعض صيغ الخطوط فقط. هذه شرحٌ بسيطٌ عن هذه الصيغ.

WOFF

صيغة خطوط ويب طورتها شركة Mozilla، يرمز اسمها إلى Web Open Font Format. ووفقًا للمواصفة هذه الصيغة مصممة لضغط بيانات الخطوط بسهولة ودون استهلاك الموارد، وهي مناسبة لاستخدامها مع قاعدة ‎@font-face، ويمكن تحزيم أي خط TrueType أو OpenType إلى صيغة WOFF لاستعماله في الويب (إن سمحت رخصة الخط بذلك).

ليس الغرض من صيغة WOFF استبدال صيغة الخطوط الأخرى مثل TrueType و OpenType، لكنها توفِّر حلًا بديلًا في الحالات التي لا يكون استخدام هذه الصيغ مناسبًا.

يبدو أنَّ هذه الصيغة هي أفضل الصيغ المتوافرة للويب، وتتجه المتصفحات كلها إلى دعمها.

EOT

طورتها شركة Microsoft، ويرمز اسمها إلى Embedded Open Type، ووفقًا للمواصفة، هذه الصيغة طورِّت لتمكين ربط خطوط TrueType و OpenType مع صفحات الويب لتنزيلها وعرضها، وهذه هي الصيغة الوحيدة التي يدعمها IE8 وما قبله من الإصدارات.

OTF و TTF

صيغة OpenType هي صيغة خطوط التي تتضمن ميزات احترافية توفِّر تحكمًا دقيقًا بعرض الحروف، وهي أحدث من صيغة TrueType وفيها ميزات غير موجودة في TrueType.

SVG

لم يعد استخدام هذه الخطوط مستحسنًا في الويب، وبدأت المتصفحات التي تدعمها بالتخلي عن دعمها.

خدمات توفير الخطوط

هنالك عدِّة خدمات توفِّر قائمةً طويلةً بالخطوط التي تستطيع أن تختار منها ما يناسب تصميم صفحتك، وهذه الخدمات تسمح لك باستخدام الخطوط بشكل قانوني، وتتكفل بموضوع تخديم ملفات الخط.

من أشهر تلك الخدمات Google Fonts، التي توفِّر عددًا لا بأس من به من الخطوط العربية، وخدمة Typekit من Adobe.

مصادر ومواصفات

• مواصفة CSS Fonts Module Level 3.