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

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

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

<p style="direction:ltr">This is a Sample of using English in my website</p>
<p>این یک نوشته آزمایشی به زبان فارسی است</p>

1 2	<p style="direction:ltr">This is a Sample of using English in my website</p> <p>این یک نوشته آزمایشی به زبان فارسی است</p>

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

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

<p lang="en_US" style="direction:ltr">This is a Sample of using English in my website</p>
<p lang="fa_IR">این یک نوشته آزمایشی به زبان فارسی است</p>

1 2	<p lang="en_US" style="direction:ltr">This is a Sample of using English in my website</p> <p lang="fa_IR">این یک نوشته آزمایشی به زبان فارسی است</p>

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

p:lang(en_US) {
	font-family : Arial;
	font-size : 12px;
}

p:lang(fa_IR) {
	font-family : Tahoma;
	font-size : 20px;
}

p:lang(en_US) {

font-family : Arial;

font-size : 12px;

}

p:lang(fa_IR) {

font-family : Tahoma;

font-size : 20px;

}

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

در اینجا دو نکته وجود دارد که لازم میبینم به آنها اشاره کنم:

اول اینکه ما در اینجا از کد های زبان دو بخشی مانند fa_IR استفاده کردیم. این مسئله الزامی نیست و نوشتن fa نیز کفایت میکند.

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

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