آشکارسازی پتانسیل تایپوگرافی: راهنمای جامع CSS @font-feature-values

در حوزه طراحی وب، تایپوگرافی نقشی حیاتی در شکل‌دهی به تجربه کاربری و انتقال هویت برند ایفا می‌کند. در حالی که ویژگی‌های ابتدایی فونت در CSS مانند font-family، font-size، و font-weight کنترل‌های اساسی را فراهم می‌کنند، قانون @font-feature-values دروازه‌ای به دنیای سفارشی‌سازی پیشرفته تایپوگرافی باز می‌کند. این قانون پتانسیل پنهان فونت‌های OpenType را آشکار می‌سازد و به توسعه‌دهندگان و طراحان اجازه می‌دهد تا ویژگی‌های خاص فونت را برای بهبود زیبایی، خوانایی و دسترسی‌پذیری به دقت تنظیم کنند. این راهنما به پیچیدگی‌های @font-feature-values می‌پردازد و سینتکس، کاربرد و موارد استفاده عملی آن را در زمینه‌های مختلف جهانی بررسی می‌کند.

درک ویژگی‌های OpenType

پیش از پرداختن به جزئیات @font-feature-values، درک مفهوم بنیادین ویژگی‌های OpenType ضروری است. OpenType یک فرمت فونت پرکاربرد است که قابلیت‌های پیشینیان خود، یعنی TrueType و PostScript را گسترش می‌دهد. این فرمت مجموعه‌ای غنی از ویژگی‌ها را در بر می‌گیرد که جنبه‌های مختلف رندر گلیف‌ها را کنترل می‌کنند، از جمله:

• لیگچرها (Ligatures): ترکیب دو یا چند کاراکتر در یک گلیف واحد برای بهبود زیبایی و خوانایی (مثلاً 'fi'، 'fl').
• گلیف‌های جایگزین (Alternate Glyphs): ارائه تنوع‌هایی از کاراکترهای خاص که امکان انتخاب‌های سبکی یا تنظیمات متنی را فراهم می‌کند.
• مجموعه‌های سبکی (Stylistic Sets): گروه‌بندی تنوع‌های سبکی مرتبط تحت یک نام واحد، که به طراحان امکان می‌دهد به راحتی جلوه‌های زیبایی‌شناختی ثابتی را اعمال کنند.
• سبک‌های اعداد (Number Styles): ارائه سبک‌های مختلف اعداد، مانند ارقام خطی، ارقام سبک قدیم و ارقام جدولی، که هر کدام برای موارد استفاده خاصی مناسب هستند.
• کسرها (Fractions): قالب‌بندی خودکار کسرها با گلیف‌های مناسب برای صورت، مخرج و خط کسر.
• حروف کوچک بزرگ‌نما (Small Capitals): نمایش حروف کوچک به صورت نسخه‌های کوچک‌تر از حروف بزرگ.
• جایگزین‌های متنی (Contextual Alternates): تنظیم شکل گلیف‌ها بر اساس کاراکترهای اطرافشان، که خوانایی و هماهنگی بصری را افزایش می‌دهد.
• کشیدگی‌ها (Swashes): تزئینات اضافی که به برخی گلیف‌ها اضافه می‌شود و جلوه‌ای از ظرافت و زیبایی می‌بخشد.
• کرنینگ (Kerning): تنظیم فاصله بین جفت‌های کاراکتر خاص برای بهبود توازن بصری.

این ویژگی‌ها معمولاً در خود فایل فونت تعریف می‌شوند. @font-feature-values راهی برای دسترسی و کنترل مستقیم این ویژگی‌ها از طریق CSS فراهم می‌کند و انعطاف‌پذیری بی‌نظیری در طراحی تایپوگرافی ارائه می‌دهد.

معرفی CSS @font-feature-values

قانون @font-feature-values به شما امکان می‌دهد نام‌های توصیفی برای تنظیمات خاص ویژگی‌های OpenType تعریف کنید. این کار به شما اجازه می‌دهد تا از نام‌های خواناتری در CSS خود استفاده کنید و کد خود را قابل نگهداری‌تر و فهم‌پذیرتر سازید. سینتکس اصلی به شرح زیر است:

            @font-feature-values <font-family-name> {
  <feature-tag-value> {
    <feature-name>: <feature-value>
  }
}

            

              
                Copy
              
            
          

