سبد خرید 0
سبد خرید 0
0
وبسافت3 > فیلم آموزش وردپرس رایگان > آموزش font-face در css برای استفاده از فونت دلخواه در سایت

آموزش font-face در css برای استفاده از فونت دلخواه در سایت

دی ۲۰, ۱۳۹۳
ارسال شده توسط
فیلم آموزش وردپرس رایگان
2.47k بازدید

استفاده از fontface در css برای اضافه کردن و استفاده از فونت دلخواه در سایت هست، ما براحتی میتوانیم از هر فونتی که میخواهیم در سایت استفاده کنیم و این کار با دستورات فونت فیس امکان پذیر میباشد در فیلم آموزشی بالا نحوه انجام این کار را با استفاده از fontface در css براحتی یادمیگیرید

مبحث استفاده از fontface یکی از مهم ترین مباحثی هست که هر طراح سایتی حتما لازمه که استفاده از اون رو کامل و به شکل اصولی بلد باشه که در این فیلم آموزشی کاملا باهاش اشنا میشیم

 

کاربرد font face چیست؟

شما وقتی توی سایتتون میخواین از فونت هایی غیر از tahoma و arial استفاده کنین لازمه که فایل اون فونت هارو با استفاده از تکنیک فونت فیس ضمیمه فایل CSS کنید تا کاربرانی که فونت استفاده شده در وبسایت شمارو در سیستمشون ندارن هم بتونن سایت شمارو با همون فونت مورد نظر شما ببینن در غیر این صورت اگر شما از هر فونتی در سایتتون استفاده کنید کاربران سایت شما رو با فونت های پیشفرض tahoma و arial میبینن

 

نحوه استفاده از fontface در css

برای استفاده از 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

اعمال نشدن فونت در css تنها احتمالی که داره اینه که آدرس دهی فونتتون مشکل داشته – حالا یا اسم فونت رو به درستی در قسمت fontface ننوشتید یا اسم فولدر رو اشتباه نوشتید یا اینکه در دستور فونت فیس نامی که برای فونت مشخص کردید با نامی که برای اسفاده اون رو صدا میزنید متفاوت هست این سه مورد رو بررسی کنید قطعا مشکلی نباید داشته باشه ضمنا فیلم آموزشی بالارو اگر نگاه کنید براحتی همه چیز رو متوجه میشید و نیازی به توضیحات متنی بیشتر نیست.

 

امیدوارم این آموزش هم برای شما مفید بوده باشه و نحوه استفاده از فونت فارسی در css را با کمک دستورات font-face یادگرفته باشید فیلم آموزشی بالا بخشی در دوره آموزش html و css هست امیدوارم مورد توجه تون قرار گرفته باشه اگر سوال یا ابهامی در خصوص این آموزش دارید حتما در بخش نظرات بپرسید در کمترین زمان پاسخگو خواهیم بود.

اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

15 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • سلام واقعا ممنون از زحمات بی شمارتون .من دانشجوی رشته شیمی هستم اما علاقه زیادی به طراحی دارم وتمام آموزشای تصویریتون کمک بزرگی بهم بود گرچه هنوزم چیز زیادی بلد نیستم اما به یادگیری ادامه میدم البته با همین کمکای بی دریغتون باید بگم خداقوت

    پاسخ

    • سلام خواهش میکنم خیلی ممنون از لطف و انگیزه ای که میدین خوشحالم که آموزش ها مورداستفادتون قرار گرفته موفق باشید

      پاسخ

  • سلام رضا جان ابتدا مجدد تشکر می کنم از آموزش های عالیتون بعد اینکه یک مشکل عجیب دارم راستش خودم متوجه نشدم مشکل از کجاست اون هم اینه من چند فونت به سی اس اس (طبق آموزش) اضافه کردم اما فقط یک فونت را تو مرورگر نمایش میده اولین فونتم تیتر است که تعریف کردم به خوبی هرقسمتی فرخوانی می کنم به خوبی عمل می کنه ولی هر فونت دیگری اضافه می کنم و درقسمت کد فراخوانی می کنم اصلا تغییری نمی کنه نمی دونم مشکل از کجاست ممنون میشم کمکم کنید

    پاسخ

    • سلام ممنون از لطفتون
      عجیبه! خب اگه یه فونت رو میشناسه طبق کدهای همون یه فونت دیگه رو اضافه کنی باید بشناسه دیگه! طبق توضیحاتتون احتمال میدم تویه ادرس دهی یا تایپ دقیق اسم فونت اشتباهی رخ داده

      پاسخ

      • ممنونم استاد که زود پاسخ می دهید به نظرات و راهنمایی می کنید من راستش چندین فونت را تست کردم بعضی از فونت هارو مرورگر نمایش میده مثل فونت کودک ولی بعضی فونت ها را خیرمثل فونت یکان … یک مشکل دیگه که دارم اینه که در قسمت منو اصلی هر اسم فونتی را فراخوانی می کنم حرف “ی” به صورت جدا نمایش میده ولی روی فونت پیش فرض هیچ مشکلی نداره نمی دونم دلیل این چیه واقعا ببخشید سوالاتم زیاد شد

        پاسخ

  • استاد ممنون مشکلم حل شد گفتم در سایت شما هم مطرح کنم که بقیه دوستان هم استفاده کنن کد زیر را در css قرار دادم

    @font-face {
    font-family: ‘farnaz’;
    src: url(‘fonts/STITRBD.eot’);
    src: url(‘fonts/STITRBD.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/STITRBD.woff’) format(‘woff’),
    url(‘fonts/STITRBD.ttf’) format(‘truetype’);
    }

    پاسخ

  • با سلامم و عرض خسته نباشید
    واقعا ممنونم از زحماتتون که آموزش به این سنگینی رو برامون ارائه میدین
    بنده در قسمت نهم فیلم برام مشکلی پیش اومده
    قسمت قرار دادن لوگو بر روی هدر …بنده تمامی کدها را طبق کدهایی که شما قرار میدین،قرار دادم ولی لوگو بر روی هدر ظاهر نمیشن…ضمنا بنده یه مقدار اشنایی دارم که باید اسم عکس با اسمی که وارد میشود باید همخوانی داشته باشد…ولی متاسفانه اجرا نمیشه…
    لطفا کمک کنید ممنونم

    پاسخ

  • ضمنا سوالی دیگری داشتم…بنده یه هاست دارم و نمیخوام از برنامه زمپ استفاده کنم…میشه راهنماییم کنید به چه شکل این دو را با هم ست کنم؟
    ممنونم یاعلی

    پاسخ

    • سلام دوست عزیز تویه دوره جدید طراحی قالب وردپرس که هم اکنون در حال ضبط هست این مورد گفته شده یعنی نحوه ثبت هاست و دامین و کاربا سی پنل و ایجاد دیتابیس و راه اندازی کامل سایت روی هاست بصورت کامل توضیح داده شده که اگه مایل بودین میتونین از اون دوره استفاده کنین(هنوز منتشر نشده)

      پاسخ

  • با سلام و سپاس فراوان
    اقای حیدری زمانی که از برنامه زمپ استفاده میکنم کلی از ترافیک اینترنت بنده استفاده میشه…لطفا راهی نشان بدین که از این برنامه استفاده نکنیم…
    یا طریقه ست کردن با هاست و کار با سی پنل رو اموزش بدین…واقعا برنامه زمپ به صرفه نیست…
    ما کماکان منتظر اموزش کار با هاست و سی پنل هستیم ….
    با تشکر…
    یاعلی

    پاسخ

    • سلام دوست عزیز برنامه زمپ یه سرور محلیه و ارتباطی با اینترنت نداره!
      آموزش کامل و گام به گام تهیه هاست و دامین و کاربا سی پنل – ایجاد دیتابیس و نصب وردپرس و راه اندازی سایت روی هاست واقعی رو تویه دوره جدید طراحی قالب وردپرس توضیح دادم اون دوره هنوز منتشر نشده اما اگرخواستین میتونین پیش ثبت نام کنین – ۵تا پست اخری که تویه سایت منتشر کردم قسمت هایی از همون دوره هست و از لینک زیر هم میتونید سرفل هاشو ببینید
      http://s7.picofile.com/file/8246333934/websoft3.pdf.html

      پاسخ

پاسخ دادن به hamid_ya30 لغو پاسخ

چهار + پنج =