illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

استفاده از فونت های آپلود شده در هاست در صفحات وب

23995 ۱۸ مرداد ۹۱

امروز قصد دارم آموزش چگونگی تغییر فونت سایت رو خدمتتون ارائه بدم. برای اینکه فونت سایتتون رو عوض کنید ، دوتا روش وجود داره،روش اول اینه که سورس سایت رو دستکاری کنید و مثلأ اگه فونت سایت شما Tahoma  هست، اونو عوض کنید و بذارید که فونت دیگه ؛مثلأ Arial ،اما مشکل این روش اینجاست که فونت جدید در صورتی روی مرور گر بیننده ی سایت شما اجرا میشه که اون فونت روی سیستم اون کاربر نصب شده باشه،اما من امروز روشی رو خدمتتون ارائه می کنم تا بتونید فونت سایتتون رو به هر فونت دیگه ای که بخواید تغییر بدید و حتی اگه اون فونت روی کامپیوتر بیننده نباشه،باز هم توی مرور گر کاربر نشون داده بشه!

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

فونت ها برای اجرا روی هر مرورگر،نیاز هست که فرمتشون یه چیز خاص باشه،مثلأ اینترنت اکسپلوریر فونت eot  رو نمایش میده و گوگل کروم فونت woff رو میتونه نمایش بده،پس برای اینه سایتمون فونتش توی همه ی مرور گرها یکی باشه،باید فونتمون رو که با فرمت ttf هست،به دوتا فرمت دیگه که گفتم هم تبدیل کینم و بعد سه تا فایل که همشون یه فونت هستن و فقط فرمتشاون فرق می کنه رو باید روی هاست قرار بدیم.

شروع آموزش تغییر فونت:

برای اینکار باید فونت رو علاوه بر فرمت ttf  که خودش هست،به دو تا فرمت دیگه تبدیل کنیم(بعضی سایت ها این کار رو میکنن براتون)

