مجموعه فونت های فارسی برای وب سایت

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

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

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

انواع فونت فارسی با فرمت وب + آموزش استفاده از فونت فارسی در وب سایت

فونت دست نویس با فرمت های مختلف برای سایت

ما در این آموزش به شما روش استفاده از دستور و همچنین به خاصیت دستور multi-column خواهیم پرداخت.

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

ابتدا به ویژگیهای دستور multi-column در سی اس اس css می پردازیم

ویژگی های دستور multi-column در css سی اس اس

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-width

 دستور column-count مشخص میکند که صفحه به چند ستون تقسیم شود در واقع شما با استفاده از  کد زیر میتوانید صفحات خود را به 3 ستون تقسیم بندی کنید.

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

 دستور column-gap تعیین کننده و امکان فاصله ی بین ستون ها را به شما می دهد

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

از دستور column-rule-style میتوانید به منظور خط کشی بین ستونها استفاده کنید

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

از دستور column-rule-width میتوانید برای تعیین عرض هر کدام از خط کشی ها استفاده نمایید.

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

از دستور column-rule-color میتوانید برای تعیین رنگ خط کشی ها استفاده نمایید

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

از دستور column-rule میتوانید به تنهایی برای ایجاد خط کشی،تعیین رنگ،و عرض هر خط کشی بین ستونها استفاده کرد

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;

}

از دستور column-width میتوانید برای بهینه کردن و همچنین ایجاد و تقسیم بندی ستون های ریسپانسیو استفاده نمایید.

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}

 منبع : طراحی سایت ارزان وب آلفا