تعلم تطوير الويب استخدام خطوط الكتابة في الويب مع CSS

تحدثنا في مقال سابق عن التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS، وسنتعمق في مقالنا هذا في استكشاف خطوط الكتابة المستخدمة في الويب وتفاصيلها، وكيفية استخدام خطوط مخصصة في صفحاتك لتجعلها أكثر تنوعًا وخصوصية.

ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS.

مراجعة سريعة لعائلات خطوط الكتابة

يمكن التحكم بالخط المستخدم في كتابة محتوى HTML باستخدام الخاصية font-family التي تأخذ اسم عائلة خط واحد أو أكثر كقيم لها. وبهذا يبحث المتصفح عند عرض صفحة الويب ضمن قائمة الخطوط المتوفرة في نظام التشغيل حتى يجد العائلة المطلوبة:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

تعمل هذه الطريقة دون مشاكل، لكن خيارات المطورين محدودة عادةً؛ فهنالك عدد محدود جدًا من الخطوط التي يمكن أن تضمن وجودها في جميع أنظمة التشغيل والتي تُعرف بخطوط الويب الآمنة. لهذا بإمكانك وضع قائمة من الخطوط التي تشاء تتبعها بالبدائل الآمنة ومن ثم الخط الافتراضي لنظام التشغيل، لكن سيزيد ذلك طبعًا حمل العمل نظرًا للاختبارات المطلوبة للتأكد من عمل تصميمك وفقًا لكل خط تضعه.

خطوط الويب

هناك بديلٌ يعمل جيدًا ويعتمد على CSS التي تسمح بتخصيص ملفات لخطوط كتابة تجدها على الويب، بحيث يمكنك تنزيلها واستخدامها مع موقعك، ويعني ذلك أن جميع المتصفحات التي تدعم ميزة CSS هذه ستعرض المحتوى بالخط الذي اخترته تمامًا.

نستخدم أولًا الخاصية @font-face في بداية ملف CSS، وتحدد ملف أو ملفات الخطوط التي ينبغي تنزيلها:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

ثم نستخدم بعد ذلك اسم عائلة الخط التي خصصناها ضمن font-face@ كي نطبق الخط المخصص أينما نشاء وبالطريقة التقليدية:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

قد تغدو هذه الطريقة أعقد قليلًا، وهذا ما سنناقشه تاليًا.

إليك بعض النقاط المهمة التي ينبغي تذكرها جيدًا:

1. لا تكون ملفات الخطوط مجانية غالبًا، وعليك أن تدفع ثمنها أو أن تخضع لشروط رخصة الاستخدام كأن تشير إلى صاحب الخط في شيفرتك أو موقعك، لهذا لا تحاول سرقة الخطوط واستخدامها دون الإشارة الواضحة إلى مصدرها.
2. تدعم كل المتصفحات الرئيسية ملفات الخطوط من نوع WOFF/WOFF2 (خطوط ويب مفتوحة التنسيق بنسختيها الأولى والثانية)، وتدعم كذلك المتصفحات الأقدم مثل IE9 (المنتشر منذ عام 20111) ملفات الخطوط WOFF.
3. تدعم خطوط WOFF2 مواصفات TrueType و OpenType كاملةً بما في ذلك الخطوط المتغيرة variable fonts والخطوط الملونة chromatic fonts ومجموعات الخطوط font collections.
4. طريقة ترتيب ملفات الخطوط مهمة، فلو زوّدت المتصفح بعدة ملفات للخطوط كي ينزّلها، سيختار المتصفح أول ملف قادر على تفسيره، لهذا لا بُد من وضع الخطوط التنسيقات المفضّلة في البداية -أي WOFF2- تليها التنسيقات الأقدم. فعندما لا يفهم المتصفح تنسيقًا، سينتقل إلى التنسيق الذي يليه في القائمة.
5. إذا أردت العمل مع المتصفحات القديمة، عليك تضمين التنسيق EOT (النمط المفتوح المضمّن Embedded Opentype) أو التنسيق TrueType Font
   -أو اختصارًا TTF- أو تنسيق SVG. وسنتعلم في هذا المقال استخدام Fontsquirrel Webfont Generator للحصول على الملفات المطلوبة.

ملاحظة يمكنك استخدام محرّر خطوط فايرفوكس Firefox Font Editor لفحص وتغيير الخطوط المستخدمة في صفحتك فيما ومعرفة إن كانت خطوط ويب صالحة أم لا.

تطبيق عملي: مثال عن استخدام خطوط ويب

سنحاول بناء مثال توضيحي عن استخدام خطوط ويب. من الصعب طبعًا توضيح ذلك من خلال مثال تفاعلي مدمج، لهذا نطلب منك اتباع الخطوات التي نوردها تاليًا كي تفهم فكرة العملية.

حمّل الملفين web-font-start.html و web-font-start.css واستخدمهما بمثابة نقطة انطلاق، ثم ضِف شيفرتك ضمنها (اطلع على المثال المباشر). انسخ الملفين السابقين إلى مجلد جديد على حاسوبك. ستجد في الملف بعض قواعد CSS التي تنسّق التخطيط الأساسي وتنسيق الكتابة في المثال.

إيجاد خطوط للكتابة

نستخدم في مثالنا خطين من خطوط الويب، أولهما للعناوين والآخر لمتن الصفحة، وعلينا بدايةً إيجاد الملفات التي تضم هذه الخطوط. تُصنع الخطوط من قبل مختصين وتُخزّن ضمن ملفات بتنسيقات مختلفة، وستجد الخطوط ضمن المواقع التالية عمومًا:

