استفاده از fontface در css برای اضافه کردن و استفاده از فونت دلخواه در سایت هست، ما براحتی میتوانیم از هر فونتی که میخواهیم در سایت استفاده کنیم و این کار با دستورات فونت فیس امکان پذیر میباشد در فیلم آموزشی بالا آموزش font face و نحوه انجام این کار را با استفاده از fontface در css براحتی یادمیگیرید
مبحث استفاده از fontface یکی از مهم ترین مباحثی هست که هر طراح سایتی حتما لازمه که استفاده از اون رو کامل و به شکل اصولی بلد باشه که در این فیلم آموزش font face کاملا باهاش اشنا میشیم. ( آموزش html )
شما وقتی توی سایتتون میخواین از فونت هایی غیر از tahoma و arial استفاده کنین لازمه که فایل اون فونت هارو با استفاده از تکنیک فونت فیس ضمیمه فایل CSS کنید تا کاربرانی که فونت استفاده شده در وبسایت شمارو در سیستمشون ندارن هم بتونن سایت شمارو با همون فونت مورد نظر شما ببینن در غیر این صورت اگر شما از هر فونتی در سایتتون استفاده کنید کاربران سایت شما رو با فونت های پیشفرض tahoma و arial میبینن
نحوه استفاده از font face : برای استفاده از fontface و استفاده از فونت فارسی در css باید در ابتدا فایل های فونت مورد نظر را با فرمت های ttf و woff در پروژه خودتون اضافه کنید برای اینکار در پوشه اصلی پروژه خودتون فولدری با نام fonts ایجاد کنید و فایل های فونت با فرمت های ttf و woff را داخل آن کپی کنید. مثلا اگر میخواید از فونت iransans استفاده کنید باید دو فایل با نام iransans.ttf و iransans.woff در فولدر fonts اضافه کنید.
در مرحله بعدی حالا باید این فایل هارو به پروژه خودتون معرفی کنید که برای اینکار دستورات fontface را طبق کد زیر به فایل style.css پروژه خودتون اضافه کنید
در خط اول در قسمت خصوصیت font-fmily ما یک نام برای استفاده از این فونت انتخاب میکنیم این نام میتونه دلخواه باشه که ما گذاشتیم iransans
در قسمت src هم آدرس فایل فونتی که به پروژه اضافه کردیم رو باید بنویسیم که ما فایل هارو داخل فولدر fonts قرار دادیم نکته (اگر اسم پوشه یا فایل فونت شما متفاوت هست در قسمت src باید نام فولدر خودتون رو قرار بدید) و تمام
حالا هر جایی سایتتون که خواستید از این فونت استفاده کنید فقط کافیه به کلاس اون عنصر خصوصیت font-family شو برابر با iransans قرار بدید (این iransan همون اسمی هست که در کد fontface انتخاب کردیم و گفتیم دلخواهه)
مثلا اگر بخوایم کل وبسایتمون از این فونت استفاده کنه فقط کافیه المان body رو در css انتخاب کنیم و font-family شو روی iransans تنظیم کنیم طبق کد زیر :
اعمال نشدن فونت در css تنها احتمالی که داره اینه که آدرس دهی فونتتون مشکل داشته – حالا یا اسم فونت رو به درستی در قسمت fontface ننوشتید یا اسم فولدر رو اشتباه نوشتید یا اینکه در دستور فونت فیس نامی که برای فونت مشخص کردید با نامی که برای اسفاده اون رو صدا میزنید متفاوت هست این سه مورد رو بررسی کنید قطعا مشکلی نباید داشته باشه ضمنا فیلم آموزشی بالارو اگر نگاه کنید براحتی همه چیز رو متوجه میشید و نیازی به توضیحات متنی بیشتر نیست.
فونت های وب فرمت های مختلفی دارند که هدکدام در یک مرورگر پشتیبانی میشود لذا فونتی که میخواهید در وبسایت تان استفاده کنید باید فرمت های مختلفش را هم اضافه کنید تا در همه مرورگر ها پشتیبانی شود در زیر چند نمونه از فرمت های مختلف را میبینید :
فرمت TTF : مخفف TrueType Font است این فونت که توسط شرکت اپل و مایکروسافت که بیشترین استفاده را هم در سیستم عامل های مگ و ویندوز دارد ایجاد شده و یک فرمت استاندارد است.
فرمت OTF : مخفف OpenType Font این فونت هم توسط شرکت مایکروسافت ساخته شده و زیرمجموعه فرمت TTF است.
فرمت WOFF : مخفف WebOpenFontFormat یکی از فرمت های مختص صفحات وب که ترکیبی از فرمت های TTF و OTF میباشد
فرمت WOFF2 : مخفف WebOpenFontFormat درواقع همان WOFF است اما در این فرمت فشرده سازی بیشتری صورت گرفته و نسخه جدیدتری است.
فرمت SVG : مخفف ScalableVectorGraphics این فرمت را بیشتر برای مرورگر سافاری میشناسند و در مرورگر های فایرفاکس و اینترنت اکسپلورر پشتیبانی نمیشود همچنین این فرمت سرعت لود فراخوانی بالایی هم دارد.
فرمت EOT : مخفف Embedded OpenType است و نسخه بهبود یافته فرمت OTF است و فقط هم در مرورگر IE پشتیبانی میشود.
در بالا فرمت های مختلفی از فرمت های فونت وب را آوردیم اما آیا لازم است همیشه همه این فرمت هارا داشته باشیم و به صفحه اضافه کنیم؟ قائدتا هدف این است که فونت مورد نظر ما بدون هیچ کم و کاستی در همه مرورگر ها به درستی نمایش داده شود اما با توجه به اینکه مثلا الان اکثر کاربران از مرورگرهای کروم و فایرفاکس استفاده میکنند و کمترکسی پیدا میشود که از مرورگر های IE و حتی سافاری استفاده کند پس اگر بخواهیم فقط از یکی دو فرمت TTF و WOFF هم استفاده میکنیم کفایت میکند و لازم نیست که حتما همه فرمت ها را اضافه کنیم ضمن اینکه باز اگر روی این مسئله تاکید سایت هایی هستند که کار تبدیل فرمت های فونت را انجام میدهند و شما میتوانید صرفا با داشتن یکی از فرمت ها، فرمت های دیگر آن را هم دریافت کنید. یکی از بهترین سایت هایی که در زمینه تبدیل فرمت های فونتی کار میکند onlinefontconverter است که میتوانید از آن استفاده کنید. ( آموزش font face )
در جدول زیر اطلاعات کاملی از پشتیبانی نسخه های مختلف مرورگر ها از فرمت های وب فونت و همچنین دستور fontface میبینید :
به پایان آموزش font face رسیدیم امیدوارم این آموزش هم برای شما مفید بوده باشه و نحوه استفاده از فونت فارسی در css را با کمک دستورات font-face یادگرفته باشید فیلم آموزشی بالا بخشی در دوره آموزش html و css هست امیدوارم مورد توجه تون قرار گرفته باشه در ضمن اگر علاقه ای به یادگیری کدنویسی هم ندارید میتوانید آموزش طراحی سایت بدون کدنویسی را ببینید اگر سوال یا ابهامی در خصوص این آموزش دارید حتما در بخش نظرات بپرسید در کمترین زمان پاسخگو خواهیم بود.