در طراحی سایت با CSS3 چگونه از فونتهای فارسی استفاده کنیم؟
طراحی سایت با CSS3 ، در اغلب سایت های فارسی از فونتهای Tahoma و Arial برای نوشتن محتوای صفحات و تگهای h1 تا h6 استفاده می شود. این در حالی ایست که در سالهای اخیر فونت های زیبای بسیار زیادی برای زبان فارسی طراحی شده است. و برخی از صاحبان سایت ها علاقه دارند تا از فونت های فارسی در طراحی سایت خود استفاده کنند.
اما استفاده از این فونتها مشکلاتی در بر دارد. زیرا اگر شما این فونت را در استایل متن استفاده کنید. و در کامپیوتر بازدید کننده این فونت وجود نداشته باشد. به صورت پیش فرض با فونت Arial نمایش داده می شود. که در برخی موارد ظاهر سایت را بهم می ریزد.
در ادامه این مقاله نحوه استفاده از فونت های فارسی در طراحی سایت با استفاده از CSS3 به شما آموزش داده می شود.
نحوه بکاربردن فونت فارسی با CSS3
با استفاده از CSS3 مشکل استفاده از فونت های فارسی در طراحی سایت کرج برطرف شده است. و طراحان وب سایت ها با چند خط کد می توانند فونت مورد نظر خود را در سایت قرار دهند. فقط کافیست مراحل زیرا طی نمایند.
1» فونت مورد نظر را در ۴ فرمت ttf ، eot ، svg ، woof برای مرورگرهای مختلف تهیه نماید. برای تبدیل فونت به فرمتهای دیگر می توانید از سرویسهای آنلاین همانند www.onlinefontconverter.com نمایید.
2» زمانیکه که فرمتهای فونت را آماده کردید فایل CSS اصلی طراحی سایت در کرج را باز کنید و کد زیر را قرار دهید
@font-face {
font-family: ‘b koodak’;
src: url(‘Fonts/BKoodak.eot’);
src: url(‘Fonts/BKoodak.eot?#iefix’)
format(‘embedded-opentype’),
url(‘Fonts/BKoodak.woff’) format(‘woff’),
url(‘Fonts/BKoodak.ttf’) format(‘truetype’),
url(‘Fonts/BKoodak.svg#BKoodakRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
هدف از کدنویسی و طراحی سایت با CSS چیست
همانطور که دیده می شود، در هر بلوک باید ویژگی در کنار مقدار آن نوشته شود. برای مثال در انتخابگر h1 رنگ به عنوان ویژگی با مقدار ورودی آبی و اندازه فونت به عنوان ویژگی دوم حروف متن با مقدار ورودی 12 انتخاب شده می باشد.
اگر دستور نوشته ای داده شود، به رنگ آبی و با اندازه 12 نوشته می شود. در یک انتخابگر می توان از چند ویژگی و مقدار آنها بهره برد. تمام ویژگی ها باید توسط سمی کاملن از هم جدا گردند. به دستور زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
P {
color: red;
text-align: center;
}
/style>>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html> کدهای اضافه کردن فونت فارسی به CSS و HTML
در این بخش می‌توانید کدهای فونت فارسی در CSS و فونت فارسی در html طراحی سایت در کرج را مشاهده کنید:
@font-face {
font-family: vazir;
font-style: normal;
font-weight: 100;
src: url("fonts/Vazir-Thin.eot");
src: url("fonts/Vazir-Thin.woff") format("woff"),
url("fonts/Vazir-Thin.ttf") format("ttf"),
url("fonts/Vazir-Thin.woff2") format("woff2");
}
@font-face {
font-family: vazir;
font-style: normal;
font-weight: 300;
src: url("fonts/Vazir-Light.eot");
src: url("fonts/Vazir-Light.woff") format("woff"),
url("fonts/Vazir-Light.ttf") format("ttf"),
url("fonts/Vazir-Light.woff2") format("woff2");
}
@font-face {
font-family: vazir;
font-style: normal;
font-weight: 400;
src: url("fonts/Vazir-Regular.eot");
src: url("fonts/Vazir-Regular.woff") format("woff"),
url("fonts/Vazir-Regular.ttf") format("ttf"),
url("fonts/Vazir-Regular.woff2") format("woff2");
}
@font-face {
font-family: vazir;
font-style: normal;
font-weight: 950;
src: url("fonts/Vazir-Black.eot");
src: url("fonts/Vazir-Black.woff") format("woff"),
url("fonts/Vazir-Black.ttf") format("ttf"),
url("fonts/Vazir-Black.woff2") format("woff2");
}
body {
font-family: vazir;
direction: rtl;
}با استفاده از کد بالا می توانید از فونت های فارسی در طراحی سایت استفاده نمایید. البته به این نکته توجه کنید که فرمت فونت هایی که استفاده می نمایید. truetype باشد و ویرایش شده نباشد زیرا ممکن است در سیستم عامل های مختلف فونت ها به شکل دیگری نمایش داده شود. فقط توجه داشته باشید استفاده بیش از حد از فونت ها فارسی در طراحی سایت در کرج ، سرعت بارگذاری را افزایش می دهد. و از طرفی روش در حال حاضر بکاربردن فونت فارسی با CSS3 در گوگل کروم ساپورت نمی شود.