بعد اونو توی هاست قرار بدیم(من یه پوشه میسازم با نام font  و فونت ها رو قرار میدم داخل این پوشه.

حالا هر کرکدوم از صفحاتی که خواستید فونتش تغییر کنه،باید عبارت زیر رو قبل از تگ </head>

توی اون صفحه قرار بدیم.

توضیح:اگه در کد بالا دقت کنید،بین دوتا علامت ' ' نوشتم BDavat ، این همون اسم فونت مورد نظر منه که توی هاستم آپلودش کردم

حالا اگه دقت کنید می بینید من سه جا نوشتم

من سه بار فونتمو با سه فرمت متفاوت معرفی کردم و هربار گفتم که اگه فلان مرور گر بود،فونت با فلان فرمت اجرا بشه؛اول هر سه آدرس هم نوشته font/ که این اسم پوشه ای هست که روی هاسته و فونتا داخلشن.

آخر کد هم می بینید که نوشتم:

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

اما ادامه :

حالا اگه این کد بالا توی صفحه باشه ، اتفاقی نمیفته و فونت تغییر نمی کنه، پس چه باید کرد؟؟؟

جواب : هر کدوم از متن هایی که خواستید فونتش تغییر کنه،باید کلاسشو برابر همین کلاسی که تعریف کردیم قرار بدین،یعنی چه؟؟

یعنی مثلأ اگه شما متن زیر رو توی یه صفحه دارید:

به این شکل تغییرش بدید:

ما تنها کاری که کردیم،این بود که توی تگ فونت،عبارت class="BDavat" رو اضافه کردیم.

حالا مشاهده می کنید که فونت صفحه عوض خواهد شد

در ضمن من تعدادی فونت فارسی زیبا که به هرسه تا فرمت تبدیل شدن رو هم ضمیمه کردم،تست کنید


موفق باشید و نظراتتون رو اعلام کنید . سؤالاتتون رو هم بپرسید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 57 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    تو سایتش رفتم ثبت نام هم کردم اما وقتی تو قسمت منیجر میرم نمیدونم چه طوری آپلود کنم :sad:

    • ‏‏
      لقمان آوند(۶ آبان ۱۳۹۱)

      خوب بگرد دنبال یه دکمه آپلودی آیکونی …
      تو کدوم یکی ثبت نام کردی ؟

  • ‏‏

    سلام اقای لقمان خسته نباشید.ببخشیدبرای اینکه فونت متون داخل یک تگdiv،فونت اپلودشده ی موردنظرماباشدازچه کدی استفاده کنیم باتوجه به اینکه من هاست ندارم؟
    منظورم کدcssهست

    • ‏‏
      سجاد دریس(۲۵ آبان ۱۳۹۱)

      سلام.
      خب بعد از اینکه فونت مورد نظرتون رو داخل فایل css وارد کردین، font-family تگ div رو با نام فونتتون مقدار دهی کنید.

      • ‏‏

        ببخشیدولی منظورم فونت های اپلودشده است نه فونتهای خودویندوز

        • ‏‏
          سجاد دریس(۲۶ آبان ۱۳۹۱)

          خب مطلب بالا رو دوباره بخون تا متوجه بشی چطوری باید از فونت های آپلود شده استفاده کرد.
          توی مطلب کامل توضیح داده شده..

  • ‏‏
    کاظم(۴ آذر ۱۳۹۱)

    سلام،خسته نباشید.من کدزیرروتویه فایلcssگذاشتم:
    @font-face {
    font-family: ‘BYEKAN';
    src: url(‘http://p30graphic.rozup.ir/byekan_webfont.eot?#’) format(‘eot’), /* IE6–8 */
    url(‘http://uploadpa.com/beta/12/4bjd4743thizs6xm386.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url(‘http://uploadpa.com/beta/12/25raefng9rtr60xn20xa.ttf’) format(‘truetype’); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
    }
    وهمچنین فونت روداخل فایلhtmlاستفاده کردم،ولی فونت متن تغییرنمی کنه لطفاایرادشو برطرف کنید.ممنون میشم

    • ‏‏
      لقمان آوند(۴ آذر ۱۳۹۱)

      آیا مرورگری که با اون صفحه وب رو می بینید css3 رو پشتیبانی می کنه ؟
      با چنین مرورگری تست کردید ؟

      • ‏‏
        کاظم(۵ آذر ۱۳۹۱)

        سلام،مرورگرمن فایرفاکس17است.توinternet explorerوoperaهم کارنمی کنه.شماخودتون یه بارهمین کدمن رواستفاده کنیدببینیدچطوریه؟

        • ‏‏
          لقمان آوند(۵ آذر ۱۳۹۱)

          سلام
          مشکلت رو توی انجمن مطرح کن به جواب میرسی

  • ‏‏
    آذرنوش(۳ دی ۱۳۹۱)

    یه سایت می خواهم بهتون معرفی کنم . این سایت یک دایرکتوری قوی فونت فارسی است که به جرات می تونم بگم یکی از بهترین ها هم هست. امکانات بسیار زیاد و قوی داره.یکی از مهم ترین و ویژه ترین امکانات این سایت ارائه ی کد تشخیص اتوماتیک مرورگرکاربر سایت شما و نمایش فونت بر اساس فرمت مورد پشتیبانی مرورگر کاربر است که باعث کاهش سرعت لود سایت شما نسبت به استفاده از دیگر سرویس ها و کدهای وب فونت ها می باشد.

    برخی از امکانات این سایت:

    مقالات فونت
    دسته بندی فونت ها
    پیشنمایش فونت
    دانلود تمامی فونت ها در پک های مجزاء
    دانلود فونت با دو پسوند OTF و TTF
    نمایش شناسنامه ی فونت
    نمایش آنلاین نقشه کلمات
    تست آنلاین قوی و زیبا فونت
    ارائه ی کد CSS برای استفاده در طراحی وب ( وب فونت API )

    امیدوارم از این سایت مفید نهایت استفاده رو ببرید.
    آدرس سایتش:
    http://www.awebfont.ir

  • ‏‏

    اقا من الان فایل ضمیمتون رو دانلود کردم
    هیچی نشون نداد که…
    اصلا وقتی index.php رو باز کردم چیزی توش نبود
    نکنه قرار خودمون بنویسیمش 💡

    • ‏‏
      لقمان آوند(۲۸ بهمن ۱۳۹۱)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram