فونت در وب، زیبایی و تجربه کاربری : قسمت چهارم

رسیدیم به قسمت آخر از نوشته‌های وب فونت…تا اینجا حدودا با سازوکار وب فونت‌ها آشنا شدیم(که البته هیچ وقت جای تجربه رو نمیگیره اما برای شروع کافیه). تو این قسمت می خوام در مورد بکارگیری وب فونت‌ها در سی‌اس‌اس (CSS) صحبت کنم.

تعریف وب فونت در فایل‌های CSS

در نظر بگیرید که با توجه به نوشته‌های پیشین، وب فونت مناسبی پیدا کردید. کافیه اون رو به فایل‌های CSS اضافه کنید و از اون تو وبسایت مورد نظرتون استفاده کنید.درسته این بخش از این نوشته رو میتونید در سایت‌های دیگه هم پیدا کنید اما نکاتی هست که لازم دیدم روشون فوکوس کنم.

برای اضافه کردن یه فونت به CSS لازمه که از تگ زیر استفاده کنید.

<span class="line-number">123456</span><span class="code-container"> @font-face {
       font-family: FontName;
       font-weight: normal|bold|100|200|...|900;
       font-style: normal|italic;
       src: ...;
 }</span><button data-action="copy"></button>

<span class="line-number">۱۲۳۴۵۶</span><span class="code-container"> @font-face {

font-family: FontName;

font-weight: normal|bold|۱۰۰|۲۰۰|...|۹۰۰;

font-style: normal|italic;

src: ...;

}</span><button data-action="copy"></button>

کد بالا شامل خصوصیاتی هست که باید در کدتون قرار بدید تا بهترین نتیجه رو دریافت کنید.

اولین مورد font-family هست. سعی کنید برای این خصوصیت مقداری به صورت پیوسته در نظر بگیرید. مثلا شما میتونید فونت ایران سنس رو به دو صورت IRAN Sans و IRANSans بنویسید. توصیه من اینه که حالت دوم رو انتخاب کنید تا خیالتون از این بابت راحت باشه.(چون داخل تعدادی از مقاله‌های منتشر شده در این مورد توصیه شده که برای نام هایی که کاراکتر فاصله دارند نیاز هست که اسم فونت بین کوتیشن قرار بگیره!!)

مورد دوم font-weight هست که میتونید مقابل اون مقادیر ۱۰۰ تا ۹۰۰ و با گام‌های ۱۰۰ تایی قرار بدید (۱۰۰و۲۰۰و۳۰۰و…). همچنین آزادید که از دو کلمه (bold= 700) و (normal = 400) استفاده کنید. موردی که هست اینه که در برخی مرورگر‌های منسوخ شده (یا حتی وب‌ویو‌های پیشفرض در اپ‌های اندرویدی) از مقدار عددی وزن فونت پشتیبانی نمیشه و فقط دو کلمه normal و bold رو برای این خصوصیت قبول میکنن. پس برای پشتیبانی از همه حالات، برای دو وزن ۴۰۰ و ۷۰۰ دو font-face جدا که مقادیر کلمه ای اون ها رو هم شامل میشه اضافه کنید.

مثلا اگر فونتی دارید که ۴ وزن ۳۰۰ و ۴۰۰ و ۵۰۰ و ۷۰۰ داشت ۴ فونت فیس برای این ۴ مقدار و دو فونت فیس هم برای حالت normal = 400 و bold = 700 ایجاد کنید که در مجموع میشه ۶ عدد فونت فیس.

مورد سوم هم استایل فونت هست که برای فونت های فارسی مقدارش normal ذکر میشه(از مقدار “italic” یا حالت اوریب برای فونت هایی که این خاصیت رو دارند استفاده کنید).

نکته مهم: دو خصوصیتی که ذکر شد مربوط به ساختار فونت هست نه تعیین استایل فونت در وب. یعنی وقتی شما یک فونتی دارید که وزن و استایل مشخصی داره تو این قسمت از فونت فیس اون رو ذکر کنید.

و اما در مورد خصوصیت src باید از روش زیر استفاده کنید:

<span class="line-number">1234567</span><span class="code-container">src: url('/fonts/fontname.eot');
src: local('font name'),
       local('font-name'),
       url('/fonts/fontname.eot?#iefix') format('embedded-opentype'),
       url('/fonts/fontname.woff2') format('woff2'),
       url('/fonts/fontname.woff') format('woff'),
       url('/fonts/fontname.ttf') format('truetype');</span><button data-action="copy"></button>

<span class="line-number">۱۲۳۴۵۶۷</span><span class="code-container">src: url('/fonts/fontname.eot');

src: local('font name'),

local('font-name'),

url('/fonts/fontname.eot?#iefix') format('embedded-opentype'),

url('/fonts/fontname.woff2') format('woff2'),

url('/fonts/fontname.woff') format('woff'),

url('/fonts/fontname.ttf') format('truetype');</span><button data-action="copy"></button>

همون طور که مشخصه از src دوبار استفاده شده. خط اول استفاده از فونت eot هست که در ورژن‌های پایین تر از IE9 استفاده میشه. خط بعدی هم برای ورژن های جدیدتر مرورگر‌ها استفاده میشه. نکته‌ای که هست اینه که در حال حاضر شما باید این ۴ فرمت رو استفاده کنید. اگر استفاده نکنید هیچ تضمینی نیست که در مرورگرهای قدیمی یا در انواع مرورگرها چه در ویندوز و چه در اندروید و ios و … فونت مورد نظرتون نمایش داده بشه.

بهترین فرمت‌های وب فونت woff و woff2 هست که سبک تر از فرمت های دیگه هست(woff2 با فشرده سازی جدید ۳۰ درصد از فرمت woff سبک تر شده)؛ و بهتره بدونید که مرورگرتون بر اساس بهترین فرمت موجود، فونت رو دانلود می‌کنه و نه همه فونت هارو! این یعنی اگر مرورگر از فرمت woff2 پشتیبانی کنه فقط فایل woff2 رو دانلود می‌کنه و این یعنی سرعت بارگذاری بیشتر و حجم مصرفی کمتر در صفحه وب.

نکته مهم: بهتره از دستور local هم استفاده کنید تا اگر کاربری این فونت رو روی سیستمش داشت نیاز به دانلود نداشته باشه(بارگزاری سریع صفحه وب). فقط کافیه اسم سیستمی فونت رو داخل کوتیشن در دستور local قرار بدید.البته اگر فونت مورد نظرتون چندین نسخه داره و شما میخواید کاربر با آخرین نسخه وبسایتتون رو نگاه کنه(و هر نسخه ای غیر از نسخه آخر رو سیستم کاربر نصب باشه) بهتره که دستور local رو حذف کنید تا کاربر با نسخه‌ای که شما بارگزاری کردید سایت رو ببینه.

ممنون از اینکه این نوشته رو دنبال کردید

/پایان

برچسبها

مطالب مرتبط

لغو پاسخ