طراحی سایت با CSS3
طراحی سایت با CSS3 ، در اغلب سایت های فارسی از فونتهای Tahoma و Arial برای نوشتن محتوای صفحات و تگهای h1 تا h6 استفاده می شود. این در حالی ایست که در سالهای اخیر فونت های زیبای بسیار زیادی برای زبان فارسی طراحی شده است. و برخی از صاحبان سایت ها علاقه دارند تا از فونت های فارسی در طراحی سایت خود استفاده کنند.
اما استفاده از این فونتها مشکلاتی در بر دارد. زیرا اگر شما این فونت را در استایل متن استفاده کنید. و در کامپیوتر بازدید کننده این فونت وجود نداشته باشد. به صورت پیش فرض با فونت Arial نمایش داده می شود. که در برخی موارد ظاهر سایت را بهم می ریزد.
در ادامه این مقاله نحوه استفاده از فونت های فارسی در طراحی سایت با استفاده از 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;
}
همانطور که دیده می شود، در هر بلوک باید ویژگی در کنار مقدار آن نوشته شود. برای مثال در انتخابگر 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 طراحی سایت در کرج را مشاهده کنید:
@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 در گوگل کروم ساپورت نمی شود.
ساخت سایت در کرج یک سرمایه گذاری هوشمندانه برای کسب و کارهایی است که می…
در دنیای امروز،حضور آنلاین قوی برای هر کسب و کار خدماتی حیاتی است.اگر در کرج…
در دنیای امروز داشتن یک وبسایت حرفه ای دیگر یک انتخاب نیست؛ بلکه یک ضرورت…
طراحی سایت کارآرسا توسط شرکت طراحی سایت منسیکس انجام گردیده است. شرکت کاراسا سرویس با…
تیم منسیکس با تجربه بالا در طراحی انواع وب سایت های فروشگاهی، شرکتی، آموزشی و…
انتخاب بین وردپرس و سایت اختصاصی، بستگی به نوع پروژه، بودجه، زمان و نیازهای شما…