آموزش نحوه‌ی استفاده از فونت در طراحی سایت

کاربرد   cssدرطراحی سایت

  cssخلاصه شده‌ی، کلمه‌ی cascading style sheet  است؛ که برای تغییر و عوض کردن ظاهر فونت در طراحی سایت استفاده می‌شود و همواره موجب افزایش زیبایی، سایت شما می‌گردد. طی گذر زمان آپشن‌های مختلفی به این برنامه اضافه شده که به شما امکان اضافه کردن فونت دلخواه را می‌دهد. در  طراحی سایت فونت ‌های گوناگونی وجود دارد که فرمت‌ آن‌ها به صورت otf/ eot /woff/ woff2/ svg/ ttfمی‌باشد؛ این فونت‌ها هر کدام ویژگی منحصر به فردی دارند. با گسترش علم و فناوری، برای پیش‌گیری از مشکلات موجود در این زمینه در نسخه‌ی سوم Cssقابلیتی به نام  font face وجود داشته که با استفاده از آن می‌توانید، فونت مورد نظر خود انتخاب کنید.

نحوه استفاده از فونت‌ در Css

خانواده فونت، در اصل اندازه و سبک نوشته را  در طراحی سایت تعیین می‌کنند. این بخش به دو دسته می‌شود ؛که عبارتند از :

 Serif:با استفاده از این فونت، خط‌های کوچکی در ظاهر کاراکترها ایجاد می‌کند.

Sans-serif: این فونت‌ها به صورت ساده بوده و خط‌های کوچک ندارند..

نکته :ابتدا قبل از شروع کار برای طراحی سایت ، باید مطمئن شوید که آیا مرورگر شما توانایی پشتیبانی از فونت موجود را داشته یا نه ؟  این نکته برای جلوگیری از، وقوع هرگونه مشکل در حین انجام کار می‌باشد.

مرحله‌ی اول/ فونت مدنظر خود را دانلود کنید.

در این قسمت می‌توانید انواع فونت مدنظر خود را انتخاب و در ادامه دانلود کنید.

مرحله‌ی دوم/ ایجاد پوشه برای فونت

فونت دانلود شده را، در پوشه‌ی اصلی پروژه خود قرار داده و پوشه‌ای به نام فرمت‌های فونت ایجاد کنید.

مرحله‌ی سوم / بازیابی فونت در css

در این مرحله ابتدا باید فونت‌های مورد نظر ، معرف  font face  باشند. سپس برای انجام این دستورالعمل فونت مورد نظر را در قسمت font familyوارد کنید ، تا مرورگر شما از این فونت پشتیبانی کند. اکثر این فونت ها استاندارد بوده؛ که در تمامی سیستم‌ها، شناخته شده هستند. Src با استفاده از آدرسی مشخص، مرورگرهای فونت را دریافت می‌کند؛ و فرمت‌ها به همان شکل، در این قسمت قرار می‌گیرند.

برای نمونه :

Font – face

Font family: wmoji/

Src: nur (fonts/ wmoji font.eot)

Src: nur (fonts/ wmoji font.woff) format (woff)

مرحله‌ی چهارم/ استفاده از سایر فونت‌ها در طراحی سایت

در این قسمت با به کارگیری یک انتخابگر، نام فونت دلخواه را ثبت می‌کنیم و سپس نام یک یا دو فونت را به عنوان جایگزین  درج کرده؛ تا در صورت، پشتیبانی نشدن از فونت‌های مورد نظر، این فونت‌ها به جای آن‌ها نمایش داده شوند. برای نمونه، در صورت بازیابی نشدن فونت اصلی یعنی اولی از دومی استفاده می‌شود؛ اگر دومی نیز به هر دلیلی درج نشد از فونت جایگزین سوم استفاده می‌کنیم.

مثال برای قرار دادن فونت‌های جایگزین :

Font-family: font1/ font2/ font3

نکته:برای به کارگیری فونت‌های چند کلمه‌ای، در مرحله‌ی اول، باید این فونت‌ها را داخل دابل کوتیشن قرار دهیم. مانند: “”

نمونه برای قرار دادن چند فونت  به صورت همزمان:

۱- Style

۲- Body

۳- Font-family:“time’s bebas. beykan.infinity

نحوه استفاده از ویژگی‌های Font-familyبرای فونت مدنظر:

Font- weight:برای تغییر میزان فونت، به صورت بولد و نرمال از این گزینه استفاده می‌کنیم.

Font- size: با استفاده از این گزینه ‌می‌توانیم اندازه فونت را، در طراحی سایت خود مدیریت کنیم.

– : Lengthاندازه‌گیری فونت ها در طراحی سایت، بر اساس واحدهای PX/ cx /emصورت می‌گیرد.

– Lnitial: تعیین سایز به صورت پیش فرض

– Lnherit: تنظیم فونت با اندازه فونت والد و مدیریت و کنترل آن

Font- style:  این قسمت به سه گزینه‌ی normal،italic،oblique، دسته بندی می‌شود.

– Normal:  در این روش متن، به صورت طبیعی و نرمال نمایش داده می‌شود.

– Italic: در این گزینه به صورت خوابیده نشان داده می‌شود.

– Oblique: در این گزینه حروف یا کلمات به صورت کج نمایان می‌شوند.