font-face

چگونه فونت دلخواه خود را داشته باشیم؟

 

 

همیشه انتخاب فونت از مواردی بوده که مدیرهای سایت ها و طراحان اون رو بزحمت انداخته!  فونت عامل تعیین کننده ای در زیبایی سایت هست و همچنین نشون دهنده شخصیت اون سایته!  حالا با سرچ ساده ای در گوگل و گشت و گذاری در سیات های فارسی می فهمیم که فونت های زیبا و متنوعی در صفحات وب بوجود اومده که هر کدوم از اونها نشان دهنده سطح و شخصیت سایت هست!

اما این فونت های متنوع از کجا اومده؟ بهتون می گم با ورود css3 قابلیتی بنام @font-face بوجود اومد که بوسیله اون می شه هر فونتی رو توی صفحه وبتون نمایش بدید! اما چطور ؟ با هم می بینیم!

ساختار اصلی @font-faceبصورت زیر هست!

  1. @font-face {
  2. font-family‘B yekan’;
  3.  url(‘http://ifont.ir/eot/BYekan.eot?#’format(‘eot’),
  4.  url(data:application/octet-stream;base64,) format(‘woff’),
  5.  url(‘http://ifont.ir/svg/byekan.svg’format(‘svg’);
  6. font-weight:normal;
  7. }

font-family در @font-face اسم فونت مورد نظر شما هست که می تونید بطور دلخواه هر اسمی که می خواهید بگذارید روش!

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

فرمت استاندارد فرمت ttf هست و به زودی تمامی مرورگر ها از این فرمت پشتیبانی می کنن اما فرمت های اصلی عبارتند از گوگل کروم : ttf و SVG و  فایرفاکس : otf و ttf  و اپرا و سافاری : ttf , otf و SVG و اینترنت اکسپلورر : eot

خب! اما حالا ما یه فونت داریم چطوری اینها رو به این فرمت ها در بیام و لود کنیم؟ کافیه که به سایت  @font-face Kit Generator برید و فونت خودتون رو آپلود کنید و فایلی با این فرمت ها رو دریافت کتید! به همین سادگی!

خوب حالا چطور از این @font-face استفاده کنیم؟ کافیه که هرجا می خواهید این فونت اعمال بشه خصوصیت

 font-family: ‘B yekan’;

رو بنویسید!

امیدوارم این آموزش براتون مفید باشه و نحوه استفاده از این خصوصیت خوب  css رو فراگرفته باشید!

چگونه فونت دلخواه خود را داشته باشیم؟

 

fixed-menu-on-scroll

چگونه منوی ثابت بسازیم؟

در این چند وقت  طراحی سایت های تک صفحه و پارالکس اسکورولینگ افزایش یافته است! قبلا دلیل این رواج یافت را گفتیم که عمده ترین آن جذب بازدیدکننده به وبسایت بود!

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

حالا می خواهیم به این سوال پاسخ دهیم که چگونه منوی ثابت بسازیم؟

بطور مثال وقتی می خواهیم اسکرول کنیم در صفحه منو همراه با اسکورل به پایین بیاید برای اینکار کافی ست تا از کد های جاوااسکریپت کمک بگیریم به این صورت!


jQuery(function($){
$(window).on('scroll',function(){
if ($(window).scrollTop()>90) {
$('.Menu').addClass('Menu-Fix');
}else{
$('.Menu').removeClass('Menu-Fix');
}
})

 خب! حالا باید خود منو را در html بنویسیم

<div class=”Menu”>
<nav>
<ul class=”sf-menu”>
<li><a href=”/”>خانه</a></li>
<li><a href=>طراحی سایت</a></li>
<li><a href=”/Post”>نمونه کارها</a></li>
<li><a href=”/contact”>درباره ما</a></li>
</ul>
</nav>
</div>

و می توانید برای شکل منو هم این کد css را اضافه کنید!!

.Menu-Fix {
background-color: #ffff;
height: 45px;
left: 0;
padding: 3px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

 

حالا شما یک منوی ثابت در صفحه خود دارید!! به اینها اکتفا نکنید! سعی کنید خودتان اینها را توسعه دهید !! از امتحان کردن نترسید! سوالی بود در خدمتیم!

111

چطور یه سایت توپ داشته باشیم!

چطور یه سایت توپ  داشته باشیم؟برای پاسخ به این سوال با ما همراه شوید:

1- ارورهای html برطرف کنید!

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

12

2-رسپانسیو باشید!

25% از جستجوهای اینترنت از طریق گوشی های هوشمند انجام می شود پس لازم است سایت شما متناسب با اندازه صفحه دستگاه مورد نظر تغیر شکل دهد! این کار باعث افزایش رنک شما و تعداد بازدیدکنندگان از سایت شما می شود! اگر سایت شما از ابتدا رسپانسیو طراحی نشده می توانید با ساخت یک اپلیکشن گوشی برای سایت این مشکل را تا حدی برطرف کنید اما هیچ چیز جای این ویژگی را نمی‌گیرد!

13

3- لینک های سرکاری!

روی لینکی در یک سایت کلیک می کنیدبه صفحه جدید منتقل می‌شوید و بعد با عدد404 برخورد می‌کنید! بله چیزی نیست جز ارور404 که نشان می‌دهد مطلب مورد نظر یافت نشد! به قولی دیگر انگار لینک سرکاری بود! برای اینکه با این مشکل مواجه نشوید سعی کنید همیشه لینک های اصلی سایتتان را چک کنید! گوگل روی خطای 404 و لینکههای اشنباه حساس است و باعث کم شدن رتبه شما می‌شود! می توانید با مراجه به آدرس  www.brokenlinkcheck.com لینک های خراب سایت خود را شناسایی و آن ها را اصلاح کنید!

133

4-سرعت بارگذاری صفحه!

قبلا هم گفتیم و بازم هم می‌گیم سایت خوب سایتی هست که علاوه بر زیبایی و محتوا دارای سرعت بارگذاری خوب باشه بخصوص در کشور ما که سرعت اینترنت پایین است سرعت سایت رابطه مستقیمی با تعداد بازدیدکنندگان دارد پس هرچه بارگذاری سرعت تر باشد مخاطبان بیشتر خواهد بود! می توانید به رفتن به آدرس pagespeed سرعت بارگذاری سایت خود را تست کنید!

16

5-بک لینک!

هر چه بک لینک ها بیشتری داشته باشید برای سئوی سایت شما بهتر خواهد بود! البته نه هر سایتی سعی کنید تا جایی که می توانید از سایتهایی بکلینک بگیرید که متناسب با محتوای سایت شما باشد! برای چک کردن بکلینک های خود می توانید به سایت الکسا مراجعه کنید!

166

6-سازگاری!

سعی کنید در کدنویسی سایت این مورد را لحاظ کنید که همه مخاطبان از یک مرورگر استفاده نمی‌کنند! بعضی از کروم و بعضی دیگر متاسفانه از اینترنت‌اکسپلوره! پی سایت شما باید در همه این مرورگر ها شکل مناسبی داشته باشد!

 

1777

HTML

آموزش HTML بخش 3

Style چیست ؟

قابلیت هایی برای استفاده کردن از تگ ها برای استفاده در زبان HTML می باشد که از مهمترین و پر اهمیت ترین بخش ها در ساختار طراحی سایت می باشد که برای یادگیری CSS و استفاده کردن از آن باید باید آن را فراگیریم این قابلیت ها در صفحات سایت وسیله ای برای تاثیر بر روی تمامی تگ های زبان برنامه نویسی HTML می باشد
ادامه مطلب …

HTML

آموزش HTML بخش 1

در این قسمت ما میخواهیم شما را با زبان کد نویسی html آشنا کنیم

این زبان توسط <strong>سازمان جهانی وب  ( World Wide Web Consortium ) </strong>به وجود آمده تا کاربران بتوانند صفحات وب خود را به راجتی طراحی کنند
ادامه مطلب …