بیایید هر جزء را بررسی کنیم:

• @font-feature-values: قانونی که تعریف مقادیر ویژگی را آغاز می‌کند.
• <font-family-name>: نام خانواده فونتی که این مقادیر ویژگی به آن اعمال می‌شود (مثلاً 'MyCustomFont'، 'Arial'). این کار تضمین می‌کند که مقادیر تعریف‌شده فقط برای عناصری که از فونت مشخص‌شده استفاده می‌کنند اعمال شوند.
• <feature-tag-value>: بلوکی که مقادیر را برای یک تگ ویژگی خاص OpenType تعریف می‌کند.
• <feature-tag>: یک تگ چهار کاراکتری که ویژگی OpenType را مشخص می‌کند (مثلاً liga برای لیگچرها، smcp برای حروف کوچک بزرگ‌نما، cswh برای کشیدگی‌های متنی). این تگ‌ها استاندارد شده و توسط مشخصات OpenType تعریف شده‌اند. شما می‌توانید لیست‌های جامعی از این تگ‌ها را در مستندات OpenType و منابع آنلاین مختلف پیدا کنید.
• <feature-name>: نام توصیفی که شما به یک مقدار خاص برای ویژگی OpenType اختصاص می‌دهید. این همان نامی است که در قوانین CSS خود استفاده خواهید کرد. نام‌هایی را انتخاب کنید که معنادار و به خاطر سپردنشان آسان باشد.
• <feature-value>: مقدار واقعی برای ویژگی OpenType. این مقدار معمولاً برای ویژگی‌های بولی on یا off است، یا یک مقدار عددی برای ویژگی‌هایی که دامنه‌ای از مقادیر را می‌پذیرند.

مثال‌های عملی و موارد استفاده

برای نشان دادن قدرت @font-feature-values، بیایید چندین مثال عملی را در نظر بگیریم:

۱. فعال کردن لیگچرهای اختیاری

لیگچرهای اختیاری، لیگچرهایی هستند که می‌توانند جذابیت زیبایی‌شناختی برخی ترکیبات کاراکتری را افزایش دهند. برای فعال کردن آنها، می‌توانید یک مقدار ویژگی مانند این تعریف کنید:

            @font-feature-values "MyCustomFont" {
  @discretionary-ligatures {
    common-ligatures: on;
  }
}

.my-text {
  font-family: "MyCustomFont";
  font-variant-alternates: discretionary-ligatures;
}

            

              
                Copy
              
            
          

در این مثال، ما یک مقدار ویژگی به نام common-ligatures برای ویژگی OpenType dlig (لیگچرهای اختیاری) تعریف کرده‌ایم. سپس این مقدار ویژگی را با استفاده از ویژگی font-variant-alternates به کلاس .my-text اعمال می‌کنیم. توجه: مرورگرهای قدیمی‌تر ممکن است نیاز به استفاده از ویژگی font-variant-ligatures داشته باشند. سازگاری مرورگر باید قبل از استقرار بررسی شود.

۲. کنترل مجموعه‌های سبکی

مجموعه‌های سبکی به شما امکان می‌دهند تا مجموعه‌ای از تنوع‌های سبکی را به متن خود اعمال کنید. به عنوان مثال، ممکن است بخواهید از یک مجموعه سبکی خاص برای سرفصل‌ها یا متن اصلی استفاده کنید.

            @font-feature-values "MySerifFont" {
  @stylistic-sets {
    alternate-a: ss01;
    elegant-numbers: ss02;
  }
}

.heading {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(alternate-a);
}

.body-text {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(elegant-numbers);
}

            

              
                Copy
              
            
          

در اینجا، ما دو مجموعه سبکی تعریف کرده‌ایم: alternate-a (که به ss01 نگاشت شده) و elegant-numbers (که به ss02 نگاشت شده). سپس این مجموعه‌ها را با استفاده از font-variant-alternates به عناصر مختلف اعمال می‌کنیم. تگ‌های مجموعه سبکی خاص (ss01، ss02 و غیره) در خود فونت تعریف شده‌اند. برای اطلاع از مجموعه‌های سبکی موجود، به مستندات فونت مراجعه کنید.

۳. سفارشی‌سازی سبک‌های اعداد

فونت‌های OpenType اغلب سبک‌های مختلفی از اعداد را برای اهداف گوناگون ارائه می‌دهند. ارقام خطی معمولاً در جداول و نمودارها استفاده می‌شوند، در حالی که ارقام سبک قدیم با متن اصلی هماهنگی بیشتری دارند.

            @font-feature-values "MyProFont" {
  @styleset {
    tabular-numbers: tnum;
    proportional-oldstyle: pold;
  }
}

.table-data {
  font-family: "MyProFont";
  font-variant-alternates: styleset(tabular-numbers);
}

.body-text {
  font-family: "MyProFont";
  font-variant-alternates: styleset(proportional-oldstyle);
}

            

              
                Copy
              
            
          

این مثال tabular-numbers (tnum) را برای داده‌های جدول و proportional-oldstyle (pold) را برای متن اصلی تعریف می‌کند که باعث بهبود خوانایی و هماهنگی بصری می‌شود.

۴. ترکیب چندین ویژگی

شما می‌توانید چندین ویژگی را در یک تعریف font-variant-alternates ترکیب کنید:

            @font-feature-values "MyComplexFont" {
  @styleset {
    historical-forms: hist;
    contextual-alternates: calt;
  }
  @discretionary-ligatures {
   rare-ligatures: dlig;
  }
}

.special-text {
  font-family: "MyComplexFont";
  font-variant-alternates: styleset(historical-forms) discretionary-ligatures(rare-ligatures);
}

            

              
                Copy
              
            
          

این کار با اعمال همزمان چندین ویژگی OpenType، امکان ایجاد جلوه‌های تایپوگرافی پیچیده را فراهم می‌کند. توجه داشته باشید که ترتیب گاهی اوقات می‌تواند مهم باشد. آزمایش کردن کلید دستیابی به نتیجه مطلوب است.

استفاده از font-variant-settings برای دسترسی مستقیم به ویژگی‌ها

در حالی که @font-feature-values و font-variant-alternates یک لایه انتزاعی سطح بالا فراهم می‌کنند، ویژگی font-variant-settings امکان دسترسی مستقیم به ویژگی‌های OpenType را با استفاده از تگ‌های چهار کاراکتری آن‌ها فراهم می‌کند. این ویژگی به ویژه زمانی مفید است که با ویژگی‌هایی سر و کار دارید که توسط کلمات کلیدی از پیش تعریف‌شده font-variant-alternates پوشش داده نمی‌شوند یا زمانی که به کنترل دقیق‌تری نیاز دارید.

سینتکس برای font-variant-settings به این صورت است:

            font-variant-settings: "<feature-tag>" <value>, "<feature-tag>" <value>, ...;

            

              
                Copy
              
            
          

به عنوان مثال، برای فعال کردن حروف کوچک بزرگ‌نما، می‌توانید از این کد استفاده کنید:

            .small-caps-text {
  font-family: "MyFont";
  font-variant-settings: "smcp" 1;
}

            

              
                Copy
              
            
          

در اینجا، "smcp" 1 مستقیماً به مرورگر دستور می‌دهد که ویژگی حروف کوچک بزرگ‌نما را فعال کند. مقدار 1 معمولاً به معنای 'روشن' و 0 به معنای 'خاموش' است.

شما می‌توانید چندین تنظیم ویژگی را در یک تعریف ترکیب کنید:

            .advanced-text {
  font-family: "MyFont";
  font-variant-settings: "liga" 0, "cswh" 1, "calt" 1;
}

            

              
                Copy
              
            
          

این کد لیگچرهای استاندارد (liga) را غیرفعال، کشیدگی‌های متنی (cswh) را فعال و جایگزین‌های متنی (calt) را فعال می‌کند.

مزایای font-variant-settings:

• کنترل مستقیم: کنترل دقیقی بر روی تک‌تک ویژگی‌های OpenType فراهم می‌کند.
• انعطاف‌پذیری: امکان دسترسی به ویژگی‌هایی را که توسط font-variant-alternates پوشش داده نشده‌اند، می‌دهد.

معایب font-variant-settings:

• خوانایی کمتر: استفاده از تگ‌های خام ویژگی می‌تواند کد را کمتر خوانا و فهم آن را دشوارتر کند.
• نگهداری دشوارتر: تغییر تگ‌های ویژگی در فونت نیازمند به‌روزرسانی مستقیم CSS است.

بهترین شیوه‌ها: تا حد امکان از @font-feature-values و font-variant-alternates برای خوانایی و قابلیت نگهداری بهتر استفاده کنید. font-variant-settings را برای مواردی که دسترسی مستقیم به ویژگی ضروری است، نگه دارید.

ملاحظات دسترسی‌پذیری

در حالی که @font-feature-values می‌تواند به طور قابل توجهی جذابیت بصری تایپوگرافی را افزایش دهد، در نظر گرفتن پیامدهای دسترسی‌پذیری بسیار مهم است. ویژگی‌های اعمال‌شده نادرست می‌توانند بر خوانایی و قابلیت استفاده برای کاربران دارای معلولیت تأثیر منفی بگذارند. در اینجا برخی از ملاحظات کلیدی آورده شده است:

• لیگچرها: اگرچه لیگچرها می‌توانند زیبایی را بهبود بخشند، اما ممکن است خوانایی را برای کاربران مبتلا به خوانش‌پریشی یا کسانی که به صفحه‌خوان‌ها متکی هستند، مختل کنند. از استفاده بیش از حد از لیگچرهای اختیاری، به ویژه در متن اصلی، خودداری کنید. در صورت لزوم، گزینه‌هایی برای غیرفعال کردن لیگچرها فراهم کنید.
• گلیف‌های جایگزین: استفاده از گلیف‌های بیش از حد تزئینی یا غیرمتعارف می‌تواند رمزگشایی متن را دشوار کند. اطمینان حاصل کنید که گلیف‌های جایگزین کنتراست و خوانایی کافی را حفظ می‌کنند.
• جایگزین‌های متنی: در حالی که جایگزین‌های متنی به طور کلی خوانایی را بهبود می‌بخشند، جایگزین‌های با طراحی ضعیف می‌توانند ناهماهنگی‌های بصری و سردرگمی ایجاد کنند. جایگزین‌های متنی را با ترکیبات مختلف کاراکترها به طور کامل آزمایش کنید.
• کنتراست: صرف‌نظر از ویژگی‌های OpenType استفاده شده، از کنتراست کافی بین متن و پس‌زمینه اطمینان حاصل کنید. از ابزارها برای تأیید نسبت‌های کنتراست و رعایت دستورالعمل‌های دسترسی‌پذیری WCAG استفاده کنید.
• آزمایش: تایپوگرافی خود را با فناوری‌های کمکی، مانند صفحه‌خوان‌ها، آزمایش کنید تا اطمینان حاصل کنید که متن به درستی تفسیر شده و به کاربران دارای معلولیت منتقل می‌شود.

بین‌المللی‌سازی و بومی‌سازی

ویژگی‌های OpenType نقش مهمی در پشتیبانی از زبان‌ها و سیستم‌های نوشتاری متنوع ایفا می‌کنند. بسیاری از فونت‌ها شامل ویژگی‌هایی هستند که به طور خاص برای زبان‌ها یا مناطق خاصی طراحی شده‌اند. به عنوان مثال:

• عربی: فونت‌های OpenType برای زبان عربی اغلب شامل ویژگی‌هایی برای شکل‌دهی متنی هستند که گلیف‌ها را بر اساس موقعیتشان در یک کلمه تنظیم می‌کند.
• خطوط هندی: فونت‌ها برای خطوط هندی (مانند دوناگری، بنگالی، تامیل) قوانین شکل‌دهی پیچیده‌ای را برای مدیریت صحیح صامت‌های ترکیبی و علائم مصوت‌ها در بر می‌گیرند.
• CJK (چینی، ژاپنی، کره‌ای): فونت‌های OpenType برای زبان‌های CJK اغلب شامل ویژگی‌هایی برای فرم‌های گلیف جایگزین و تنوع‌های سبکی بر اساس ترجیحات منطقه‌ای هستند.

