استفاده از فونت دلخواه در css

چگونه میتوان از فونت دلخواه در CSS استفاده کرد؟

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

وقتی که شما فونت مورد نظر را پیدا کردید و یا آن را طراحی کردید، باید فایل فونت را بر روی هاست آپلود کنید تا مرور گر کاربر آنها را به صورت اتوماتیک دانلود کرده و استفاده کند.

فونت شما در CSS3 از طریق font-face@ تعریف خواهد شد.

مرورگرهای سازگار با font-face@ :
تمام مرورگرها بر اساس استانداردهای بین المللی وب و با توجه به افزایش روز افزون استفاده طراحان از CSS3 تلاششان را برای انتقال به CSS3 انجام میدهند. اما مهمترین مرورگرهای وب که از این ویژگی استفاده میکنند به قرار زیر است:
Google Chrome – FireFox – Safari – Opera با فونتهای ttf و otf به ترتیب True Type Fonts و OpenType Fonts سازگاری دارند.
IE9 به بالا  font-face@ را حمایت میکند ولی فقط از فونتهای Embedded OpenType) eot) میتوان استفاده کرد.¹

توجه: در نظر داشته باشید که مرورگر IE8 و پایین تر با font-face@ سازگاری ندارند.

چگونه از فونت دلخواه در طراحی وب استفاده کنیم؟

در  font-face@ ابتدا باید یک نام برای فونت مورد نظر تعیین کرده سپس آدرس فونت را تعریف کنیم

در مثال بالا myFirstFont نامی است که برای فونت مورد نظر (iransans) انتخاب کرده ایم.

چگونه فونت استفاده شده در font-face@ را Bold کنیم؟
برای این کار باید هنگام تعریف فونت ، از فونتهای Bold استفاده کنید و در تعریف آن نوع فونت را Bold تعریف کنید:

در واقع فونت iransans_Bold فونت دیگری است که به صورت جداگاه تعریف میشود و بر روی هاست قرار میگیرد.

توجه: به تعداد فونتهایی که میخواهید استفاده کنید این روش را تکرار نمایید.

 


¹. برای ساخت فونتهای سازگار با font-face@ با انواع فرمتهای ذکر شده از روی فونت خودتان به وبسایت fontsquirrel مراجعه کنید.
* برگرفته از: w3schools 


نظر شما چیه؟

۹ دیدگاه

    • فؤاد طهماسبی نویسنده

      خوش اومدید خواهش میکنم.

  1. مهدی

    ببخشید این فایل css که میگید داخل اون گوگل فونت رو تغییر بدیم کجاست ؟!
    دیگه اعصاب برام نمونده
    هر جا میرم میگن فایل css هیچکی نمیگه این فایله اخه کجاست
    ؟!!!!!!!!!!!!!!

    • فؤاد طهماسبی نویسنده

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

  2. آسینتا

    سلام
    خیلی ممنون بخاطر ارجاعی که دادید. من همه این موارد رو رعایت کردم اما فونتی که گذاشتم باز هم فقط داخل کروم نمایش داده میشه نه فایرفاکس! ): n تا راه رو تست کردم اما جواب نداد، به نظرتون باید دنبال چی باشم؟ چه مشکلی می‌تونه وجود داشته باشه؟ من سایت H-Javedan.com رو تو سه تا کامپیوتر مختلف تست کردم اما تو هیچ فایرفاکسی فونت یکان و نازنین و… جواب نداد! فقط تاهوما!!!

  3. کاربر

    من فونتی که میخام رو تو css همونطوری که گفتید قرار دادم……. ولی نمیشه که نمیشه

    کجاش مشکل داره میشه بگید؟؟؟؟؟؟ممنون میشم

    • فؤاد طهماسبی نویسنده

      اینو امتحان کنید:

      اینم کدیه که تو همین سایت دارم استفاده میکتم:

  4. hani

    به نظر من مشکل این تو بزرگ یا کوچیک بودن حروفه مثلا BKOODAKرو دقیقا باید مثل حروف فونتی که داخل cssهستش باید تنظیم کنی برای اطمینان از روی اسم فونت داخل css کپی بگیر و بعد اینجا paste کن

متاسفانه امکان ارسال دیدگاه وجود ندارد!