تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 3 نخستنخست 123 آخرینآخرین
نمایش نتایج: از 11 به 20 از 24

مقاله: آموزش پیوست فونت در CSS 3 + فونت های اصلاح شده فایرفاکس جدید

    1. آموزش پیوست فونت در CSS 3 + فونت های اصلاح شده فایرفاکس جدید »

      آموزش پیوست فونت در CSS 3 + فونت های اصلاح شده فایرفاکس جدید

      نگارش: , by (مدیریت کل سایت)
      2011/10/04 08:58 PM
      امتیاز: 

      یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است. متاسفانه در وب فارسی ما محدود به سه فونت هستیم که بر روی تمامی سیستم ها نصب شده است. فونت arial, Tahomaو mono-type تنها فونتهایی هستند که می‌توانیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس است.
      از مدتها قبل طراحان از شیوه های مختلفی برای استفاده از فونت‌ها در وب استفاده کرده اند. یکی از شیوه های رایج، جایگزینی متن با تصویر بود. طراح متن مورد نظر را با فونت مورد نظرش در نرم افزار گرافیکی می‌نوشت و آن را به طرح خود منتقل می‌کرد. این شیوه محدودیت ‌هایی را به همراه داشت که یکی از آنها بالا رفتن حجم صفحات وب بود. بعد از مدتی طراحان به فکر استفاده از شیوه های دیگری افتادند که یکی از این شیوه‌ها استفاده از تکنیک sIFR بود. در این متد، فونت خود را داخل یک فایل فلش قرار می‌دهید و یک فایل جاوااسکریپت را نیز به صفحه خود اضافه می‌کنید. این فایل جاوااسکریپت در هر جایی که قرار بود فونت مورد نظر نمایش یابد، متن آن بخش را مخفی می‌کرد و به جایش یک فایل فلش را قرار می‌داد که همان متن را با فونت مورد نظر شما نمایش می‌داد. این فایل فلش قابلیت خوبی داشت و با کوچک شدن عرض صفحه قابلیت scaleشدن را دارا بود و به هم ریخته نمایش داده نمیشد ولی این شیوه نیز محدودیت های خود را داشت.
      نخست اینکه باعث کندی صفحه می‌شود و کاربر حتماً باید جاوااسکریپت و فلش را بر روی مرورگرش فعال می‌کرد تا بتواند فونتها را ببیند. مورد دوم اینکه پیاده سازی این تکنیک بر روی سایت بسیار زمان بر و پیچیده بود. در نهایت مشکلی که برای استفاده از این تکنیک وجود داشت این بود که با زبان فارسی مشکل داشت. متن فارسی در این تکنیک یا نمایش داده نمیشد و یا به شکل بی هم ریخته نمایش میافت. البته دوستان با کار کردن بر روی فایل های sIFR توانسته بودند که مشکل نمایش حروف فارسی رو حل کنند ولی همچنان کپی کردن متنی که توسط sIFR ایجاد شده بود، امکان پذیر نبود.
      پس از این برخی از توسعه دهندگان بر روی تکنیکی دیگر کار کردند که فونت ها را با استفاده از جاوااسکریپت و قابلیتهای مانند SVG در مرورگر، در صفحه، رسم کنند. بر این اساس، cufon شکل گرفت. در این سرویس شما فونت را به سایت مربوطه آپلود می‌کنید و در عوض یک فایل جاوااسکریپت دریافت می‌کنید که می‌توانید آن را در صفحه استفاده کنید و متن شما با فونت مورد نظرتان به نمایش در می‌آمد. کوفون هم مشکلات خودش را داشت. از طرفی باعث کند شدن صفحه می‌شد و دوم اینکه زبان فارسی را پشتیبانی نمی‌کرد (و همچنان پشتیبانی نمی‌کند). البته دوستان بر روی این پروژه کار کرده اند و در حال حاضر کوفون برای زبان فارسی نیز در دسترس است. در پی نوشت همین پست می توانید اطلاعات تکمیلی را بخوانید.
      بعد از همه گیر شدن مرورگر فایرفاکس و پس از آن ارائه مرورگرهای اپرا، سافاری برای ویندوز و کروم، پشتیبانی از قابلیت های CSS3 گسترش پیدا کرد در نتیجه پشتیبانی از قابلیت @font-face افزایش یافت. با استفاده از این قابلیت می‌توان فونتی را به صفحه پیوست کرد و در صورتی که این فونت بر روی سیستم کاربر موجود نباشد، از رویserver دریافت شده و برروی سیستم کاربر قرار می‌گیرد و شما می‌تواند از هر فونتی که دوست دارید بر روی وب استفاده کنید.
      تنها مشکلی که وجود داشت، مرورگر اینترنت اکسپلورر بود که تا قبل از نسخه 9 از این قابلیت پشتیبانی نمی‌کرد. البته مایکروسافت، سالها قبل فرمت EOT را برای پیوست فونت به صفحه ایجاد کرده بود. مایکروسافت امیدوار بود که این استاندارد را ترویج دهد ولی هیچ مرورگری از این فرمت پشتیبانی نکرد.
      در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد. خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود. تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند.
      حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید:
      کد:
      @font-face { font-family: 'yekan’; src: url('fonts/yekan.ttf') format('truetype'); }
      در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید. اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekanدر دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید.
      حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت‌های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می‌کنیم:
      کد:
      @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot') format('eot'), url('fonts/yekan.ttf') format('truetype'); }
      حال باید اینترنت اکسپلورر نیز بتواند فایل فونت مربوط به خود را دریافت کند. فرمت EOT را در خط اول قرار می‌دهیم و فرمت TTF را در خط بعدی. مرورگرهای جدید خط اول را نادیده می‌گیرند و به سراغ خط دوم می‌روند.
      البته اینترنت اکسپلورر باز هم رفتاری عجیب نشان می‌دهد. اگر دستورات خود را به این شکل بنویسید، اینترنت اکسپلورر نخست فایل EOTرا دریافت می‌کند و به سراغ خط بعدی می‌رود و فایل TTF را هم دریافت می‌کند ولی ملاک را فایل دوم قرار می‌دهد و از آنجائیکه نمی‌تواند این فرمت را نمایش دهد، متن شما را با فونت پیش‌فرض نمایش می‌دهد و حتی از فرمت EOT که دریافت کرده بود نیز استفاده نمی‌کند.
      حال ما از یک هک استفاده می‌کنیم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. کد خود را ویرایش می‌کنیم و دو علامت ?#را بعد از آدرس فرمت EOTاضافه می‌کنیم:
      کد:
      @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url(‘fonts/yekan.ttf’) format(‘truetype’); }
      با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود. البته هک‌های دیگری همچون هک smiley که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود.
      کد:
      @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url('fonts/yekan.woff') format('woff'), url(‘fonts/yekan.ttf’) format(‘truetype’); }
      حال تمامی مرورگرهای قدیمی و جدید می‌توانند فونت ها را دریافت کرده و سایت شما را با فونت مورد نظرتان نمایش دهند.
      با دریافت این فایل به 40 فونت فارسی اصلاح شده با سه فرمت TTF, WOFFو EOT دسترسی خواهید داشت که می‌توانید آنها را در هر صفحه ای که دوست دارید، به کار ببرید. برای سهولت کار یک فایل به نام fonts-demo.html داخل فایل زیپ است. با باز کردن این فایل می‌توانید نمایی از تمامی فونت ها ببینید و نام هر فونت را نیز در کنارش مشاهده کنید. با دیدن source صفحه نیز می‌توانید دستور @font-face را هم مشاهده کنید و در صورت نیاز آن را کپی کرده و در فایل CSSخود قرار دهید. همچنین یک پوشه به نام fonts نیز وجود دارد که هر 40 فونت با سه فرمت مختلف درون آن جای گرفته. فونتهایی را که می‌خواهید به صفحه پیوست کنید را از داخل آن انتخاب کرده (هر سه فرمت را انتخاب کنید) و بر روی سرور خود قرار دهید.
      توجه داشته باشید که نمی‌توانید چند فونت را به طور همزمان با یک دستور @font-face به صفحه پیوست کنید و برای پیوست چند فونت مختلف باید برای هر فونت از یک دستور @font-face استفاده کنید.
      البته توصیه شده بود که برای استفاده از فونت‌ها در وب باید حتما MIME Type فونت را هم مشخص کنید و به server بگوئیم که فرمت فایل فونت چیست. منتها به خاطر عدم تعیین یک استاندارد جامع، به نظر می‌رسد که تعیین نکردن MIME Type مشکلی ایجاد نکند. به عنوان مثال در مستندات سایت موزیلا آمده است که به خاطر عدم تعیین MIME Type برای فرمت‌های مختلف فونت، این مرورگر دیگر به فرمت‌هایی که بر روی سرور تعیین شده توجهی نمی‌کند.
      البته بعد از ارائه فایرفاکس 6 به خاطر مشکل فونت‌های غیر استاندارد فارسی، حروف جدا از هم نمایش داده میشد که با اصلاح فونت ها از طریق سایت Online Font Convertor این مشکل هم برطرف شده است. دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می‌توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می‌گذارند.
      در حال حاضر در تست ما این شیوه بر روی مرورگرهای فایرفاکس 3.6 به بعد، کروم 13 به بعد، اپرا 11 به بعد و اینرنت اکسپلورر 7 و نسخه های بعد از آن به درستی کار کرد. امیدواریم با ارائه این فونت‌ها بتوانیم اندکی به دوستان همکار و طراحان وب، کمک کرده باشیم.


      برای دانلود فونت های اصلاح شده روی لینک زیر کلیک کنید :


      دانلود پیکیج فونت اصلاح شده

      پی نوشت:
      بعد از نگارش این پست، آقای مرتضی فقیه شجاعی ایمیلی برای ما ارسال کرد و ما را از وجود ابزاری که توسط تیم اورتا تولید شده است و پشتیبانی از زبان فارسی را به کوفون اضافه می کند، مطلع کرد. برای خواندن اطلاعات تکمیلی به صفحه لابراتوآر اورتا مراجعه کنید و نرم افزار مربوطه را که بیفون نامگذاری شده است را دریافت کنید. این نرم افزار یک اپلیکیشن ادوبی ایر است و برای استفاده از آن باید ادوبی ایر را بر روی سیستم خود نصب کنید. برای دریافت آخرین نسخه این برنامه به سایتwww.flashplayer.ir مراجعه کنید. برای استفاده از این نرم افزار باید حتما دسترسی به اینترنت داشته باشید. جهت یادگیری برنامه نیز می توانید، راهنمای بیفون را از ویکی سایت اورتا بخوانید.




  1. Top | #11
    کاربر اخراجی

    ورژن ویبولتین
    4
    نوشته ها
    162
    میزان امتیاز
    0

    پیش فرض

    دوست گرامی میگم این کارارو کردم قالب ریخت بهم. اونوقت دوباره میگید همینکارارو کنم.




  2. گیفت کارت آیتونز

  3. Top | #12
    مدیر بخش

    ورژن ویبولتین
    .
    نوشته ها
    869
    میزان امتیاز
    138

    پیش فرض

    نقل قول نوشته اصلی توسط WINarman نمایش پست ها
    دوست گرامی میگم این کارارو کردم قالب ریخت بهم. اونوقت دوباره میگید همینکارارو کنم.
    خدا میدونه چیکار میکنید
    خودم روی وی بی انجام دادم
    روی قسمت وبلاگ سایت شخصیم هم انجام دادم
    هیچ مشکلی نبوده

  4. Top | #13
    مدیر بازنشته

    ورژن ویبولتین
    4.2.0
    نوشته ها
    2,936
    میزان امتیاز
    357

    پیش فرض

    اگه بخواییم فونت های انجمن b yekan بشن چی؟

  5. Top | #14
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    3,417
    میزان امتیاز
    523

    پیش فرض

    سلام .
    ببینید فرقی نمیکنه شما فقط فرمت های این فونت رو در مثلا پوشه font با نام byekan قرار میدید و کد زیر رو ابتداری css میذارید
    کد:
    @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url('fonts/yekan.woff') format('woff'), url(‘fonts/yekan.ttf’) format(‘truetype’); }
    خب حالا اون کلاس مد نظرتونو که میخایید فونتش عوضه شه رو پیدا کنید توی css
    و فرض میکنیم فونت فعلیش tahoma باشه , به این صورت عمل می کنید :
    در css پیدا کنید :
    font:tahoma
    تغییر بدید به
    fontyekan


    2 تشکر توسط:


  6. Top | #15
    کاندیدای مدیریت

    ورژن ویبولتین
    5.0.0
    نوشته ها
    493
    میزان امتیاز
    70

    پیش فرض

    آقا ی لینک دیگه بدید

    کاربر مقابل از Mohsen Neo بابت این پست مفید تشکر کرده است:


  7. Top | #16
    کاربر اخراجی

    ورژن ویبولتین
    4.1.10 DGT
    نوشته ها
    147
    میزان امتیاز
    0

    پیش فرض

    این لینک دانلود کارنمیکنه ریدایرکت میشه

  8. Top | #17
    کاربر سایت

    ورژن ویبولتین
    4.1.5
    نوشته ها
    88
    میزان امتیاز
    14

    پیش فرض

    فونتها را چطور به WOFF تبدیل کنم؟

    کسی نبود کمک کنه
    ویرایش توسط hojjat.system : 2012/08/08 در ساعت 09:51 PM دلیل: ادغام دو پست

  9. Top | #18
    کاربر سایت

    ورژن ویبولتین
    4.1.5
    نوشته ها
    88
    میزان امتیاز
    14

    پیش فرض

    از دوستان کسی نیست لطف کنه جواب بده

    کاربر مقابل از hojjat.system بابت این پست مفید تشکر کرده است:


  10. Top | #19
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    432
    میزان امتیاز
    51

    پیش فرض

    با سلام خدمت همه دوستان و عزیزان
    من توی فروم خودم با استفاده از این آموزش فونت BKoodakBold رو به اول additional.css اضافه کردم ولی همچنان بخش هایی از قالبم با فونت های انگلیسی (فکر کنم Sans-Serif باشه) نمایش داده میشه
    فونت های مورد نیاز رو توی پوشه مربوطه آپلود کردم و آدرس دهی شون هم چک کردم که مشکل نداشته باشه. اینم کدهای به کار رفته :

    کد:
    @font-face {  font-family: 'BKoodakBold';
      src: url('fonts/BKoodakBold.eot?#') format('eot'),  /* IE6–8 */
           url('fonts/BKoodakBold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
           url('fonts/BKoodakBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
    }
    الان چه کار کنم که فونتم عوض شه ؟

  11. Top | #20
    کاربر سایت

    ورژن ویبولتین
    4.1
    نوشته ها
    199
    میزان امتیاز
    25

    پیش فرض


    دانلود پکیج فونت ها سری B
    BNazanin
    BZar
    BTitr
    و ...
    با فرمتهای ttf و eot و woff ویژه طراحی
    حجم : 2.82 مگابایت
    منبع: پس از جست و جو لینک اصلی که دارای کلمه webfont_package.zip بود از سایت picofile یه شخص گمنامی قرار داده بود و اینجا آوردم تا کسایی که تازه وارد هستند مثل من زیاد گمراه نشن
    فایل های پیوست شده فایل های پیوست شده
    • نوع فایل: zip fonts.zip (2.82 مگابایت, 21 نمایش)

    کاربر مقابل از mjavidm بابت این پست مفید تشکر کرده است:


صفحه 2 از 3 نخستنخست 123 آخرینآخرین

اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. مشکل در فایل پیوست
    توسط makh000f در انجمن پرسش و پاسخ
    پاسخ: 22
    آخرين نوشته: 2012/04/17, 08:28 PM
  2. آموزش: پخش آنلاین MP3 پیوست شده!!
    توسط Haji در انجمن هک و آموزش های مخصوص
    پاسخ: 4
    آخرين نوشته: 2012/03/12, 07:13 PM
  3. مشکل جدی در تنظیمات فایل پیوست
    توسط TOMCAT در انجمن پرسش و پاسخ
    پاسخ: 5
    آخرين نوشته: 2011/11/30, 03:33 PM
  4. فضای فایل پیوست
    توسط forex2nice در انجمن پرسش و پاسخ
    پاسخ: 2
    آخرين نوشته: 2011/07/15, 01:24 AM
  5. مشکل با فایل پیوست
    توسط Hawk در انجمن پرسش و پاسخ
    پاسخ: 5
    آخرين نوشته: 2011/05/23, 11:20 AM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •