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

daskhatmin فواد طهماسبی
19,281 بازدید
فونت دلخواه در 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@ ابتدا باید یک نام برای فونت مورد نظر تعیین کرده سپس آدرس فونت را تعریف کنیم

@font-face {
font-family: myFirstFont;
src: url('iransans_normal.ttf'),
     url('iransans_normal.eot'); /* IE9+ */
}

div {
font-family:myFirstFont;
}

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

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

@font-face {
font-family: myFirstFont;
src: url('iransans_Bold.ttf'),
     url('iransans_Bold.eot'); /* IE9+ */
font-weight:bold;
}

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

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

 


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

daskhatmin

فواد طهماسبی

فواد طهماسبی هستم، موسس وبسایت آموزشی دسخط. چندین سال تجربه کاری مرتبط با تکنولوژیهای توسعه وب دارم. علاقمند به ایده پردازی و توسعه کسب و کارهای اینترنتی هستم.

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

  1. fraield گفت:

    سلام . واقعا ممنونم . بسیار عالی بود

  2. مرتضی گفت:

    سلام
    وقتتون بخیر
    من در مورد تغییر فونت سرویسای ایمیلی مثل میل چیمپ سوال داشتم
    من این کد css رو که مربوط به تغییر فونت در میل چیمپ هست رو در اختیار دارم که باید اونو در قسمت body نوشته قرار بدم
    وقتی این کد رو قرار میدم فونت ایران سنس رو برای من اجرا میکنه
    ولی من میخوام فونت دلخواه خودم رو اجرا کنه
    توی این کد درج شده که آدرس فونت دلخواه خود را وارد کنید، من متوجه این بخشش نمیشم
    ممنون میشم راهنمایی کنید.

       
     <link href="Your Persian Font Server Address" rel="stylesheet" type="text/css" />
    <style type="text/css">h1,h2,h3,h4,h5,p,a{ 
      font-family: 'iransans', serif !important; 
      font-weight: 300 !important; 
    } 
    </style>
    
     
    1. منظورشون همین لینک فایل css هست که در آموزش بالا توضیح داده شده. فایلها و فونت ها باید در سرور خودتون میزبانی بشه.

      1. مرتضی گفت:

        از چه قسمتی باید فونت رو پیدا (و یا آپلود) کنم؟
        ممنون میشم بیشتر توضیح دهید.

  3. hani گفت:
    @font-face{
            font-family: 'BYekan';
           src: url('fonts/BYEKAN.eot?')format('eot'),
                url('fonts/BYEKAN.woff') format('woff'),
                url('fonts/BYEKAN.ttf') format('truetype');
    }
    @font-face{
            font-family: 'BKOODAKBOLD';
           src: url('fonts/BKOODAKBOLD.eot?')format('eot'),
                url('fonts/BKOODAKBOLD.woff') format('woff'),
                url('fonts/BKOODAKBOLD.ttf') format('truetype');
    }
    

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

  4. کاربر گفت:

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

    @font-face{
            font-family: 'BYekan';
           src: url('fonts/BYEKAN.eot?')format('eot'),
                url('fonts/BYEKAN.woff') format('woff'),
                url('fonts/BYEKAN.ttf') format('truetype');
    }
    @font-face{
            font-family: 'BKOODAKBOLD';
           src: url('fonts/BKOODAKBOLD.eot?')format('eot'),
                url('fonts/BKOODAKBOLD.woff') format('woff'),
                url('fonts/BKOODAKBOLD.ttf') format('truetype');
    }
    

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

    1. فؤاد طهماسبی گفت:

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

      @font-face {
        font-family: 'yekan';
        src: url('BYekan.eot');
        src: url('BYekan.eot') format('embedded-opentype'), url('BYekan.woff') format('woff'), url('BYekan.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
      

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

      @font-face {
          font-family : terafik;
          src : url('../fonts/terafik.ttf')  format('truetype');
      }
      @font-face {
          font-family : iransans;
          src : url('../fonts/iransans.ttf')  format('truetype');
      }
      
  5. آسینتا گفت:

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

    1. فؤاد طهماسبی گفت:

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

  6. مهدی گفت:

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

    1. فؤاد طهماسبی گفت:

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

  7. سیامک گفت:

    تشکر فراوان دوست خوبم

    1. فؤاد طهماسبی گفت:

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

*اگر پرسشی دارید که مربوط به این مطلب نیست لطفا در بخش پرسشها مطرح کنید. در غیر این صورت دیدگاه شما تایید نخواهد شد.


کد HTMLCSSJavaScriptPHP