تعديل أسلوب الخط وفقًا لإعدادات المستخدم المفضّلة باستخدام لغة 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 بالبكسل. مسح أي تفضيلات للمستخدم، ولماذا يجب تعيين حجم الخط في rems:

أخيرًا، يمكن استخدام لغة 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 الخاصة بخدمة 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.