دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS
آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS

آموزش استفاده از فونت ( Font ) دلخواه در فیلم آموزشی CSS

جلسه قبل که در مورد Text آموزش دادیم و در این قسمت از فیلم آموزش CSS نحوه استفاده از فونت دلخواه در CSS را آموزش داده ایم که در طراحی سایت زیاد استفاده می شود و مبحث خیلی مهمی است پس این آموزش رو از دست ندید .

خاصیت Font-family :

با استفاده از این خاصیت می توان فونت مورد نظر را انتخاب کرد ، اگر از قبل فونتی را اضافه کرده باشید می توانید اسم آن را بنویسید تا فونت در جایی که استفاده کرده اید اعمال شود .

اگر هم از فونت های پیش فرض می خواهید استفاده کنید فقط کافیه که اسم اون رو بنویسید مانند کد زیر در CSS :

نحوه استفاده از font-face@ در CSS

این خاصیت در CSS3 برای اضافه کردن فونت دلخواه معرفی شد و همه مرورگرها از این خاصیت پشتیبانی نمی کنند بلکه نسحه های جدید مرورگر ها از این خاصیت پشتیبانی می کنند .

مرورگر های فایرفکس ، اپرا ، کروم  ، سافاری از دو نوع فرمت ttf. و otf. پشتیبانی می کنند . برای به دست آوردن فرمت های مختلف فونت مورد نظرتان می توانید به سایت های زیر مراجعه کنید :

www.onlinefontconverter.com

www.font2web.com

حالا برای اضافه کردن فونت مورد نظرتان در ابتدای فایل CSS کد های زیر را وارد کنید :

همان طور که می بینید اول خاصیت font-face@ را نوشته ایم بعد با استفاده از font-family یک نام دلخواه برای فونت انتخاب کرده ایم و با استفاده از url آدرس جایی که فونت اونجا فرا داره رو مشخص می کنیم و با format باید فرمت فونت را مشخص کنیم .

در سورس کد بالا فقط از فرمت ttf. استفاده کرده ایم حالا برای اضافه کردن فرمت های دیگه یه فونت مانند سورس کد زیر عمل می کنیم :

به کاما ( , ) دقت کنید . حالا برای چی از فرمت های دیگه هم استفاده می کنیم ؟؟؟ همه مرورگر ها از فرمت ttf. پشتیبانی نمی کنند و باید فرمت هایی که اون مرورگر ها پشتیانی می کنند را هم اضافه کنیم مثلاً : اکسپلورر 9 به بعد از فرمت eot پشتیبانی می کند و نسحه های قدیمی ios از فرمت svg پتیبانی می کند . مرورگر های جدید از فرمت woff پشتیبانی می کنند .

اضافه کرن چندین فونت در صفحه :

شما می توانید هر چند تا که فونت خواستید اضافه کنید مانند سورس کد زیر :

حالا برای استفاده از این font هایی که اضافه کرده اید کافیه از خاصیت font-family استفاده کنید و مقدار آن را برابر اسم فونت مورد نظرتان قرار بدید .

خاصیت font-size :

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

خاصیت font-weight :

اگر بخواهیم فونت به صورت نرمال باشد مقدار این خاصیت را برابر normal قرار می دهیم و اگر بخواهیم فونت به صورت بولد باشد مقدار این خاصیت را برابر bold در نطر می گیریم .

خاصیت font-style :

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

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

 

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *