random
أخبار ساخنة

شرح CSS Fonts عائلات الخطوط واستخدام font family و Google Fonts بالتفصيل

Samouel Ghaly
الصفحة الرئيسية

دَلِيلُ مُحْتَرِفِي CSS لِإِتْقَانِ الخُطُوطِ وَ Google Fonts

إِنَّ اخْتِيَارَ الخَطِّ المُنَاسِبِ لَيْسَ مُجَرَّدَ رَفَاهِيَةٍ بَصَرِيَّةٍ، بَلْ هُوَ العُنْصُرُ الأَكْثَرُ تَأْثِيرًا فِي هُوِيَّةِ المَوْقِعِ وَتَجْرِبَةِ القِرَاءَةِ. تَمْنَحُنَا لُغَةُ CSS تَحَكُّمًا كَامِلًا فِي كَيْفِيَّةِ عَرْضِ الخُطُوطِ عَبْرَ خَاصِّيَّةِ font-family. وَمَعَ تَطَوَّرِ الوَيْبِ، لَمْ نَعُدْ مَحْصُورِينَ فِي الخُطُوطِ الاِفْتِرَاضِيَّةِ لِأَجْهِزَةِ المُسْتَخْدِمِينَ، بَلْ أَصْبَحَ بِمَقْدُورِنَا جَلْبُ آلَافِ الخُطُوطِ الحَدِيثَةِ عَبْرَ مَكْتَبَةِ Google Fonts الشَّهِيرَةِ.

فِي هَذَا المَوْضُوعِ، سَنَشْرَحُ بِالتَّفْصِيلِ مَفْهُومَ عَائِلَاتِ الخُطُوطِ، وَكَيْفِيَّةِ كِتَابَةِ نِظَامِ الخُطُوطِ الاِحْتِيَاطِيَّةِ، وَطَرِيقَةِ دَمْجِ خُطُوطِ جُوجِل بِاحْتِرَافِيَّةٍ دُونَ التَّأْثِيرِ سَلْبًا عَلَى سُرْعَةِ مَوْقِعِكَ.

1. عَائِلَاتُ الخُطُوطِ العَامَّةِ (Generic Font Families)

تَنْقَسِمُ الخُطُوطُ فِي عَالَمِ الحَاسُوبِ إِلَى مَجْمُوعَاتٍ كُبْرَى تَشْتَرِكُ فِي صِفَاتٍ هَنْدَسِيَّةٍ مُعَيَّنَةٍ، وَمِنْ أَهَمِّهَا:

  • Serif: خُطُوطٌ تَمْتَلِكُ زَوَائِدَ أَوْ ذُيُولًا صَغِيرَةً فِي نِهَايَاتِ الحُرُوفِ (مِثْلَ خَطِّ Times New Roman)، وَتُعْطِي مَظْهَرًا رَسْمِيًّا كَأَمَاكِنِ النَّشْرِ الصَّحَفِيِّ.
  • Sans-serif: خُطُوطٌ حَدِيثَةٌ نَاعِمَةٌ بِدُونِ زَوَائِدَ (مِثْلَ خَطِّ Arial أَوْ Segoe UI)، وَهِيَ الأَفْضَلُ وَالأَكْثَرُ رَاحَةً لِلْعَيْنِ عَبْرَ الشَّاشَاتِ الرَّقَمِيَّةِ.
  • Monospace: خُطُوطٌ تَكُونُ فِيهَا جَمِيعُ الحُرُوفِ مُتَسَاوِيَةً فِي العَرْضِ تَمَامًا (مِثْلَ خَطِّ Courier New)، وَتُسْتَخْدَمُ حَصْرًا لِعَرْضِ أَكْوَادِ البَرْمَجَةِ.

2. كَيْفِيَّةُ اسْتِخْدَامِ خَاصِّيَّةِ font-family

عِنْدَ كِتَابَةِ خَاصِّيَّةِ font-family، لَا نَكْتُبُ خَطًّا وَاحِدًا فَقَطْ؛ بَلْ نَقُومُ بِمَا يُسَمَّى "سِلْسِلَةِ الخُطُوطِ الاِحْتِيَاطِيَّةِ" (Fallback System). حَيْثُ نَفْصِلُ بَيْنَ الخُطُوطِ بِفَاصِلَةٍ , لِكَيْ يَقْرَأَهَا المُتَصَفِّحُ مِنَ اليَمِينِ إِلَى اليَسَارِ؛ فَإِذَا لَمْ يَجِدِ الخَطَّ الأَوَّلَ، يَنْتَقِلُ لِلثَّانِي، حَتَّى يَصِلَ إِلَى العَائِلَةِ العَامَّةِ فِي النِّهَايَةِ كَأَمَانٍ مُطْلَقٍ.

قَوَاعِدُ هَامَّةٌ عِنْدَ الكِتَابَةِ:

  • إِذَا كَانَ اِسْمُ الخَطِّ يَتَكَوَّنُ مِنْ أَكْثَرَ مِنْ كَلِمَةٍ (مِثْلَ "Times New Roman")، يَجِبُ وَضْعُهُ بَيْنَ عَلَامَتَيْ تَنْصِيصٍ.
  • نَخْتِمُ السِّلْسِلَةَ دَائِمًا بِالعَائِلَةِ العَامَّةِ مِثْلَ sans-serif.

مِثَالٌ كُودِيٌّ:

p {
    /* سَيَبْحَثُ عَنْ Cairo، فَإِنْ لَمْ يَجِدْهُ سَيُشَغِّلُ Segoe UI، وَأَخِيرًا أَيّ خَطّ دُون زَوَائِد */
    font-family: 'Cairo', 'Segoe UI', sans-serif; 
}

3. دَمْجُ خُطُوطِ جُوجِل (Google Fonts) بِالتَّفْصِيلِ

مَكْتَبَةُ Google Fonts هِيَ مِلَاذُ المُصَمِّمِينَ الحُرِّ، حَيْثُ تُوَفِّرُ خُطُوطًا عَرَبِيَّةً وَعَالَمِيَّةً مَجَّانِيَّةً فَائِقَةَ الجَمَالِ (مِثْلَ خُطُوطِ: Cairo, Tajawal, Almarai). لِاسْتِخْدَامِهَا، هُنَاكَ طَرِيقَتَانِ رَئِيسِيَّتَانِ:

الطَّرِيقَةُ الأُولَى: الِاسْتِيرَادُ عَبْرَ وَسْمِ link (يُنْصَحُ بِهَا لِلسُّرْعَةِ)

بَعْدَ دُخُولِكَ لِمَوْقِعِ Google Fonts وَاخْتِيَارِ الخَطِّ وَالأَوْزَانِ الَّتِي تُرِيدُهَا، يَمْنَحُكَ المَوْقِعُ كُودًا لِوَضْعِهِ دَاخِلَ وسمِ <head> فِي مِلَفِّ الـ HTML قَبْلَ كُودِ الـ CSS: 

<!-- اِسْتِيرَادُ خَطِّ تَّجَاوُل Tajawal مِنْ خَادِمِ جُوجِل -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">

الطَّرِيقَةُ الثَّانِيَّةُ: الِاسْتِيرَادُ دَاخِلَ مِلَفِّ الـ CSS عَبْرَ @import

إِذَا كُنْتَ تُفَضِّلُ إِبْقَاءَ مِلَفِّ HTML نَقِيًّا، يُمْكِنُكَ وَضْعُ أَمْرِ الِاسْتِيرَادِ فِي أَوَّلِ سَطْرٍ مِنْ مِلَفِّ الـ CSS تَمَامًا: 

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

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

4. خَصَائِصُ أُخْرَى جَوْهَرِيَّةٌ لِلتَّحَكُّمِ فِي الخُطُوطِ

لَا يَكْتَمِلُ تَنْسِيقُ الخَطِّ بِاخْتِيَارِ عِائِلَتِهِ فَقَطْ، بَلْ نَحْتَاجُ لِخَصَائِصَ مُسَاعِدَةٍ:

  • font-size: لِتَحْدِيدِ حَجْمِ الخَطِّ، وَيُفَضَّلُ اسْتِخْدَامُ وِحْدَةِ rem أَوِ em لِتَكُونَ مُتَجَاوِبَةً مَعَ الشَّاشَاتِ.
  • font-weight: لِتَحْدِيدِ ثِقَلِ أَوْ سُمْكِ الخَطِّ (مِثْلَ bold لِلْعَنَاوِينِ، أَوْ أَرْقَامٍ مِثْلَ 400 لِلنَّصِّ العَادِيِّ وَ 700 لِلْعَرِيضِ).
  • font-style: لِجَعْلِ النَّصِّ مَائِلًا بِاسْتِخْدَامِ القِيمَةِ italic.
💡 نَصِيحَةُ ذَهَبِيَّةٌ لِأَدَاءِ وَسُرْعَةِ المَوْقِعِ (Performance): عِنْدَ اخْتِيَارِ خُطُوطِ Google Fonts، تَجَنَّبْ تَمَامًا تَحْمِيلَ جَمِيعِ الأَوْزَانِ المُتَاحَةِ (مِثْلَ 100, 200, 300 حَتَّى 900). كُلُّ وَزْنٍ تَخْتَارُهُ يُمَثِّلُ مِلَفًّا إِضَافِيًّا يَقُومُ المُتَصَفِّحُ بِتَحْمِيلِهِ، مِمَّا يَبْطَأُ مَوْقِعَكَ. الاِسْتِخْدَامُ الذَّكِيُّ هُوَ اخْتِيَارُ وَزْنَيْنِ فَقَطْ: 400 لِلنُّصُوصِ العَادِيَّةِ، وَ 700 لِلْعَنَاوِينِ البَارِزَةِ، مَعَ الحِرْصِ عَلَى إِبْقَاءِ خَاصِّيَّةِ &display=swap دَاخِلَ الرَّابِطِ لِعَرْضِ خَطِّ النِّظَامِ الاِحْتِيَاطِيِّ فَوْرًا حَتَّى يَنْتَهِيَ تَحْمِيلُ خَطِّ جُوجِل!
google-playkhamsatmostaqltradent