آموزش استفاده از فونت های جداگانه برای زبان فارسی و انگلیسی

26

آموزش استفاده از فونت های جداگانه برای زبان فارسی و انگلیسی

حتما تا حالا متوجه شده اید که حتی زیباترین فونت های فارسی، برای نوشتن در زبان انگلیسی اصلا زیبا نیستند. کاری که امروز میخواهیم با هم انجام دهیم این است که ببینیم چطور میتوانیم در سایتمان برای نوشته های انگلیسی و فارسی از دو فونت جداگانه استفاده کنیم. انجام این کار بسیار ساده خواهد بود اما برای انجامش به کمی صبر و حوصله نیاز خواهید داشت. بنابراین با مسترکد همراه باشید تا با هم سری به دنیای HTML و CSS بزنیم.

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

توجه کنید که ما استایل اصلی سایت را به صورت rtl فرض کرده ایم و برای همین به پاراگراف انگلیسی جهت ltr داده ایم.

خوب تا اینجا CSS قادر نیست بین این دو پاراگراف تفاوتی از لحاظ زبان نوشتاری قائل شود بنابراین برای هر دوی آنها، فونتی که برای تگ p در فایل css شما تعیین شده باشد را مورد استفاده قرار میدهد. حالا میخواهیم کاری کنیم که زبان نوشتاری دو خط بالا مشخص باشد تا بعدا بتوانیم از طریق css برای آنها فونت های متفاوتی تعیین کنیم. کاری که انجام میدهیم این است که دو پاراگراف بالا را به شکل زیر تغییر میدهیم :

اگر توجه کرده باشید به دو خط کد بالا سلکتور lang را اضافه کرده ایم و در جلوی آن زبان نوشتاری هر پاراگراف را تعیین کرده ایم. خوب حالا میتوانیم کمی جلوتر برویم و CSS دلخواه خود را برای سلکتور lang بنویسیم تا هر یک از این دو پاراگراف بر اساس زبان خود از فونت مشخصی استفاده نمایند :

خوب حالا ممکن است این سوال برایتان پیش بیاید که اگر خواستید در میان انبوهی از کلمات فارسی، یکدفعه کلمه یا عبارت کوتاهی را به انگلیسی بنویسید آنوقت چه کار کنید؟ آنجا که دیگر نمیتوانید از تگ p استفاده کنید. خبر خوب این است که این سلکتور محدود به تگ p نیست. مثلا یک راه حل خوب این است که کلمه یا عبارت مورد نظرتان را درون یک تگ span قرار داده و برای تگ span با استفاده از سلکتور lang زبان دلخواه را تعیین کرده و سپس css مناسب را نیز در سایتتان برایش در نظر بگیرید.

در اینجا دو نکته وجود دارد که لازم میبینم به آنها اشاره کنم. اول اینکه ما در اینجا از کد های زبان دو بخشی مانند fa_IR استفاده کردیم. این مسئله الزامی نیست و نوشتن fa نیز کفایت میکند. دوم اینکه ما در اینجا برای زبان فارسی نیز از سلکتور lang استفاده کرده ایم. این کار در سایتی که عموم محتوایش به زبان فارسی است، اصلا لازم نیست. چرا که اگر سکلتور lang را برای زبان فارسی استفاده نکنید، هر استایلی که برای تگ p تعیین کرده باشید مورد استفاده قرار میگیرد. بنابراین پیش از استفاده از این سلکتور خوب فکر کنید که به چه چیزی نیاز دارید.

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

امیدوارم از این آموزش لذت برده باشید.

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
26 دیدگاه
  1. محمدتقی می گوید

    بسیار عالی بود!
    ممنون از آموزشتون مشکلم حل شد

    1. MrCode می گوید

      خوشحالم که این آموزش برای شما مفید بود. انشالله موفق باشید

  2. Saloo می گوید

    فوق العاده بود. یکی از بهترین آموزش هایی که با خوندون کاملا درکش کردم.

    یک پست با ارزش بهتر از هزار پست بی ارزشه

    1. MrCode می گوید

      خوشحالم از اینکه این آموزش براتون مفید بوده.

  3. پارسا می گوید

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

    1. MrCode می گوید

      سلام
      تا جایی که بنده مطلع هستم خیر.

  4. محمد می گوید

    سلام خسته نباشید
    من از این مدل سلکتور می خواستم استفاده کنم که اگه زبان صفحه fa_IR بود یکسری Rule انجام دهد ولی
    سلکتور کار نمی کند
    ul.contact-list li a i:lang("fa_IR") {
    margin-right: -1px;
    margin-left: 12px;
    }

    1. MrCode می گوید

      سلام
      برای زبان نیازی به دابل کوت ندارید ولی به هر شکل ممکنه بر اساس عنصر مورد نظرتون سلکتورتون اشتباه باشه و عنصری که مد نظر دارید رو هدف نگیره. این سلکتور شما فقط روی زبان مربوط به تگ i تاثیر میزاره نه زبان کل صفحه.

  5. saeed می گوید

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

    1. MrCode می گوید

      سلام
      اول فونت فیس دلخواه رو توی فایل استایلتون فراخوانی میکنید. بعد هرجا هر کدوم رو که نیازش دارید، برای المنت مورد نظر font-family رو بر اساس نام فونت دلخواهتون تعریف میکنید.

  6. saeed می گوید

    مثل برای H1 از یه فونت و برای متنش از یه فونت دیگه استفاده کرد.

  7. saeed می گوید

    من اول توی فالی استایلم یه فونت فیس به این شکل گذاشتم

    اما فقط فونت فامیلی اول رو اجرا میکنه!
    ممنون از راهنماییتون.

    1. MrCode می گوید

      نحوه ی تعریفتون اشتباه هست. برای هر خانواده ی فونت باید یک بلاک @font-face جدا تعریف کنید. الان شما هر دو فونت رو با استفاده از یک @font-face تعریف کردید.

  8. kaveh می گوید

    فرض کنید من می خوام متن زیر که ترکیبی از حروف فارسی و انگلیسی هست رو با فونتی تنظیم کنم که اندازه فونت انگلیسی و فارسی یک اندازه باشند. اغلب مواقع فونت انگلسی بزرگتر است:

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

  9. سارا می گوید

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

    1. MrCode می گوید

      سلام
      محدودیتی در محل استفاده ی این روش وجود نداره. هرجایی که میتونید html و css داشته باشید این روش رو میتونید به کار ببرید.

  10. amylee می گوید

    واااااااقعا عااااالییی بود خیلیییییییی ممنونم بخدا کارمو راه انداختید خدا خیرتون بده ..meeerrrssiiii

    1. MrCode می گوید

      از اینکه این آموزش برای شما مفید واقع شده خوشحالم 🙂

  11. حسین می گوید

    سلام.
    ببخشید این کدها رو باید کدوم قسمت وارد کنیم؟ rtl.css؟

    1. MrCode می گوید

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

  12. محمود می گوید

    سلام. اقا من یه سایت جوملایی درست کردم، کهزبان پیش فرض این سایت، انگلیسیه.
    واسه فونتشم josef sans رو مد نظرم بوده و استفاده کردم.
    از طریق اضافه کردن کد فونت های گوگل به index.php اصلی سایت و افزودن کد فونت به قسمت template.css خود قالب.(و اسفتاده از کد ! important برای اینکه تمام فونت ها رو در بر بگیره)
    حالا مسئله ی که دارم، اینه که تمام سایت انگلیسیه، یه قسمت اموزش هم گذاشتیم که میخوایم فارسی هم توش بذاریم. حالا فونت های نوشته های انگلیسیم همونیه که میخوام، اما فارسیارو فکر کنم Arial میذاره!

    نهایتا:
    میخوام بدونم چجوری میشه تنظیم کردکه هرجا کلمه فارسی دیدی از این فونت استفاده کن، هرجا فونت انگلیسی دیدی، از این فونت استفاده کن!؟

    با تشکر.

    1. MrCode می گوید

      سلام
      تا جایی که من میدونم امکان انجام این کار به صورت اتوماتیک وجود نداره و روش امکان پذیر همینی هست که در آموزش توضیح داده شده.

      1. محمود می گوید

        ممنون

  13. امیر می گوید

    با سلام و خسته نباشید . من میخوام تغییر فونت موقع تغییر زبان با استفاده از افزونه wpml در وردپرس انجام شود یعنی وقتی کاربر زبان سایت رو فارسی میکنه فونت ها هم تغییر کنن و بلعکس در ضمن از قالب "بی تم" هم استفاده میکنم . لطفا کمک کنید . با تشکر

  14. Masoume می گوید

    سلام وقت شما بخیر
    من تازه قسمتی از سایت رو به زبان انگلیسی و عربی ترجمه کردم و قرار دادم
    حالا مشکلی که هستش، نمیدونم دو فونت جداگانه برای زبان فارسی و انگلیسی تعریف کنم
    فونت رو که تغییر میدم هم زبان فارسی (که اصلیه) هم ترجمه انگلیسیش تغییر میکنن
    من داخل یک سایت دیدم که دو فونت جداگانه تعریف‌کردن
    اطلاعی دارید چجوری؟
    ممنون میشم پاسخ بدید

  15. 8Mahdi8 می گوید

    سلام کد تون را امتحان کردم فقط پیش فرض ها جواب میده روش جدیدش بگید؟ با کد js هم میشه انجام داد؟ }

ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.