سامانه کد ساز

حجم کل: 0 کیلوبایت

کپی کد
نمونه کد استایل:
body {
    font-family: 'B Homa';
    font-size: 15px;
}

با کلیک بر روی فونت مورد نظر، آن را انتخاب کنید:

وب فونت چیست ؟

تمدن از آنجا آغاز شد که بشر توانست بنویسد! اما با توجه به پراکندگی و گوناگونی نسل بشر، زبان های مخطلف به وجود آمدند. در هر زبان برای رسم حروف الگویی پذیرفته شد که شکل و ساختار ثابتی را برای نوشتن در آن زبان را مشخص می کند. اما هر شخصی به روش خواص خود این حروف را در کنار هم رسم می کند، به این روش خواص دستخط (Font) می گویند که مانند اثر انگشت برای هر شخص منحصر به فرد می باشد.
وقتی کامپیوتر های پیشرفته به وجود آمدند، نوشتن بخشی از امکانات آنها بود به همین دلیل استاندارد هایی برای روش رسم حروف ایجاد شد که با آنها فونت می گوییم.
هر کاربر می تواند بر روی سیستم عامل خود فونت های مورد علاقه خود را نصب کند، و متون را بر اساس فونت (دستخط) مورد علاقه خود بنویسد. به طور مثال در سیستم عامل ویندوز برای نصب یک فونت فقط کافیست، فایلی که روش رسم حروف در آن قرار دارد و با استاندارد (ttl) کد شده است را در شاخه (C:\Windows\Fonts) کپی شود.
وقتی کاربر صفحه ای را در اینترنت باز می کنیم تا متنی که دیگران نوشته اند را بخواند، ممکن است نویسنده یا طراح سایت برای متن دستخط ویژه ای انتخاب کرده باشد که فایل فونت آن دستخط در سیستم عامل کاربر نصب نشده باشد، در این حالت برنامه مرورگر برای آن متن از فونت پیشفرضی که برایش تعریف شده، استفاده خواهد کرد و در نهایت کاربر متن را به آن صورت که نویسنده می خواست دیده شود، نخواهد دید. طراحان سایت برای حل این مشکل از وب فونت استفاده می کنند به این صورت که روش رسم حروف به همراه صفحه از اینترنت بر روی برنامه مرورگر کاربر بار گزاری می شود تا دیگر نیازی به نصب بودن آن فونت بر روی سیستم عامل کاربر نباشد و همیشه متن به همان شکل که نویسنده یا طراح سایت می خواهد دیده می شود.

شروع کار با وب فونت فارسی

یک مثال ساده:

در باکس زیر یک نمونه از کد خام صفحه ی وب مشاهده می کنید. در سیستم خود یک فایل (Text Document) بسازید و کد خام زیر را در آن کپی کنید و آن فایل را با پسوند (html.) و کدینگ (UTF-8) ذخیره کنید.

<html dir="rtl"> 
    <head>
        <!-- Farsi WebFont --> 
        <link rel="stylesheet" type="text/css" href="//api.bfont.ir/elham.min.css"/> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style> 
            body { 
                font-family: 'B Elham'; 
                font-size: 50px; 
            } 
        </style> 
    </head> 
    <body> 
        <div> صفحه ای زیبا بسازید! </div> 
    </body> 
</html> 

اکنون فایلی که ذخیره کرده اید را با یک مرورگر جدید مثل (FireFox) یا (Google Chrome) باز کنید. شما باید متنی مثل متن زیر ببینید که با فونت الهام نوشته شده:

صفحه ای زیبا بسازید!

این فقط یک متن ساده هست، شما می توانید ظاهر آن را با استفاده از کدهای (CSS) تغییر دهید. سعی کنید به مثال قبل سایه اضافه کنید:

body { 
    font-family: 'B Elham'; 
    font-size: 50px; 
    text-shadow: 10px 10px 5px #000;
} 

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

صفحه ای زیبا بسازید!

و این تاره شروع کار با سامانه وب فونت فارسی و کدهای (CSS) می باشد.

وب فونت چیست ؟

تمدن از آنجا آغاز شد که بشر توانست بنویسد! اما با توجه به پراکندگی و گوناگونی نسل بشر، زبان های مخطلف به وجود آمدند. در هر زبان برای رسم حروف الگویی پذیرفته شد که شکل و ساختار ثابتی را برای نوشتن در آن زبان را مشخص می کند. اما هر شخصی به روش خواص خود این حروف را در کنار هم رسم می کند، به این روش خواص دستخط (Font) می گویند که مانند اثر انگشت برای هر شخص منحصر به فرد می باشد.
وقتی کامپیوتر های پیشرفته به وجود آمدند، نوشتن بخشی از امکانات آنها بود به همین دلیل استاندارد هایی برای روش رسم حروف ایجاد شد که با آنها فونت می گوییم.
هر کاربر می تواند بر روی سیستم عامل خود فونت های مورد علاقه خود را نصب کند، و متون را بر اساس فونت (دستخط) مورد علاقه خود بنویسد. به طور مثال در سیستم عامل ویندوز برای نصب یک فونت فقط کافیست، فایلی که روش رسم حروف در آن قرار دارد و با استاندارد (ttl) کد شده است را در شاخه (C:\Windows\Fonts) کپی شود.
وقتی کاربر صفحه ای را در اینترنت باز می کنیم تا متنی که دیگران نوشته اند را بخواند، ممکن است نویسنده یا طراح سایت برای متن دستخط ویژه ای انتخاب کرده باشد که فایل فونت آن دستخط در سیستم عامل کاربر نصب نشده باشد، در این حالت برنامه مرورگر برای آن متن از فونت پیشفرضی که برایش تعریف شده، استفاده خواهد کرد و در نهایت کاربر متن را به آن صورت که نویسنده می خواست دیده شود، نخواهد دید. طراحان سایت برای حل این مشکل از وب فونت استفاده می کنند به این صورت که روش رسم حروف به همراه صفحه از اینترنت بر روی برنامه مرورگر کاربر بار گزاری می شود تا دیگر نیازی به نصب بودن آن فونت بر روی سیستم عامل کاربر نباشد و همیشه متن به همان شکل که نویسنده یا طراح سایت می خواهد دیده می شود.

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

