تعديل أسلوب الخط وفقًا لإعدادات المستخدم المفضّلة باستخدام لغة CSS

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

Adam Argyle

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

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

• تم تقليل التدرّج في الوضع الداكن قليلاً.
• يحصل التباين العالي على خط أكثر كثافة.
• يتم استخدام خط أرق في حالة التباين المنخفض.

تابع لفهم كل جزء من CSS والخط المتغير الذي يتيح هذه اللحظة المفيدة!

الإعداد

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

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

بدون إضافة أي CSS، يصبح حجم الخط قابلاً للتكيف مع الإعدادات المفضّلة للمستخدم. في ما يلي فيديو من عرض توضيحي آخر يعرض كيف سيؤدي ضبط font-size بالبكسل إلى إلغاء أي إعدادات مفضّلة للمستخدم، وسبب ضبط حجم الخط بالريم:

أخيرًا، لعرض العرض الترويجي في المنتصف وجعله متوافقًا، يمكنك استخدام القليل من CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

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

تحميل الخط المتغيّر Roboto Flex

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

حمِّل الخط المتغيّر باستخدام واجهة @font-face API في CSS:

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

بعد ذلك، طبِّق الخط على بعض المحتوى. تطبّق لغة CSS التالية ذلك على كل العناصر:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

السمات المخصّصة في CSS والاستعلامات عن الوسائط لتحقيق الفوز

بعد تحميل الخط، يمكنك البحث عن الإعدادات المفضّلة للمستخدمين وتعديل إعدادات الخط المتغيّر ليطابقها.

الإعدادات في حال عدم توفّر إعدادات مفضّلة (الإعداد التلقائي)

ستكون الأنماط الأولية التالية هي الأنماط التلقائية، أو بعبارة أخرى، هي الأنماط للمستخدمين الذين ليس لديهم أي إعدادات مفضّلة.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

الإعدادات عندما يكون الخيار المفضّل هو التباين العالي

بالنسبة إلى المستخدمين الذين أشاروا إلى تفضيلهم لإعدادات التباين العالي في إعدادات النظام، يمكنك زيادة قيمة --base-weight من 400 إلى 700:

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

هناك الآن المزيد من التباين أثناء القراءة.

الإعدادات التي يكون الإعداد المفضّل فيها هو التباين المنخفض

بالنسبة إلى المستخدمين الذين أشاروا إلى تفضيلهم التباين المنخفض في إعدادات النظام، عليك تقليل قيمة --base-weight من 400 إلى 200:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

أصبح التباين أقل الآن أثناء القراءة.

الإعدادات عندما يكون الخيار المفضّل هو الوضع الداكن

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

تم الآن مراعاة الاختلافات الحسية بين الألوان الفاتحة على الخلفية الداكنة والألوان الداكنة على الخلفية الفاتحة.

كل شيء معًا الآن

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

أو يمكنك استخدام تداخل CSS:

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

والنتيجة هي تجربة قراءة تُعدّل الخط ليناسب الإعدادات المفضّلة للمستخدم. يتوفّر رمز المصدر الكامل أدناه في Codepen.