فونت وب در CSS – آموزش CSS (بخش بیست و چهارم)

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

• استایل لینک در CSS — آموزش CSS (بخش بیست و سوم)

توضیحی در مورد خانواده‌‌های فونت

همچنان که در بخش بیست و یکم ‌این سری مقالات توضیح دادیم، فونت‌هایی که روی HTML اعمال می‌شوند را می‌توان با استفاده از مشخصه font-family کنترل کرد.

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

این سیستم عملکرد مناسبی دارد، اما به طور سنتی انتخاب فونت‌های توسعه‌دهندگان وب محدود است. تنها چند فونت مناسب وجود دارند که می‌توانیم مطمئن باشیم روی همه سیستم‌ها حضور دارند. این فونت‌ها به نام فونت‌های Web-Safe خوانده می‌شوند. می‌توان از «پشته فونت» (Font Stack) برای تعیین فونت‌های ترجیحی استفاده کرد و در ادامه جایگزین‌های Web-Safe را تعیین نمود و در ادامه فونت‌های پیش‌فرض سیستم را آورد، اما این کار موجب افزایش سربار تست کردن می‌شود تا مطمئن شویم که همه فونت‌ها ظاهر خوبی روی سیستم دارند.

فونت‌های وب

یک روش جایگزین برای استفاده از فونت وجود دارد که تا IE نسخه 6 نیز به خوبی کار می‌کند. فونت‌های وب یکی از قابلیت‌های CSS است که امکان تعیین فایل‌های فونت برای دانلود همراه با دسترسی به وب‌سایت را فراهم می‌سازد. معنی این حرف آن است که هر مرورگری که از فونت‌های وب پشتیبانی کند، ‌می‌تواند هر فونتی که تعیین می‌شود را به دست آورد. این قابلیت شگفت‌انگیزی است. ساختار آن به صورت زیر است.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

قبل از هر چیز باید بلوک font-face@ را در آغاز CSS داشته باشید که فایل‌های فونت که باید دانلود شوند را تعیین می‌کند:

در ادامه می‌توانید از نام خانواده فونت مورد نظر خود که درون بلوک font-face@ تعیین‌شده برای اعمال فونت سفارشی روی هر چیزی به صورت نرمال استفاده کنید:

ساختار این قابلیت می‌تواند پیچیده‌تر از توصیف فوق باشد. بنابراین آن را به تفصیل در ادامه توضیح می‌دهیم. دو نکته وجود دارند که باید همواره در مورد فونت‌های وب در خاطر داشته باشید:

مرورگرها از فرمت‌های مختلف فونت پشتیبانی می‌کنند، بنابراین باید چندین فرمت فونت برای پشتیبانی روی همه مرورگرها داشته باشید. برای نمونه اغلب مرورگرهای مدرن از فرمت WOFF/WOFF2 یعنی نسخه‌های 1 و 2 قالب فونت باز وب پشتیبانی می‌کنند که کارآمدترین فرمت موجود است، اما نسخه‌های قدیمی‌تر IE تنها از EOT پشتیبانی می‌کنند و ممکن است لازم باشد نسخه SVG فونت را برای نسخه‌های قدیمی‌تر مرورگرهای آیفون و اندروید ارائه کنید. روش تولید کد مورد نیاز را در ادامه توضیح خواهیم داد.

همه فونت‌ها رایگان نیستند. شما باید هزینه فونت را پرداخت کنید و/یا از شرایط دیگر برای به دست آوردن پروانه استفاده از فونت که از سوی توسعه‌دهنده آن تعیین شده است، بهره بگیرید. مثلاً برخی فونت‌ها الزام می‌کنند که سازنده فونت در کد (یا روی سایت) مورد ‌ارجاع قرار گیرد. بنابراین نباید بدون کسب اجازه از صاحب فونت، آن را به سرقت برده و مورد استفاده قرار دهید.

نکته: فونت‌ وب یک فناوری است در مرورگرهای اینترنت اکسپلورر از نسخه 4 پشتیبانی می‌شود.

بررسی کاربرد عملی فونت وب با یک مثال

در این بخش روی یک مثال عملی از کاربرد فونت وب متمرکز می‌شویم. برای شروع دو فایل به نام‌های web-font-start.html و web-font-start.css روی یک دایرکتوری سیستم خود بسازید و محتوای زیر را به آن‌ها کپی کنید.

• فایل web-font-start.html

• فایل web-font-start.css

در فایل فوق برخی قواعد در مورد لی‌آوت مقدماتی صفحه وب مثال مورد نظر ما ارائه شده است.

یافتن فونت‌ها

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

• توزیع‌کننده فونت رایگان: این‌ها سایت‌هایی هستند که فونت‌های رایگان را برای دانلود عرضه می‌کنند. البته این فونت‌ها ممکن است همچنان برخی شرایط استفاده از قبیل ارجاع به سازنده فونت داشته باشند. نمونه‌هایی از این وب‌سایت‌ها شامل Font Squirrel ،dafont و Everything Fonts هستند.
• توزیع‌کننده فونت پولی: این‌ها وب‌سایت‌هایی هستند که با پرداخت پول می‌توان از آن‌ها فونت تهیه کرد. نمونه‌های آن شامل fonts.com یا myfonts.com است. همچنین می‌توان با پرداخت پول مستقیماً فونت را از سازندگان آن خریداری کرد. این کار در وب‌سایت‌های Linotype ،Monotype و Exljbris ممکن است.
• سرویس فونت آنلاین: این‌ها‌ وب‌سایت‌هایی هستند که فونت‌ها را برای شما ذخیره و عرضه می‌کنند که موجب تسهیل بیشتر فرایند می‌شود. در ادامه در این مورد بیشتر توضیح می‌دهیم.

اکنون باید چند فونت پیدا کنیم. به وب‌سایت Font Squirrel بروید و دو فونت انتخاب کنید. یک فونت با ظاهر زیبا برای عناوین صفحه استفاده می‌شود و دیگری که ظاهر معمولی‌تر و خوانایی بیشتر دارد برای پاراگراف‌های متن مورد استفاده قرار خواهد گرفت. زمانی که هر یک از این فونت‌ها را یافتید، روی دکمه دانلود آن بزنید و فونت را درون همان دایرکتوری که فایل‌های HTML و CSS را ذخیره کرده‌اید، قرار دهید. مهم نیست که قالب فایل فونت به صورت OTF یا TTF باشد.

در هر مورد پکیج فونت را Unzip کنید. درون پکیج ممکن است چندین فایل فونت مشاهده کنید. برخی فونت‌ها به صورت خانواده با نسخه‌های متفاوت برای نمونه به صورت thin‌،medium،‌ bold‌،italic، thin italic و غیره ارائه می‌شوند. در این مثال ما صرفاً برای هر گزینه از یک فونت منفرد استفاده خواهیم کرد.

نکته: در وب‌سایت Font Squirrel، ‌زیر عنوان Find fonts در ستون سمت راست، می‌توانید روی تگ‌ها و دسته‌بندی‌های مختلف کلیک کنید تا گزینه‌های نمایش‌یافته فیلتر شوند.

تولید کد مورد نیاز

اکنون باید کد مورد نیاز و قالب‌های مورد نظر خود را برای فونت‌هایمان تولید کنیم برای هر فونت باید مراحل زیر طی شوند:

1. در صورتی که قرار است از فونت در یک پروژه تجاری یا وب استفاده کنید، باید مطمئن شوید که الزامات پروانه فونت را رعایت کرده‌اید.
2. به بخش Webfont Generator (+) وب‌سایت Font Squirrel بروید.
3. دو فایل فونت مورد نظر را با استفاده از دکمه Upload Fonts آپلود کنید.
4. تیک گزینه Yes, the fonts I'm uploading are legally eligible for web embedding را بزنید.
5. روی گزینه Download your kit کلیک کنید.

پس از این که فرایند کار پایان یافت، یک فایل ZIP دریافت می‌کنید که باید دانلود و در همان دایرکتوری پروژه ذخیره کنید.

پیاده‌سازی کد در دمو

در این زمان کیت فونت وب را از حالت فشرده خارج کنید. درون دایرکتوری Unzip –شده سه آیتم مفید وجود دارد:

• نسخه‌های متعدد از هر فونت که شامل انواع فایل‌های ‎.ttf و ‎.woff و ‎.woff2 و غیره است. فونت دقیق مورد نظر در طی زمان با تغییر یافتن الزامات پشتیبانی مرورگرها به‌روزرسانی می‌شود. همچنان که قبلاً اشاره کردیم چندین فونت برای پشتیبانی از مرورگرهای مختلف مورد نیاز هستند. بدین ترتیب مطمئن می‌شویم که همه موارد نیاز را در اختیار داریم.
• یک فایل HTML دمو برای هر فونت وجود دارد که این فونت‌ها را در مرورگر بارگذاری می‌کند تا با ظاهر فونت و زمینه‌های مختلف کاربردهای آن آشنا شوید.
• یک فایل stylesheet.css وجود دارد که شامل کد تولید شده font-face@ مورد نیاز است.

برای پیاده‌سازی این فونت‌ها در مثال مورد نظرمان باید مراحل زیر را طی کنیم:

1. نام دایرکتوری unzip شده را به چیز ساده‌ای مانند fonts تغییر دهید.
2. فایل stylesheet.css را باز کنید و هر دو بلوک font-face@ که درون فایل web-font-start.css قرار دارند را کپی کنید. باید آن‌ها را در ابتدای فایل و پیش از هر نوع CSS قرار دهید، چون فونت‌ها باید پیش از استفاده از آن‌ها در سایت، ‌بارگذاری شوند.
3. هر تابع ()url به یک فایل فونت اشاره می‌کند که باید در CSS ایمپورت شود. باید مطمئن شویم که مسیرهای فایل‌ها صحیح هستند. بنابراین /fonts را به ابتدای هر مسیر اضافه می‌کنیم.
4. اکنون می‌توانید از این فونت‌ها در پشته فونت خود، مانند فونت‌های Web-Safe یا فونت‌های پیش‌فرض سیستم به صورت زیر استفاده کنید:

در نهایت صفحه دموی مورد نظر با پیاده‌سازی فونت‌های مربوطه باید به صورت زیر درآید. از آنجا که فونت‌های مختلف، اندازه‌های متفاوتی دارند، ممکن است لازم باشد اندازه، فاصله‌بندی و مواردی از این دست را تنظیم کنید تا ظاهر مناسبی به دست آید.

فایل‌های نهایی اینک باید به صورت زیر درآمده باشند:

• فایل web-font-finished.html

• فایل web-font-finished.css

استفاده از یک سرویس آنلاین فونت

سرویس‌های آنلاین فونت به طور کلی به ذخیره و عرضه فونت‌ها می‌پردازند، ‌بدین ترتیب دیگر نیازی به نگرانی در خصوص نوشتن کد font-face@ ندارید و صرفاً کافی است یک یا دو خط ساده در سایت خود بنویسید تا همه چیز به درستی کار کند. مواردی از این دست سرویس‌ها شامل Adobe Fonts و Cloud.typography هستند. اغلب این سرویس‌ها به صورت پولی فعالیت می‌کنند و تقریباً تنها استثنا سرویس Google Fonts است. این سرویس فونت مفید به طور خاص برای تست سریع دموها کاربرد دارد.

اغلب این سرویس‌ها کاربرد آسان دارند، از این رو به جزییات آن‌ها نمی‌پردازیم. در ادامه نگاهی گذرا به سرویس Google Fonts خواهیم داشت تا ایده کار مشخص شود. در این مورد نیز از کپی‌هایی از فایل‌های web-font-start.html و web-font-start.css که در ابتدای مقاله ارائه شدند، استفاده می‌کنیم.

مراحل کار به صورت زیر است:

1. به وب‌سایت Google Fonts (+) ‌بروید.
2. از فیلترهای مختلف سمت چپ برای نمایش انواع متفاوتی از فونت‌های موردنظرتان استفاده کنید و دو فونت مناسب را به تشخیص خود انتخاب نمایید.
3. برای انتخاب خانواده فونت روی دکمه ⊕ کنار آن بزنید.
4. زمانی که خانواده فونت را انتخاب کردید، روی نوار [Number] Families Selected در انتهای صفحه بزنید.
5. در صفحه بعدی ابتدا باید خط کد HTML را که نمایش یافته کپی کنید و در بخش head فایل HTML خود بچسبانید. بدین ترتیب فونت پیش از آن که تلاش کنید در CSS آن را مورد استفاده قرار دهید، ‌بارگذاری می‌شود.
6. سپس باید اعلان‌های CSS لیست شده در CSS را به صورت مناسب کپی کنید تا فونت‌های سفارشی در HTML اعمال شوند.

بررسی تفصیلی بخش font-face@

در این بخش به بررسی ساختار font-face@ تولید شده از سوی وب‌سایت fontsquirrel می‌پردازیم.

نمونه‌ای از این بلوک به صورت زیر است:

در ادامه به توضیح این بلوک می‌پردازیم.

• font-family – این خط نامی که می‌خواهید فونت خود را با آن نام مورد ارجاع دهید مشخص می‌سازد. می‌توانید از هر نامی که دوست دارید استفاده کنید. فقط به خاطر داشته باشید که در سراسر فایل CSS باید از همین نام استفاده کنید.
• src – این خطوط مسیرهای فایل‌های فونت که باید در CSS ایمپورت شوند (بخش url) و قالب هر فایل فونت (format) ‌را مشخص می‌سازند. بخش دوم در هر مورد اختیاری است، اما بهتر است اعلان شود، ‌زیرا به مرورگرها امکان می‌دهد که از فونت‌ها سریع‌تر استفاده کنند. چند اعلان می‌توان فهرست کرد که با کاما از هم جدا می‌شوند و مرورگر آن‌ها را جستجو می‌کند و نخستین موردی که پیدا کند را مورد استفاده قرار می‌دهد. بنابراین بهتر است فرمت‌های بهتر و جدیدتر مانند WOFF2 را در ابتدا قرار دهید و فرمت‌های قدیمی‌تر مانند TTF را در انتهای لیست خود بیاورید. یک استثنا در این مورد فونت‌های EOT است. این فونت‌ها در ابتدا برای اصلح برخی باگ‌ها در نسخه‌های قدیمی‌تر IE طراحی شدند، ‌بدین ترتیب این مرورگر تلاش می‌کند حتی در صورتی که نتواند از فونت استفاده کند، از نخستین چیزی که پیدا می‌کند بهره بگیرد.
• font-weight/font-style – این خطوط وزن فونت‌ها و این که باید ایتالیک باشند یا نه را تعیین می‌کنند. اگر مشغول ایمپورت کردن وزن‌های مختلفی از یک فونت هستید، می‌توانید تعیین کنید که وزن/سبک متفاوتی در بخش font-weight/font-style: مورد استفاده قرار گیرد و دیگر نیازی به فراخوانی اعضای مختلف خانواده فونت با نام‌های متفاوت وجود نخواهد داشت.

نکته: امکان تعیین مقادیر font-variant و font-stretch نیز برای فونت‌های وب وجود دارد. در مرورگرهای جدیدتر، می‌توان حتی مقدار unicode-range را تنظیم کرد که یک بازه خاصی از کاراکترهای مورد استفاده در وب فونت است. امکان انجام این کار در مرورگرهای پشتیبانی‌شده وجود دارد و تنها کاراکترهایی که مورد نیاز هستند از فونت خاص دانلود می‌شود. بدین ترتیب از دانلود موارد غیر ضروری اجتناب می‌شود.

فونت‌های متغیر

یک فناوری جدید فونت در مرورگرها وجود دارد که «فونت متغیر» (Variable font) نامیده می‌شود. این فونت‌ها امکان گنجاندن نسخه‌های متفاوتی از یک تایپ‌فیس را در یک فایل منفرد فراهم می‌سازند. بدین ترتیب به جای این که برای هر عرض، ‌وزن یا سبک فونت از فایل متفاوتی استفاده کنیم، صرفاً از یک فایل بهره می‌گیریم.

سخن پایانی

در این مقاله با روش استفاده از فونت وب آشنا شدیم.

فیلم مجموعه آموزش HTML و CSS برای طراحی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

بدین ترتیب شما اکنون با مبانی مقدماتی استایل‌بندی متن در CSS آشنا شده‌اید. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

• آشنایی با CSS Layout — آموزش CSS (بخش بیست و پنجم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی وب با CSS
• مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی

==