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

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

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

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

فونت شما در CSS3 از طریق [email protected] تعریف خواهد شد.

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

توجه: در نظر داشته باشید که مرورگر IE8 و پایین تر با [email protected] سازگاری ندارند.

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

در  [email protected] ابتدا باید یک نام برای فونت مورد نظر تعیین کرده سپس آدرس فونت را تعریف کنیم

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

چگونه فونت استفاده شده در [email protected] را Bold کنیم؟
برای این کار باید هنگام تعریف فونت ، از فونتهای Bold استفاده کنید و در تعریف آن نوع فونت را Bold تعریف کنید:

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

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

 


¹. برای ساخت فونتهای سازگار با [email protected] با انواع فرمتهای ذکر شده از روی فونت خودتان به وبسایت fontsquirrel مراجعه کنید.
* برگرفته از: w3schools 


نظر شما چیه؟

۹ دیدگاه

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

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

  1. مهدی

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

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

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

  2. آسینتا

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

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

      شما از فونت ttf استفاده میکنید؟ به سورس وبسایت ما هم یه نگاه بکنید. چون به خوبی کار میکنه.
      این هم مستندات استفاده از font face هست که توسط بنیاد موزیلا نوشته شده. اینم میتونه مفید باشه.
      https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

  3. کاربر

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

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

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

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

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

  4. hani

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

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