روش استفاده از فونت های سفارشی در طراحی وب سایت

روش استفاده از فونت های سفارشی در طراحی وب سایت

استفاده از فونت های سفارشی شده، یک راه بسیار خوب برای کمک به ایجاد یک استثنایی ب طراحی وب سایت ما است. هم اکنون روش های مختلفی برای قراردادن فونت ها در وب سایت وجود دارد که برخی از آنها در واقع بر اساس نوع انتخاب و سفارش طراحی سایت می باشد.
در این آموزش جزئیات نحوه استفاده از روش font-face @ در سایت وردپرس برای فراردادن فونت ذخیره شده محلی ، به جای استفاده از هر گونه راه حل جداگانه ای مانند Typekit یا Google Webfonts ارائه شده است.
برای ساده سازی همه چیز ، از یک وردپرس تازه نصب شده با تم پیش فرض twentyeleven استفاده خواهیم کرد، هرچند که این روش برای هر قالبی قابل استفاده است. در واقع سایت شما قبل از انجام تغییرات اینگونه به نظر خواهد رسید.
1-ابتدا فونت مورد نظر خود را انتخاب کنید
ما از فونت Carbon Block استفاده خواهیم کرد. با توجه به وجود انواع مختلف فونت های رایگان و پولی باید این مهم را نظ بگیرد که ایا این فونت مناسب حال سایت شما است یا خیر.

فونت Carbon Black
در حال حاضر هیچ نوع فایل استاندارد شده برای فونت های قابل جاسازی در مرورگرهای با نسخه های قدیمی اینترنت اکسپلورر با استفاده از فرمت خاص eot. و iPhone با استفاده از .svg وجود ندارد. اکثر مرورگرهای جدید از فرمت فونت آزاد وب (WOFF) و TrueType (TTF) پشتیبانی نمی کنند، اما برای اطمینان از اینکه طیف گسترده ای از دستگاه ها فونتها را به درستی نمایش می دهند، باید فرمت های مختلفی در دسترس باشند.

تبدیل فونت به @font-Face
به راحتی می توانید یک فونت را به تمام فرمت های مورد نیاز خود تبدیل کنید،راه حل ان استفاده از مبدل Squirrels @ font-face است. با این کار، فونت انتخاب شده شما به تمام فرمت های مورد نیاز تبدیل خواهید کرد و کد CSS مورد نیاز شما را تولید خواهد نمود.

مبدل فونت Squirrel @Front-Face
برای تبدل فونت منتخب شما یک فرمت فونت مانند ttf. یا otf. نیاز دارید. پس از اضافه کردن فونت خود به مبدل با دکمه «افزودن فونت»، بهینه سازی را انتخاب کنید و توافق را تیک بزنید. شما قادر خواهید بود فایل zip را با فرمت های مورد نیاز فونت، یک فایل .css و یک فایل تست .html دانلود کنید که در آن می توانید چک نمایید که ایا فونت را به صورت صحیح رندر کرده اید یا خیر. فایل .css چیزی شبیه زیر به نظر خواهد رسید.

کد CSS ایجاد شده Font Squirrel
این کد تقریبا آماده برای استفاده است، خانواده فونت (Font family) را می توانید به آنچه که می خواهید تغییر دهید، هر چند که اگر آن را به عنوان نام فونت باقی بگذارید می تواند به جلوگیری از سردرگمی کمک نماید اگر شما شروع به استفاده از چند فونت سفارشی نمایید. src مکان برای فونت هایی است که ممکن است بخواهید تغییر دهید، بعدا به این موضوع پرداخته خواهد شد.

شرکت طراحی سایت فانوس وب، ارائه دهنده روش های نوین طراحی سایت و سئو با صدها نمونه کار طراحی وب سایت موفق در بازار ایران و خاورمیانه می باشد.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید