آموزش CSS پیشرفته : فونتهای وب
در مقاله اول این ماژول، ویژگیهای اساسی CSS موجود برای استایلدهی به فونتها و متن را بررسی کردیم. در این مقاله، فراتر خواهیم رفت و فونتهای وب را با جزئیات بررسی خواهیم کرد. خواهیم دید که چگونه از فونتهای سفارشی در صفحه وب خود استفاده کنید تا استایلدهی متن متنوعتر و سفارشیتری داشته باشید.
همانطور که در بخش سبکدهی اساسی متن و فونت بررسی کردیم، فونتهای اعمال شده در HTML شما را میتوان با استفاده از ویژگی font-family کنترل کرد. این ویژگی یک یا چند نام خانواده فونت را میگیرد. هنگام نمایش یک صفحه وب، مرورگر لیستی از مقادیر خانواده فونت را تا زمانی که فونت موجود در سیستمی که روی آن اجرا میشود را پیدا کند، پیمایش میکند:
این سیستم به خوبی کار میکند، اما به طور سنتی انتخاب فونت توسعهدهندگان وب محدود بود. فقط تعداد انگشتشماری فونت وجود دارد که میتوانید تضمین کنید در تمام سیستمهای رایج در دسترس هستند - به اصطلاح فونتهای ایمن وب. میتوانید از پشته فونت برای مشخص کردن فونتهای مورد نظر، به دنبال آن جایگزینهای ایمن وب و به دنبال آن فونت پیشفرض سیستم استفاده کنید. با این حال، این کار به دلیل آزمایشهای لازم برای اطمینان از اینکه طرحهای شما با هر فونت کار میکنند، حجم کار شما را افزایش میدهد.
یک جایگزین وجود دارد که به خوبی کار میکند. CSS به شما امکان میدهد فایلهای فونت موجود در وب را مشخص کنید تا هنگام دسترسی به وبسایت شما، همراه با آن دانلود شوند. این بدان معناست که هر مرورگری که از این ویژگی CSS پشتیبانی میکند، میتواند فونتهایی را که شما به طور خاص انتخاب کردهاید نمایش دهد. شگفتانگیز است! سینتکس مورد نیاز چیزی شبیه به این است:
اول از همه، شما یک مجموعه قانون در ابتدای CSS دارید که فایل(های) فونتی را که باید دانلود شوند، مشخص میکند:
در زیر این، شما از نام خانواده فونت مشخص شده در داخل برای اعمال فونت سفارشی خود به هر چیزی که دوست دارید، طبق معمول استفاده میکنید:
سینتکس کمی پیچیدهتر از این میشود. در ادامه به جزئیات بیشتری خواهیم پرداخت.
در اینجا چند نکته مهم در مورد فونتهای وب وجود دارد که باید در نظر داشته باشید:
استفاده از فونتها معمولاً بدون محدودیت رایگان نیست. شما باید برای آنها هزینه بپردازید و/یا سایر شرایط مجوز، مانند ذکر نام خالق فونت در کد خود (یا در سایت خود) را رعایت کنید. نباید فونتها را بدزدید و بدون ذکر نام مناسب از آنها استفاده کنید.
همه مرورگرهای اصلی از WOFF/WOFF2 (فرمت فونت باز وب نسخههای 1 و 2) پشتیبانی میکنند. حتی مرورگرهای قدیمیتر مانند IE9 (منتشر شده در سال 2011) از فرمت WOFF پشتیبانی میکنند.
WOFF2 از تمام مشخصات TrueType و OpenType، از جمله فونتهای متغیر، فونتهای رنگی و مجموعههای فونت، پشتیبانی میکند.
ترتیب فهرست کردن فایلهای فونت مهم است. اگر لیستی از چندین فایل فونت را برای دانلود در اختیار مرورگر قرار دهید، مرورگر اولین فایل فونتی را که میتواند استفاده کند انتخاب میکند. به همین دلیل است که فرمتی که ابتدا فهرست میکنید باید فرمت ترجیحی - یعنی WOFF2 - باشد و فرمتهای قدیمیتر پس از آن فهرست شوند. مرورگرهایی که یک فرمت را درک نمیکنند، به فرمت بعدی در لیست برمیگردند.
اگر نیاز به کار با مرورگرهای قدیمی دارید، باید فونتهای وب EOT (Embedded Open Type)، TTF (TrueType Font) و SVG را برای دانلود ارائه دهید. این مقاله نحوه استفاده از Fontsquirrel Webfont Generator را برای تولید فایلهای مورد نیاز توضیح میدهد.
شما میتوانید از ویرایشگر فونت فایرفاکس برای بررسی و دستکاری فونتهای مورد استفاده در صفحه خود، چه فونت وب باشند و چه نباشند، استفاده کنید.
افزودن فونتهای وب خودتان
با در نظر گرفتن این موضوع، بیایید یک مثال اولیه از فونت وب را از اصول اولیه بسازیم.
برای این مثال، ما از دو فونت وب استفاده خواهیم کرد: یکی برای سرتیترها و یکی برای متن اصلی. برای شروع، باید فایلهای فونتی را که حاوی فونتها هستند پیدا کنیم. فونتها توسط شرکتهای فونتسازی ایجاد میشوند و در قالبهای فایل مختلف ذخیره میشوند. به طور کلی سه نوع سایت وجود دارد که میتوانید فونتها را از آنها دریافت کنید:
توزیعکننده فونت رایگان: این سایتی است که فونتهای رایگان را برای دانلود در دسترس قرار میدهد (ممکن است هنوز برخی شرایط مجوز، مانند اعتبار دادن به سازنده فونت، وجود داشته باشد). نمونههایی از آن عبارتند از DaFont، Font Squirrel و Everything Fonts.
توزیعکننده فونت پولی: این سایتی است که فونتها را با پرداخت هزینه در دسترس قرار میدهد، مانند myfonts.com. همچنین میتوانید فونتها را مستقیماً از شرکتهای فونتسازی خریداری کنید، به عنوان مثال Monotype و Exljbris.
یک سرویس فونت آنلاین: این سایتی است که فونتها را برای شما ذخیره و ارائه میدهد و کل فرآیند را آسانتر میکند. برای جزئیات بیشتر به بخش استفاده از سرویس فونت آنلاین مراجعه کنید.
بیایید چند فونت پیدا کنیم! به Font Squirrel بروید و دو فونت انتخاب کنید: یک فونت جالب و زیبا برای سرتیترها (شاید یک فونت خوب display یا slab serif) و یک فونت کمی کمزرقوبرقتر و خواناتر برای پاراگرافها. وقتی فونتی پیدا کردید، دکمه دانلود را فشار دهید و فایل را در همان دایرکتوری فایلهای HTML و CSS که قبلاً ذخیره کردهاید، ذخیره کنید. فرقی نمیکند که TTF (فونتهای True Type) باشند یا OTF (فونتهای Open Type).
دو بسته فونت را از حالت فشرده خارج کنید (فونتهای وب معمولاً در فایلهای ZIP حاوی فایل(های) فونت و اطلاعات مجوز توزیع میشوند). ممکن است چندین فایل فونت را در بسته پیدا کنید - برخی از فونتها به صورت یک خانواده با انواع مختلف موجود توزیع میشوند - به عنوان مثال، نازک، متوسط، ضخیم، ایتالیک، ایتالیک نازک و غیره. برای این مثال، ما فقط میخواهیم که برای هر انتخاب، به یک فایل فونت واحد بپردازید.
در Font Squirrel، در بخش «یافتن فونتها» در ستون سمت راست، میتوانید روی برچسبها و طبقهبندیهای مختلف کلیک کنید تا گزینههای نمایش داده شده را فیلتر کنید.
حالا باید کد (و فرمتهای فونت) مورد نیاز را تولید کنید. برای هر فونت، این مراحل را دنبال کنید:
اگر میخواهید از این فونت در یک پروژه تجاری و/یا وب استفاده کنید، مطمئن شوید که هرگونه الزامات مجوز را برآورده کردهاید.
به Transfonter Webfont Generator بروید.
دو فایل فونت خود را با استفاده از دکمه Add fonts آپلود کنید.
روی Convert کلیک کنید.
روی Download کلیک کنید.
پس از دانلود فایل ZIP، آن را از حالت فشرده خارج کرده و به همان دایرکتوری HTML و CSS خود منتقل کنید.
پیادهسازی کد در نسخه آزمایشی شما
درون پوشهی از حالت فشرده خارج شده، موارد مفیدی را مشاهده خواهید کرد:
دو نسخه از هر فونت: فایلهای و .
یک فایل HTML نمایشی برای هر فونت - این فایلها را در مرورگر خود بارگذاری کنید تا ببینید فونت در زمینههای مختلف استفاده چگونه به نظر میرسد.
یک فایل که شامل کد تولید شدهی مورد نیاز شماست.
برای پیادهسازی این فونتها در نسخه نمایشی خود، این مراحل را دنبال کنید:
نام پوشهی از حالت فشرده خارج شده را به چیزی آسان و ساده، مانند fonts، تغییر دهید.
فایل را باز کنید و دو مجموعه قوانین را در فایل خود کپی کنید - باید آنها را در بالا، قبل از هر یک از CSSهای خود قرار دهید، زیرا فونتها قبل از استفاده در سایت شما باید وارد شوند.
هر یک از توابع به یک فایل فونت اشاره میکنند که میخواهیم در CSS خود وارد کنیم. ما باید مطمئن شویم که مسیر فایلها درست است، بنابراین را به ابتدای هر مسیر اضافه کنید (در صورت لزوم تنظیم کنید).
حالا میتوانید از این فونتها در مجموعه فونتهای خود، درست مانند هر فونت امن وب یا فونت پیشفرض سیستم، استفاده کنید. برای مثال:
در نهایت باید یک صفحه آزمایشی با فونتهای زیبا داشته باشید. از آنجایی که فونتهای مختلف در اندازههای مختلفی ایجاد میشوند، ممکن است مجبور شوید اندازه، فاصله و غیره را تنظیم کنید تا ظاهر و حس بهتری داشته باشید.
استفاده از یک سرویس فونت آنلاین
سرویسهای فونت آنلاین عموماً فونتها را برای شما ذخیره و ارائه میدهند، بنابراین لازم نیست نگران نوشتن کد باشید. در عوض، معمولاً فقط کافی است یک یا دو خط کد ساده را در سایت خود وارد کنید تا همه چیز کار کند. نمونههایی از جمله Adobe Fonts و Cloud.typography. اکثر این سرویسها مبتنی بر اشتراک هستند، به استثنای قابل توجه Google Fonts، یک سرویس رایگان مفید، به خصوص برای کار تست سریع و نوشتن نسخههای نمایشی.
استفاده از اکثر این سرویسها آسان است. بیایید نگاهی سریع به Google Fonts بیندازیم تا بتوانید ایده بگیرید. باز هم، از کپیهای web-font-start.html و web-font-start.css به عنوان نقطه شروع خود استفاده کنید.
به Google Fonts بروید.
با استفاده از فیلترها و نوار جستجو، چند فونت مورد علاقه خود را پیدا کنید.
برای باز کردن صفحه جزئیات آن، روی یک فونت کلیک کنید.
وقتی فونتی را که دوست دارید پیدا کردید، روی دکمه Get font در صفحه جزئیات آن کلیک کنید تا آن را به صفحه فونتهای انتخاب شده اضافه کنید. اگر میخواهید فونت دیگری اضافه کنید، روی دکمه برگشت مرورگر خود کلیک کنید و دوباره جستجو کنید. پس از انتخاب فونتها، روی دکمه دریافت کد جاسازی در صفحه فونتهای انتخابشده کلیک کنید و عناصر ارائهشده را کپی کنید.
عناصر را در سند HTML خود، بالای هرگونه لینک موجود در stylesheet، جایگذاری کنید.
قوانین CSS مربوط به font-family ارائهشده را کپی کنید و از آنها در CSS خود برای اعمال فونتها، به روشی مشابه با راهنمای قبلی، استفاده کنید.
font-face با جزئیات بیشتر
بیایید سینتکس که توسط Transfonter برای شما ایجاد شده است را بررسی کنیم. مجموعه قوانین چیزی شبیه به این خواهد بود:
بیایید آن را بررسی کنیم تا ببینیم چه کاری انجام میدهد:
font-family: این خط نامی را که میخواهید به فونت بدهید، مشخص میکند. این میتواند هر چیزی باشد که دوست دارید، تا زمانی که به طور مداوم در سراسر CSS خود از آن استفاده کنید.
src: این خطوط مسیر فایلهای فونتی را که باید به CSS شما وارد شوند (بخش url) و قالب هر فایل فونت (بخش format) را مشخص میکنند. بخش دوم در هر مورد اختیاری است، اما اعلان آن مفید است زیرا به مرورگرها اجازه میدهد تا سریعتر مشخص کنند که از کدام فونت میتوانند استفاده کنند. میتوان چندین اعلان را فهرست کرد و با کاما از هم جدا کرد. از آنجا که مرورگر طبق قوانین آبشاری آنها را جستجو میکند، بهتر است قالبهای مورد نظر خود، مانند WOFF2، را در ابتدا ذکر کنید.
font-weight/font-style: این خطوط وزن فونت و ایتالیک بودن یا نبودن آن را مشخص میکنند. اگر چندین وزن از یک فونت یکسان را وارد میکنید، میتوانید وزن/سبک آنها را مشخص کنید و سپس از مقادیر مختلف font-weight/font-style برای انتخاب بین آنها استفاده کنید، به جای اینکه مجبور باشید به همه اعضای خانواده فونت نامهای مختلف بدهید. نکته
: تعریف font-weight و font-style برای ساده نگه داشتن CSS شما توسط راجر جوهانسون، جزئیات بیشتری را در مورد نحوه نمایش فونت نشان میدهد.
font-display: این خط نحوه نمایش فونت را هنگام بارگیری مشخص میکند.
همچنین میتوانید مقادیر خاصی برای تنظیمات تغییر فونت و کشش فونت برای فونتهای وب خود مشخص کنید. در مرورگرهای جدیدتر، میتوانید مقدار unicode-range را نیز مشخص کنید، که محدوده خاصی از کاراکترهایی است که ممکن است بخواهید از فونت وب استفاده کنید. در مرورگرهای پشتیبانیکننده، فونت فقط در صورتی دانلود میشود که صفحه حاوی آن کاراکترهای مشخص شده باشد و از دانلودهای غیرضروری جلوگیری شود. کتاب «ایجاد پشتههای فونت سفارشی با Unicode-Range» نوشته درو مکللان، ایدههای مفیدی در مورد نحوه استفاده از این موارد ارائه میدهد.