هنگام طراحی برای وب‌سایت‌های چند زبانه، انتخاب فونت‌هایی که به اندازه کافی از زبان‌های هدف پشتیبانی می‌کنند و استفاده از ویژگی‌های OpenType برای اطمینان از رندر صحیح و تنوع‌های سبکی مناسب، ضروری است. با افراد بومی و کارشناسان تایپوگرافی مشورت کنید تا اطمینان حاصل شود که تایپوگرافی شما از نظر فرهنگی حساس و از نظر زبانی دقیق است.

در اینجا چند مثال برای نشان دادن اهمیت ویژگی‌های OpenType در زبان‌های مختلف آورده شده است:

به یاد داشته باشید که در مورد الزامات تایپوگرافی خاص هر زبانی که پشتیبانی می‌کنید تحقیق کنید و فونت‌ها و ویژگی‌ها را بر اساس آن انتخاب کنید. آزمایش با افراد بومی در تضمین تایپوگرافی دقیق و مناسب از نظر فرهنگی بسیار ارزشمند است.

سازگاری مرورگر

پشتیبانی مرورگرها از @font-feature-values و ویژگی‌های CSS مرتبط با آن در طول زمان به طور قابل توجهی بهبود یافته است، اما بررسی سازگاری قبل از اتکا به این ویژگی‌ها در محیط تولید ضروری است. تا اواخر سال ۲۰۲۳، اکثر مرورگرهای مدرن از این ویژگی‌ها پشتیبانی می‌کنند، از جمله:

• Chrome
• Firefox
• Safari
• Edge
• Opera

با این حال، مرورگرهای قدیمی‌تر ممکن است فاقد پشتیبانی باشند یا رفتار ناسازگاری از خود نشان دهند. از وب‌سایتی مانند "Can I use..." برای بررسی وضعیت سازگاری فعلی استفاده کنید و برای مرورگرهای قدیمی‌تر، سبک‌های جایگزین (fallback) در نظر بگیرید. می‌توانید از کوئری‌های ویژگی (@supports) برای تشخیص پشتیبانی مرورگر و اعمال سبک‌ها بر اساس آن استفاده کنید:

            @supports (font-variant-alternates: discretionary-ligatures) {
  .my-text {
    font-variant-alternates: discretionary-ligatures;
  }
}

            

              
                Copy
              
            
          

این کار تضمین می‌کند که ویژگی font-variant-alternates تنها در صورتی اعمال می‌شود که مرورگر از آن پشتیبانی کند.

سیستم‌های طراحی و تایپوگرافی قابل استفاده مجدد

@font-feature-values می‌تواند به طور یکپارچه در سیستم‌های طراحی برای ایجاد سبک‌های تایپوگرافی قابل استفاده مجدد و ثابت ادغام شود. با تعریف مرکزی مقادیر ویژگی، می‌توانید اطمینان حاصل کنید که جلوه‌های تایپوگرافی به طور مداوم در سراسر وب‌سایت یا برنامه شما اعمال می‌شوند. این امر به ثبات برند کمک کرده و نگهداری را ساده می‌کند.

در اینجا مثالی از نحوه ساختاردهی CSS در یک سیستم طراحی آورده شده است:

            /* typography.css */

@font-feature-values "MyBrandFont" {
  @stylistic-sets {
    brand-headline: ss01;
    brand-body: ss02;
  }
  @discretionary-ligatures {
    brand-ligatures: on;
  }
}

/* components.css */

.headline {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-headline);
}

.body {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-body);
}

.brand-text {
    font-family: "MyBrandFont";
    font-variant-alternates: discretionary-ligatures(brand-ligatures);
}

            

              
                Copy
              
            
          

در این مثال، @font-feature-values در یک فایل جداگانه typography.css تعریف شده است، در حالی که سبک‌های کامپوننت‌ها در components.css تعریف شده‌اند. این تفکیک مسئولیت‌ها کد را ماژولارتر و قابل نگهداری‌تر می‌کند.

با استفاده از نام‌های توصیفی برای مقادیر ویژگی خود (مانند brand-headline، brand-body)، کد خود را خود-مستندسازتر و فهم آن را برای سایر توسعه‌دهندگان آسان‌تر می‌کنید. این امر به ویژه در تیم‌های بزرگ که چندین توسعه‌دهنده ممکن است روی یک پروژه کار کنند، اهمیت دارد.

بارگذاری فونت و عملکرد

هنگام استفاده از فونت‌های وب، بهینه‌سازی بارگذاری فونت برای عملکرد بسیار مهم است. فایل‌های فونت بزرگ می‌توانند به طور قابل توجهی بر زمان بارگذاری صفحه تأثیر بگذارند و منجر به تجربه کاربری ضعیف شوند. در اینجا چند نکته برای بهینه‌سازی بارگذاری فونت آورده شده است:

• از WOFF2 استفاده کنید: WOFF2 کارآمدترین فرمت فونت است و بهترین فشرده‌سازی را ارائه می‌دهد. هر زمان که ممکن است از آن استفاده کنید.
• زیرمجموعه‌سازی فونت‌ها: اگر فقط به زیرمجموعه‌ای از کاراکترهای یک فونت نیاز دارید، زیرمجموعه‌سازی فونت را برای کاهش اندازه فایل آن در نظر بگیرید. ابزارهایی مانند FontForge و سرویس‌های آنلاین زیرمجموعه‌سازی فونت می‌توانند در این زمینه کمک کنند.
• از font-display استفاده کنید: ویژگی font-display نحوه نمایش فونت‌ها را هنگام بارگذاری کنترل می‌کند. از مقادیری مانند swap یا optional برای جلوگیری از مسدود شدن رندر متن استفاده کنید.
• پیش‌بارگذاری فونت‌ها: از تگ <link rel="preload"> برای پیش‌بارگذاری فونت‌های مهم استفاده کنید تا به مرورگر بگویید آنها را زودتر در فرآیند بارگذاری صفحه دانلود کند.
• یک سرویس فونت را در نظر بگیرید: سرویس‌هایی مانند Google Fonts، Adobe Fonts و Fontdeck می‌توانند میزبانی و بهینه‌سازی فونت را برای شما انجام دهند.

هنگام کار با @font-feature-values، به یاد داشته باشید که تأثیر عملکردی فعال کردن ویژگی‌های OpenType به طور کلی ناچیز است. نگرانی اصلی عملکرد، اندازه خود فایل فونت است. بر روی بهینه‌سازی بارگذاری فونت تمرکز کنید و از ویژگی‌های OpenType با دقت برای بهبود تجربه کاربری استفاده کنید.

نتیجه‌گیری: استقبال از برتری تایپوگرافی

قانون @font-feature-values و ویژگی‌های CSS مرتبط با آن، یک جعبه ابزار قدرتمند برای آشکارسازی پتانسیل کامل فونت‌های OpenType فراهم می‌کنند. با درک ویژگی‌های OpenType، ملاحظات دسترسی‌پذیری، الزامات بین‌المللی‌سازی و سازگاری مرورگر، می‌توانید تایپوگرافی پیچیده و جذابی ایجاد کنید که تجربه کاربری را بهبود بخشیده و هویت برند شما را تقویت می‌کند. قدرت @font-feature-values را در آغوش بگیرید و طراحی وب خود را به سطوح جدیدی از برتری تایپوگرافی ارتقا دهید.

با در نظر گرفتن دقیق تفاوت‌های ظریف تایپوگرافی زبان‌ها و فرهنگ‌های مختلف، می‌توانید وب‌سایت‌هایی ایجاد کنید که نه تنها از نظر بصری جذاب هستند، بلکه برای مخاطبان جهانی نیز در دسترس و فراگیر هستند. کلید موفقیت، آگاهی از تأثیر بالقوه ویژگی‌های OpenType بر خوانایی و قابلیت استفاده، و آزمایش کامل تایپوگرافی با طیف متنوعی از کاربران است.