راهنمای فونت وزیرحرف وریبل یا متغیر (Variable)

فونت متغیر چیست؟

فونت متغیر نسخه تکامل‌یافته فونت‌های معمولی (اوپن‌تایپ) است که می‌تواند حالت‌های مختلف یک تایپ‌فیس را درون یک فایل جای دهد و کاربر تنها از یک فایل به جای استفاده از فایل‌های مختلف به ازای هر حالت استفاده می‌کند. برای مثال یک فونت وریبل می‌تواند وزن‌های معمولی و ضخیم، حالت ایتالیک، فشرده، عریض و ... را یکجا شامل گردد. در حالی که به روال سابق ما مجبور بودیم چندین فایل را برای بهره‌مندی از این حالات به کار بگیریم.

آیا فایل‌های فونت وزیرحرفِ متغیر کدام‌اند؟

نسخه‌های مختلف متغیر وزیرحرف در آدرس‌های زیر قرار دارند:

نسخه معمولی:

• fonts/ttf/Vazirharf[wght].ttf
• fonts/webfonts/Vazirharf[wght].woff2

نسخه نقطه‌گرد:

• Round-Dots/fonts/ttf/Vazirharf-RD[wght].ttf
• Round-Dots/fonts/webfonts/Vazirharf-RD[wght].woff2

نسخه بدون لاتین:

• misc/Non-Latin/fonts/ttf/Vazirharf-NL[wght].ttf
• misc/Non-Latin/fonts/webfonts/Vazirharf-NL[wght].woff2

نسخه رابط کاربری (UI):

• misc/UI/fonts/ttf/Vazirharf-UI[wght].ttf
• misc/UI/fonts/webfonts/Vazirharf-UI[wght].woff2

نسخه ارقام فارسی:

• misc/Farsi-Digits/fonts/ttf/Vazirharf-FD[wght].ttf
• misc/Farsi-Digits/fonts/webfonts/Vazirharf-FD[wght].woff2

و هر ترکیبی از سه نسخه آخر.

هر کدام از این فایل‌ها تمامی وزن‌های وزیرحرف را یکجا شامل می‌شوند.

نحوهٔ استفاده از فونت وزیرحرفِ متغیر در وب چیست؟

برای تعریف فونت در CSS:

@font-face {
  font-family: 'Vazirharf';
  src: url('fonts/webfonts/Vazirharf[wght].woff2') format('woff2 supports variations'),
       url('fonts/webfonts/Vazirharf[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

برای نسخه نقطه‌گرد:

@font-face {
  font-family: 'Vazirharf RD';
  src: url('Round-Dots/fonts/webfonts/Vazirharf-RD[wght].woff2') format('woff2 supports variations'),
       url('Round-Dots/fonts/webfonts/Vazirharf-RD[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

می‌توانید به جای آدرس‌های محلی از CDN استفاده کنید مانند:

@font-face {
  font-family: 'Vazirharf RD';
  src: url('https://cdn.jsdelivr.net/gh/nadalaba/vazirharf@v34.003/Round-Dots/fonts/webfonts/Vazirharf-RD[wght].woff2') format('woff2 supports variations'),
       url('https://cdn.jsdelivr.net/gh/nadalaba/vazirharf@v34.003/Round-Dots/fonts/webfonts/Vazirharf-RD[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

همچنین در آدرس ریشه، فایل Vazirharf-Variable-font-face.css برای استفاده از نسخه وب قرار داده شده است که می‌توانید آن را مستقیماً و یا از طریق CDN فرا بخوانید:

<link href="https://cdn.jsdelivr.net/gh/nadalaba/vazirharf@v34.003/Vazirharf-Variable-font-face.css" rel="stylesheet" type="text/css" />

در نظر داشته باشید که همیشه از آخرین نسخه به جای عدد ورژن v34.003 استفاده کنید.

نحوه استفاده در CSS بدین صورت است:

body {
    font-family: Vazirharf;
    font-weight: 400;
}

h1 {
    font-weight: 900;
}

از هر عددی بین 100 تا 900 می‌توان برای تغییر وزن استفاده کرد. مثلاً 692.

یا از پارامتر wght استفاده کنید:

body {
    font-family: Vazirharf;
    font-variation-settings: "wght" 400;
}

h1 {
    font-variation-settings: "wght" 900;
}

در وزیرحرف، پارامتر wght برای تغییر وزن فونت تعریف شده است. هر عددی از 100 تا 900 قابل استفاده می‌باشد. مثلاً 627.

نحوهٔ استفاده از فونت وزیرحرفِ متغیر در برنامه‌های گوناگون چیست؟

به این صفحه مراجعه نمایید.