قاعدة font-face في CSS: استراتيجيات تحميل الخطوط المخصصة وتحسينها لتصميم الويب العالمي

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

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

فهم قاعدة @font-face

قاعدة @font-face هي قاعدة قوية في CSS تسمح لك بتحديد ملفات خطوط مخصصة ليتم تنزيلها واستخدامها على موقعك. إنها في الأساس تسد الفجوة بين مجموعة محدودة من خطوط النظام وعالم الطباعة المخصصة الواسع.

إليك الصيغة الأساسية:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

لنفصل المكونات:

• font-family: تحدد هذه الخاصية الاسم الذي ستستخدمه للإشارة إلى الخط المخصص في قواعد CSS الخاصة بك. اختر اسمًا وصفيًا وفريدًا.
• src: تحدد هذه الخاصية موقع ملفات الخطوط. يمكنك توفير مصادر متعددة، مما يسمح للمتصفح باختيار التنسيق الأمثل بناءً على قدراته. تشير دالة format() إلى تنسيق الخط لكل ملف.
• font-weight: تحدد هذه الخاصية وزن (سماكة) الخط. تشمل القيم الشائعة normal, bold, lighter, bolder, والقيم الرقمية مثل 100, 400, 700, إلخ.
• font-style: تحدد هذه الخاصية نمط الخط (على سبيل المثال، normal, italic, oblique).

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

            body {
  font-family: 'MyCustomFont', sans-serif;
}
            

              
                Copy
              
            
          

سيؤدي هذا إلى تطبيق 'MyCustomFont' على كامل محتوى موقعك. sans-serif هو خط احتياطي سيتم استخدامه في حالة فشل تحميل الخط المخصص.

اختيار تنسيقات الخطوط المناسبة: منظور عالمي

تدعم المتصفحات المختلفة تنسيقات خطوط مختلفة. لضمان توافق واسع، من الضروري توفير خطوطك بتنسيقات متعددة. إليك تفصيل لتنسيقات الخطوط الشائعة ودعم المتصفحات لها:

• WOFF2 (Web Open Font Format 2): التنسيق الأحدث والأكثر توصية، حيث يوفر ضغطًا وأداءً فائقين. مدعوم من قبل جميع المتصفحات الحديثة.
• WOFF (Web Open Font Format): تنسيق مدعوم على نطاق واسع يوفر ضغطًا جيدًا. لا يزال ذا صلة للمتصفحات القديمة.
• EOT (Embedded Open Type): مصمم خصيصًا لـ Internet Explorer. بشكل عام لم تعد هناك حاجة إليه إلا إذا كنت بحاجة ماسة لدعم إصدارات قديمة جدًا من IE.
• TTF (TrueType Font) / OTF (OpenType Font): تنسيقات أقدم تكون بشكل عام أكبر حجمًا وأقل تحسينًا للاستخدام على الويب. تجنب استخدامها مباشرة كلما أمكن ذلك.
• SVG Fonts: تنسيق قديم، لا يُستخدم بشكل متكرر اليوم بسبب دعم المتصفحات والقيود الأخرى.

توصية: استخدم WOFF2 كتنسيق أساسي، وقدم WOFF كبديل للمتصفحات القديمة. فكر في EOT فقط إذا كنت بحاجة لدعم إصدارات قديمة جدًا من Internet Explorer.

إليك مثال على توفير تنسيقات خطوط متعددة في قاعدة @font-face:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff'),
       url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

استراتيجيات تحميل الخطوط: التحسين من أجل السرعة وتجربة المستخدم

يمكن أن تؤثر طريقة تحميل خطوطك بشكل كبير على أداء موقعك. إليك العديد من استراتيجيات تحميل الخطوط التي يمكنك استخدامها:

1. تحميل الخطوط الأساسي (السلوك الافتراضي)

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

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

2. استخدام خاصية font-display

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

إليك القيم الممكنة لـ font-display:

• auto: يستخدم المتصفح استراتيجيته الافتراضية لتحميل الخطوط (عادةً FOIT).
• block: يعطي الخط فترة حظر قصيرة وفترة تبديل لا نهائية. يخفي المتصفح النص في البداية، ثم يعرضه عند تحميل الخط. إذا لم يتم تحميل الخط في غضون فترة قصيرة (عادة 3 ثوانٍ)، يتم عرض الخط الاحتياطي.
• swap: يعطي الخط فترة حظر صفرية وفترة تبديل لا نهائية. يعرض المتصفح النص فورًا باستخدام خط احتياطي. بمجرد تحميل الخط المخصص، يتم تبديل النص إلى الخط المخصص. هذا يتجنب FOIT ولكنه قد يؤدي إلى "وميض النص غير المصمم" (FOUT).
• fallback: يعطي الخط فترة حظر قصيرة جدًا وفترة تبديل قصيرة. هذا حل وسط بين block و swap. يخفي المتصفح النص لفترة قصيرة جدًا، ثم ينتقل إلى الخط الاحتياطي إذا لم يتم تحميل الخط المخصص. يستمر في تبديل الخطوط لفترة قصيرة، وبعدها يتوقف ويستخدم الخط الاحتياطي ببساطة.
• optional: يعطي الخط فترة حظر قصيرة للغاية وبدون فترة تبديل. مفيد للخطوط غير الضرورية للعرض الأولي للصفحة (على سبيل المثال، الخطوط المستخدمة في عناصر واجهة المستخدم غير الأساسية).

توصيات:

• لمعظم السيناريوهات، يوفر swap أفضل توازن بين الأداء المتصور والاستقرار البصري. يرى المستخدمون النص على الفور، حتى لو كان مصممًا في البداية بخط احتياطي.
• استخدم fallback إذا كنت ترغب في تقليل FOUT ولكن لا تزال تعطي الأولوية للخط المخصص.
• استخدم optional للخطوط غير الحرجة لمنع الحظر غير الضروري لعرض الصفحة.

مثال على استخدام font-display: swap:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
            

              
                Copy
              
            
          

3. التحميل المسبق للخطوط

يمكن أن يحسن التحميل المسبق للخطوط الأداء عن طريق توجيه المتصفح لتنزيل ملفات الخطوط في أقرب وقت ممكن. يمكن أن يقلل هذا من التأخير المرتبط بتحميل الخطوط، مما يؤدي إلى وقت تحميل متصور أسرع.

استخدم وسم <link rel="preload"> في <head> لمستند HTML الخاص بك لتحميل الخطوط مسبقًا:

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

              
                Copy
              
            
          

الشرح:

• rel="preload": يحدد أنه يجب تحميل المورد مسبقًا.
• href: يحدد عنوان URL لملف الخط.
• as="font": يحدد نوع المورد الذي يتم تحميله مسبقًا (في هذه الحالة، خط).
• type="font/woff2": يحدد نوع MIME لملف الخط.
• crossorigin: مطلوب إذا تم تحميل الخط من أصل مختلف (على سبيل المثال، CDN).

تحذير: يمكن أن يؤثر التحميل المسبق للعديد من الموارد سلبًا على الأداء. قم فقط بالتحميل المسبق للخطوط الضرورية للعرض الأولي للصفحة.

4. واجهة برمجة تطبيقات تحميل الخطوط (متقدم)

توفر واجهة برمجة تطبيقات تحميل الخطوط (Font Loading API) مستوى أكثر دقة من التحكم في تحميل الخطوط. تسمح لك باكتشاف وقت تحميل الخط، وتتبع تقدم التحميل، ومعالجة الأخطاء. يمكن أن يكون هذا مفيدًا لتنفيذ استراتيجيات تحميل خطوط أكثر تعقيدًا.

مثال (JavaScript):

            document.fonts.load('1em MyCustomFont').then(function() {
  // Font has loaded successfully
  console.log('MyCustomFont loaded!');
});
            

              
                Copy
              
            
          

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

تحسين ملفات الخطوط: تقليل الحجم وتحسين الأداء

يعد تحسين ملفات الخطوط أمرًا بالغ الأهمية لتحسين أداء الموقع وتقليل أوقات التحميل. إليك العديد من التقنيات التي يمكنك استخدامها:

1. تجزئة الخطوط (Font Subsetting)

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

الفوائد:

• حجم ملف خط أصغر
• أوقات تنزيل أسرع
• أداء موقع محسن

أدوات لتجزئة الخطوط:

• FontForge (مفتوح المصدر): محرر خطوط مكتبي قوي يسمح لك بتجزئة الخطوط يدويًا.
• Glyphhanger (سطر الأوامر): أداة سطر أوامر تحدد الحروف الرسومية غير المستخدمة وتنشئ مجموعات فرعية.
• أدوات تجزئة الخطوط عبر الإنترنت: تتوفر العديد من الأدوات عبر الإنترنت لتجزئة الخطوط، مثل Webfont Generator من Font Squirrel.

Unicode-range

بالنسبة للمواقع متعددة اللغات، يمكن استخدام واصف unicode-range في CSS لتحديد نطاقات أحرف Unicode التي يجب استخدام الخط لها. يمكّن هذا المتصفح من تنزيل الأجزاء الضرورية فقط من الخط، مما يحسن الأداء. هذا مفيد بشكل خاص عند التعامل مع اللغات ذات مجموعات الأحرف الكبيرة مثل الصينية واليابانية والكورية (CJK).

مثال:

            @font-face {
  font-family: 'NotoSansCJK';
  src: url('NotoSansCJK-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, /* Common CJK Unified Ideographs */
                 U+3040-309F, /* Hiragana */
                 U+30A0-30FF;  /* Katakana */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

2. الضغط

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

الفوائد:

• حجم ملف أصغر أثناء الإرسال
• أوقات تنزيل أسرع

3. تحسين خطوط SVG

إذا كنت تستخدم خطوط SVG (على الرغم من أنها غير موصى بها بشكل عام)، فقم بتحسين ملفات SVG باستخدام أدوات مثل SVGO (SVG Optimizer) لإزالة البيانات الوصفية غير الضرورية وتقليل حجم الملف.

4. الخطوط المتغيرة (Variable Fonts)

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

الفوائد:

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

5. التخزين المؤقت (Caching)

قم بتكوين خادم الويب الخاص بك لتخزين ملفات الخطوط مؤقتًا بشكل صحيح. يسمح هذا للمتصفحات بتخزين ملفات الخطوط محليًا، مما يقلل من الحاجة إلى تنزيلها بشكل متكرر في الزيارات اللاحقة.

الفوائد:

• أوقات تحميل أسرع للزوار العائدين
• تقليل الحمل على الخادم

اعتبارات إمكانية الوصول

عند استخدام الخطوط المخصصة، من الضروري مراعاة إمكانية الوصول لضمان أن موقعك قابل للاستخدام من قبل الجميع، بما في ذلك الأشخاص ذوي الإعاقة.

1. تباين كافٍ

تأكد من أن لون النص يوفر تباينًا كافيًا مع لون الخلفية لتلبية معايير WCAG (إرشادات الوصول إلى محتوى الويب). استخدم أداة فحص التباين للتحقق من أن نسبة التباين كافية.

2. حجم خط قابل للقراءة

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

3. وزن الخط

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

4. الخطوط الاحتياطية

وفر خطوطًا احتياطية مناسبة في قواعد CSS الخاصة بك لضمان أن النص لا يزال قابلاً للقراءة حتى إذا فشل تحميل الخط المخصص. اختر خطوطًا احتياطية تشبه في الأسلوب والمظهر الخط المخصص.

5. تغيير حجم النص

تأكد من أن المستخدمين يمكنهم بسهولة تغيير حجم النص على موقعك باستخدام تكبير المتصفح أو أدوات الوصول الأخرى. تجنب استخدام وحدات ذات حجم ثابت (مثل البكسل) لأحجام الخطوط. استخدم الوحدات النسبية (مثل em, rem) بدلاً من ذلك.

6. سمات اللغة

قم بتعيين السمة lang بشكل صحيح على وسم <html> للإشارة إلى لغة الصفحة. يساعد هذا قارئات الشاشة والتقنيات المساعدة الأخرى على عرض النص بشكل صحيح.

مثال:

            <html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>This is some text in English.</p>
  </body>
</html>
            

              
                Copy
              
            
          

التوافق بين المتصفحات

تأكد من أن خطوطك المخصصة متوافقة مع مجموعة واسعة من المتصفحات. اختبر موقعك على متصفحات وأجهزة مختلفة لتحديد أي مشاكل توافق. استخدم أدوات مثل BrowserStack أو Sauce Labs لاختبار موقعك على مجموعة متنوعة من المتصفحات وأنظمة التشغيل.

فكر في استخدام ورقة أنماط إعادة تعيين CSS (مثل Normalize.css) لتوحيد الأنماط الافتراضية عبر المتصفحات المختلفة.

الأخطاء الشائعة التي يجب تجنبها

• استخدام عدد كبير جدًا من الخطوط المخصصة: يمكن أن يؤثر استخدام عدد كبير جدًا من الخطوط المخصصة سلبًا على الأداء ويخلق تجربة بصرية مزدحمة. حدد عدد الخطوط المخصصة المستخدمة على موقعك إلى اثنين أو ثلاثة كحد أقصى.
• استخدام ملفات خطوط كبيرة: يمكن أن تزيد ملفات الخطوط الكبيرة من أوقات التحميل بشكل كبير. قم بتحسين ملفات الخطوط الخاصة بك باستخدام التقنيات الموضحة أعلاه.
• عدم توفير خطوط احتياطية: يمكن أن يؤدي عدم توفير خطوط احتياطية إلى نص غير مرئي إذا فشل تحميل الخط المخصص.
• تجاهل اعتبارات إمكانية الوصول: يمكن أن يجعل تجاهل اعتبارات إمكانية الوصول موقعك غير قابل للاستخدام للأشخاص ذوي الإعاقة.
• عدم الاختبار على متصفحات مختلفة: يمكن أن يؤدي عدم الاختبار على متصفحات مختلفة إلى مشاكل توافق.
• الربط المباشر لملفات الخطوط من موقع المصمم أو مصادر أخرى غير موثوقة: استضف الخطوط فقط من موقعك الخاص أو CDN أو خدمة خطوط حسنة السمعة.

أفضل الممارسات للطباعة على الويب العالمي

عند تصميم مواقع الويب لجمهور عالمي، من المهم مراعاة أفضل الممارسات التالية للطباعة على الويب:

• اختر خطوطًا تدعم لغات متعددة: حدد الخطوط التي تتضمن حروفًا رسومية للغات التي تنوي دعمها على موقعك.
• استخدم أحجام خطوط مناسبة للغات المختلفة: قد لا تكون أحجام الخطوط المناسبة للغة ما مناسبة للغة أخرى. اضبط أحجام الخطوط حسب الحاجة لضمان قابلية القراءة عبر اللغات المختلفة.
• ضع في اعتبارك ارتفاع السطر وتباعد الأحرف: يمكن أن يؤثر ارتفاع السطر وتباعد الأحرف على قابلية القراءة، خاصة بالنسبة للغات ذات مجموعات الأحرف المعقدة. اضبط هذه القيم حسب الحاجة لتحسين قابلية القراءة.
• استخدم محاذاة النص المناسبة: قد تختلف محاذاة النص المناسبة اعتمادًا على اللغة. على سبيل المثال، تستخدم اللغات من اليسار إلى اليمين عادةً محاذاة لليسار، بينما تستخدم اللغات من اليمين إلى اليسار عادةً محاذاة لليمين.
• اختبر موقعك بلغات مختلفة: اختبر موقعك بلغات مختلفة لضمان أن الطباعة تبدو صحيحة وسهلة القراءة.

مثال: استخدام خط يدعم الأحرف العالمية

فكر في استخدام خط مثل Noto Sans، المصمم لدعم مجموعة واسعة من اللغات والكتابات. تقدم Google خط Noto Sans ومتغيراته العديدة (Noto Sans CJK، Noto Sans Arabic، إلخ) كخط ويب مجاني.

الخاتمة

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

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