شما فقط در دو (2) مرحله می توانید از وب فنت فارسی استفاده کنید:

مرحله اول:

کد لینک-استایل فونت(ها) را که به وسیله سامانه کد ساز ساخته اید، را در بین تگ هد صفحه ی خود کپی کنید:

<!-- Farsi WebFont -->
<link rel="stylesheet" type="text/css" href="//api.bfont.ir/homa-titr.min.css"/>
مرحله دوم:

به عنصرهای موجود در صفحه خود، فونت اختصاص دهید:

از طریق فایل استایل (.CSS):

Selected Object {
    font-family: 'Font Name', serif;
}
/************ Like ************/
body {
    font-family: 'B Homa', Tahoma;
}
h1 {
    font-family: 'B Titr', Arial;
}

یا از طریق افزودن گزینه (style) به تگ عنصر:

<tag style="font-family: 'Font Name', serif;">متن</tag>
<!--------------------- Like --------------------->
<body style="font-family: 'B Homa', Tahoma;">
    <h1 style="font-family: 'B Titr', Arial;">عنوان صفحه</h1>
...
</body>

نکته: شما می توانید در هنگام اختصاص فونت، یک یا چند فونت پشتیبان برای آن عنصر در نظر بگیرید؛ که اگر مرورگر دچار مشکل شد یا نتوانست فونت مورد نظر شما را لود کند از فونت های پشتیبان که به ترتیب اولویت با ویرگول (,) از هم جدا شده اند استفاده کند.

ساخت کد لینک-استایل به صورت دستی...

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

//api.bfont.ir/

در ادامه نام فونت که می خواهید در سایت خود استفاده کنید را اضافه می کنیم؛ نام فونت را به زبان انگلیسی و حروف کوچک لاتین، بدون استفاده از اسپیس وارد کنید.

نکته: سیلاب اصلی فونت نیز قابل قبول می باشد. مثلا: برای فونت بی-میترا، هم می توانید از (bmitra) استفاده کنید و هم (mitra).

//api.bfont.ir/mitra

در صورتی که می خواهید از فونت های بیشتری استفاده کنید، نام بقیه فونت ها را با خط فاصله (-) اضافه کنید.

نکته: البطه می توانید اسم فونت ها را بدون فاصله پشت هم اضافه کنید، خط فاصله جهت زیبا سازی استفاده می شود مثلا: بجای (mitra-titr-homa) می توانید از (mitratitrhoma) نیز استفاده کنید.

//api.bfont.ir/mitra-titr-homa

برای مینیمایز کردن و کم کردن حجم فایل ساخته شده (.min) را به آدرس اضافه کنید.

//api.bfont.ir/mitra-titr-homa.min

و درنهایت پسوند فایل های استایل (.css) را به آدرس اضافه کنید.

//api.bfont.ir/mitra-titr-homa.min.css

بعد آدرس را در تگ لینک-استایل قرار داده:

<link rel="stylesheet" type="text/css" href="//api.bfont.ir/mitra-titr-homa.min.css"/>

و آن را به هد صفحه خود اضافه کنید.

 
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="//api.bfont.ir/mitra-titr-homa.min.css"/> 
    ...
</head> 
<body> 
...

نکته: برای استفاده از حالات مخطلف فونت لازم نیست کدی به آدرس اضافه کنید، به صورت پیش فرض وقتی فونتی را با لینک-استایل فراخانی می کنید؛ سامانه تمام حالات فنت (در صورت موجود بودن) را در صفحه فراخانی خواهد کرد. مثلا: در صورتی که فونت بی-نازنین فراخانی کنید، سامانه هم فونت بی-نازنین معمولی را فراخانی می کند، هم بی-نازنین کلفت و هم بی-نازنین توخالی ...

وب فونت فارسی

یک صفحه اینترنتی با وب فونت ، زیباتر، خواناتر و حرفه ای تر خواهد بود.

به کمک سامانه وب فونت فارسی هرکسی می تواند از وب فونت استفاده کند، بویژه وبلاگ نویس ها و طراحان سایت. همانطور که احتمالا می دانید سامانه های زیادی برای وب فونت وجود دارد، مانند؛ www.google.com/fonts یا www.fonts.com اما تاکنون هیچ کدام از آنها به صورت کامل و شایسته به فونت های مخصوص فارسی نپرداخته است. از این رو، ما برآن شده ایم سامانه ای رایگان برای سایت های فارسی ایجاد کنیم تا تمام فارسی زبانان بتوانند از سایت های فارسی لذت ببرند.

با این که هدف اولیه این تیم ایجاد سامانه ای رایگان برای فونت های استاندارد فارسی (سری بی) بود اما به وسیله این سامانه شما می توانید از فونت های غیر مرسوم نیز بهرهمند شوید.