• موزعي الخطوط المجانية: وهي مواقع تتيح للمستخدمين تنزيل خطوط مجانية (مع وجود بعض شروط لترخيص الاستخدام أحيانًا، كأن تشير إلى مصمم الخط). من هذه المواقع نجد: Font Squirrel, [dafont و Everything Fonts.
• موزعي الخطوط المدفوعة: وهي مواقع تقدم خطوطًا مدفوعة الثمن مثل fonts.com أو myfonts.com ، ويمكنك أيضًا شراء الخطوط من منتجيها مباشرةً، مثل Linotype، أو Monotype، أو Exljbris.
• خدمات خطوط الكتابة عبر الإنترنت: وهي مواقع تخزّن الخطوط وتسمح لك باستخدامها، مما يسهل العملية برمتها.

ابحث الآن عن بعض الخطوط في موقع Font Squirrel وانتقي خطين الأول للعناوين (لا بأس بالخطين nice display أو slab serif font) والآخر أقل لمعانًا وأوضح قراءةً للفقرات. انقر على زر التنزيل عندما تجد الخطوط المناسبة وخزّن الملفات ضمن المجلد نفسه الذي وضعت فيه ملفات الشيفرة. لا تكترث إذا كانت الملفات بتنسيق TTF أو تنسيق Open Type Fonts -أو اختصارًا OTF.

فُكَّ ضغط الملفات من حزمتي الخطوط، إذ توزّع ملفات الخطوط عادةً مثل ملفات مضغوطة ZIP تضم ملفات الخطوط ومعلومات الترخيص. وقد تجد ضمن الحزمة أكثر من خط، إذ توزّع بعض الخطوط مثل عائلة واحدة مع عدة توزيعات، مثل الخط الرفيع أو النحيف thin والمتوسط medium والغامق bold والمائل italic والمائل النحيف thin italic وهكذا. ولا نريد منك في هذا التطبيق سوى اختيار خطين مناسبين.

ملاحظة: يمكنك في موقع Font Squirrel أن تختار الخطوط من خلال الفئات المتوفرة تحت قسم "إيجاد الخطوط Find fonts" كي تقلل عدد الخيارات المتاحة.

توليد الشيفرة المطلوبة

نحتاج الآن إلى توليد الشيفرة اللازمة وتنسيقات الخط، لهذا اتبع التعليمات التالية لكل خط:

1. تأكد من أنك حققت متطلبات الترخيص، إذا كنت ستستخدم الخط في مشروع تجاري أو مشروع ويب.
2. انتقل إلى موّلد خطوط الويب Webfont Generator من Fontsquirrel.
3. ارفع ملفات الخطوط باستخدام زر "Upload Fonts".
4. فعّل زر التحقق الذي يحمل العنوان "Yes, the fonts I'm uploading are legally eligible for web embedding".
5. انقر زر "Download your kit" لتنزّل مجموعتك.

بعد إكمال المولّد معالجة الملفات، ينبغي أن تكون الملفات جاهزة للتنزيل بتنسيق ZIP، نزّلها في نفس مجلد CSS و HTML، وإذا أردت دعم المتصفحات القديمة، اختر النمط "خبير Expert" في موّلد خطوط ويب، ثم اختر التنسيقات SVG و EOT و TTF قبل تنزيل المجموعة.

تحدد خدمات ويب التي تولّد الخطوط حجمًا محددًا للملفات، لهذا فكّر باستخدام أحد الأدوات التالية:

1. sfnt2woff-zopfli للتحويل من ttf إلى woff.
2. fontforge للتحويل من ttf إلى svg.
3. batik ttf2svf للتحويل من ttf إلى svg.
4. woff2 للتحويل من ttf إلى woff2.

استخدام الشيفرة في مثالنا

استخرج الملفات من الملف المضغوط الذي نزّلته، وستجد ضمن المجلد الناتج العناصر المفيدة التالية:

• نسختين من كل خط على شكل ملفين يحملان اللاحقتين woff. و woff2.
• ملف HTML تجريبي لكل خط. حمّل هذه الملفات في متصفحك لترى كيف سيبدو الخط في السياقات المختلفة.
• ملف تنسيق stylesheet.css يضم شيفرة font-face@ الموّلدة والتي تحتاجها.

لاستخدام الخطوط في مثالك، اتبع الخطوات التالية:

1. أعد تسمية المجلد المستخرج من الملف المضغوط باسم بسيط سهل التذكر مثل "fonts".
2. افتح الملف "stylesheet.css" وانسخ القاعدة font-face@ إلى ملف التنسيق "web-font-start.css" الذي أنشأته، وتذكر أن تكون في أعلى الملف وقبل أي قاعدة CSS أخرى، إذ لا بد من إدراج الخطوط قبل أن تتمكن من استخدامها في موقعك.
3. تشير كل دالة من الدوال ()url إلى ملف خط نريد إدراجه ضمن ملف CSS، ولا بد من التأكد من صحة المسار إلى ملف الخط المطلوب، لهذا أضِف العبارة /fonts قبل بداية كل مسار (عدّل ما تراه مناسبًا).
4. يمكنك الآن استخدام هذه الخطوط مثل أي خط ويب آمن أو خط من خطوط نظام التشغيل. إليك مثالًا:

@font-face {
  font-family: "zantrokeregular";
  src:
    url("fonts/zantroke-webfont.woff2") format("woff2"),
    url("fonts/zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

font-family: "zantrokeregular", serif;

ينبغي أن ينتهي بك المطاف إلى صفحة تجريبية تعرض بعض الخطوط الجميلة، ولأن الخطوط المختلفة قد صُممت بقياسات مختلفة، قد يكون عليك تعديل حجمها والفراغات فيما بين الأحرف والكلمات.

ملاحظة: إذا واجهتك أية مشاكل في تنفيذ الأمر بالشكل الصحيح، قارن بين نسختك مع ملفاتنا المكتملة web-font-finished.html و web-font-finished.css. كما يمكنك تحميل الشيفرة من غيت هب GitHub أو تشغيل المثال المنتهي مباشرةً.

استخدام خدمات خطوط الكتابة عبر الإنترنت

تخزّن خطوط الكتابة عبر الإنترنت خطوط الكتابة وتقدمها لك دون الحاجة إلى استخدام شيفرة font-face@ فكل ما يتطلبه الأمر عادةً هو إدراج سطر بسيط أو اثنين من الشيفرة ضمن موقعك حتى يعمل كل شيء على ما يرام. من الأمثلة على هذه الخدمات نجد Adobe Fonts و Cloud.typography. تعتمد معظم هذه الخدمات على مبدأ الاشتراك ما عدا Google Fonts فهو استثناء عنها كونه خدمة مجانية وخاصة لأعمال الاختبارات السريعة وكتابة الأمثلة التوضيحية Demos.

من السهل استخدام معظم هذه الخدمات، لهذا لن نتحدث عنها مطوّلًا، بل سنلقي نظرة على خدمة Google Fonts كي تفهم الفكرة. استخدم لهذا الغرض الملفين "web-font-start.html" و "web-font-start.css" أيضًا بمثابة نقطة انطلاق.

1. انتقل موقع Google Fonts.
2. ابحث عن خط الكتابة الذي تفضله، أو استخدم المرشحات filters أعلى الصفحة لعرض أنواع الخطوط التي ترغب في انتقاء بعضها، ثم اختر خطين منها.
3. لاختيار عائلة خط، انقر على زر العرض ثم انقر على الزر ⊕ إلى جانب الخط.
4. عندما تختار عائلات الخطوط، انقر على زر عرض عائلات الخطوط المختارة "View your selected families" في أعلى يمين الصفحة.
5. انسخ سطر HTML الذي يظهر على الشاشة ثم الصقه في ترويسة ملف HTML. ضعه فوق العنصر <link> الموجود أصلًا كي يجري إدراج الخط قبل أن تستخدمه بواسطة CSS.
6. عليك الآن نسخ تصريحات CSS الموجودة ضمن ملف CSS كما تراه ملائمًا حتى تُطبّق الخط على عناصر HTML.

ملاحظة: ستجد نسخةً مكتملةً على google-font.html و google-font.css إذا أردت التحقق من نسختك بالمقارنة مع نسختنا (ألق نظرةً على عملها).

تفاصيل أكثر عن قاعدة font-face@

لنستكشف صياغة font-face@ التى ولّدها موقع Fontsquirrel، ستبدو إحدى مجموعات القواعد على النحو التالي:

@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

لنرى ما هو دور كل تصريح:

• font-family: يُخصّص هذا التصريح لاختيار اسم مناسب يشير إلى الخط، وقد يكون أي شيء تريده طالما أنك تستخدمه بنفس الطريقة ضمن ملف CSS.
• src: يُخصص هذا التصريح لتحديد المسار إلى موقع ملف الخط الذي تريد إدراجه ضمن شيفرة CSS (الجزء url منه)، ولتحديد تنسيق ملف الخط (الجزء format منه)، أما الجزء الأخر في كل حالة فهو اختياري لكنه تصريح مفيد لأنه يسمح للمتصفحات أن تحدد بسرعة أي خط يمكنها استخدامه. يمكن أن نبني أيضًا قائمةً من التصريحات تفصل بينها الفاصلة ,، ومن المفيد ترتيب هذه التصريحات ابتداءً من التنسيق الأكثر تفضيلًا مثل WOFF2، لأن المتصفح سيحاول تطبيق التصريحات على نحوٍ متسلسل ابتداءً من التصريح الأول.
• font-weight/font-style: يخصص هذان التصريحان سماكة الخط إضافةً إلى كونه مائلًا أو لا؛ فإذا أدرجت عدة سماكات للخط نفسه، يمكنك حينها تخصيص سماكة ونمط محددين ثم استخدام الخاصيتين
• font-weight/font-style للتبديل بين السماكات والأنماط المختلفة الأخرى.

ملاحظة: يمكنك تخصيص قيم محددة للخاصيتين font-variant و font-stretch من أجل خطوط الويب، كما يمكنك -في المتصفحات الحديثة- تخصيص قيمة للخاصية unicode-range وهي مجال محدد من المحارف التي ترغب في استخدامها خارج مجموعة محارف خط الويب وذلك في المتصفحات التي تدعم ذلك، وستُنزّل حينها هذه المحارف فقط تحاشيًا لتنزيل ما لا حاجة له.

الخطوط المتغيرة

توجد تقنية جديدة للخطوط تدعمها المتصفحات وتُدعى الخطوط المتغيرة variable fonts، وهي خطوط تسمح بتشارك عدة توزيعات لواجهة خط الكتابة في ملف واحد بدلًا من وجود ملف مستقل لكل اتساع أو سماكة أو نمط. هذا الموضوع متقدم ولن نناقشه في مقالنا.

الخلاصة

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

ترجمة -وبتصرف- لمقال Web fonts.

اقرأ المزيد

• المقال السابق تنسيق الروابط باستخدام CSS.
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التنسيقات الأساسية للعناصر في CSS.
• أساسيات لغة CSS.