۵ دستور خاص CSS

[zednet]

در CSS چند دستور خاص برای بالا بردن کیفیت و راحتتر شدن کار شما هست که بهمراه مثال آنها را شرح میدهم.

import (1@
وارد کردن کدهای css، درون کدی دیگر؛ برای مثال شما نیاز دارید که مجموعه ای از دستورات یک فایل css که نوشتید را در درون یک فایل دیگه هم داشته باشید تا مجبور نشید بعضی از کدها را دوباره بنویسید.

@import url('new-style.css');
با کد زیر میتونید در فایل های HTML نیز از دستور import استفاده کنید:

<style type="text/css" media="all"> @import "new-style.css"; </style>

media (2@
برای نمایش صفحات یک وب سایت رسانه های مختلفی وجود داره که هریک خصوصیات خودشو داره و باعث میشه طراح سایت بتونه بهترین حالت نمایش سایت، در هر رسانه را تعیین کنه.
شما میتونید تعیین کنید که صفحه شما در هر رسانه به چه صورت نمایش داده شود؛ برای مثال حالت نمایش چاپ:

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}
حالت های دیگر از media عبارت است از:
all » برای همه رسانه ها
handheld » برای تبلت ها
print » برای حالت چاپ
projection » برای پروژکتور
screen » برای صفحه نمایش کامپیوتر
نکته مهم: در حال حاضر برای اینترنت اکسپلورر فقط all، screen و print تعریف شده.


charset (3@
از جمله استانداردهای بین‌المللی که کامل‌تر از بقیه استانداردهای موجود به رفع نیازهای مربوط به تبادل اطلاعات چندزبانه پرداخته‌، می‌توان به استاندارد یونی‌کد اشاره کرد.
به زبان ساده میشه گفت که یونی‌کد روشی برای تبدیل متون به رشته‌های عددی قابل ذخیره در کامپیوتر هست. روش‌های گوناگونی برای این کار وجود دارن، ولی مزیت یونی‌کد نسبت به آنها، این هست که یک روش کامل جهانی هست. نمی خوام خیلی کامل در مورد یونی‌کد صحبت کنم ولی خواستم یه پیش زمینه در مورد یونی‌کد داشته باشید. بحث یونی‌کد رو در یک پست دیگه بهش می پردازیم.

با استفاده از دستور charset@ میتونید یونی‌کد صفحه خود رو در CSS تعیین کنید.


@charset "utf-8";
/* OR */
@charset "ISO-8859-1";

font-face (4@
با استفاده از این دستور شما می تونید از فونتی که در سیستم شما نصب نیست استفاده کنید، به اینصورت که شما آدرس فونت مورد نظر خود را در قسمت SRC وارد می کنید. به مثال زیر توجه کن:


@font-face {
font-family: yourfontname;
src: url(yourfontname.ttf);
font-weight: bold;
}

p {
font-family: yourfontname;
font-weight: bold;
}




page (5@
فرض کنید صفحه نمایشی شما مثل یک جعبه هست. شما میتونید اندازه، حاشیه، فاصله و خیلی چیزهای دیگر صفحه خود را تعیین کنید.



@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}




-= موفق باشید =-

[AhmadTux]

سلام
در مورد font face سوال داشتم
اولاً تو مرورگرهای مختلف از فونت های مختلفی ساپورت میشه . و شما فقط از ttf استفاده کردید ؟
ثانیاً چطور به مرورگر حالی کنیم که اگه فونت رو رایانه طرف بود از همون استفاده کرد ؟

[zednet]

برای سازگار بودن وب سایت خود با تمام مرورگرها باید این نوع پشتیبانی ها را درنظر داشته باشید:
InternetExplorer از EOT و TTF پشتیبانی می کند.
Safari ، FireFox ، Chrome و Opera از OTF و TTF وSVGپشتیبانی می کنند.
بیشتر مرورگرهای موبایل مثل سافاری IPAD و... ، از SVG پشتیبانی می کنند.

<style>
@font-face {
font-family: 'nazanin';
src: url('b_nazanin.eot'),
url('b_nazanin.woff') format('woff'),
url('b_nazanin.ttf') format('truetype'),
url('b_nazanin.svg#webfont') format('svg')
url('Italic.otf') format('OpenType');
}

/* تست */
p{
font-family: 'nazanin';
color:#FF2255;
}

</style>

[b.paseban]

با تشکر از شما دوست عزیز.
چندتا سوال داشتم.ممنون میشم پاسخ بدین.
منظورتون از url چیه؟
ادرس فونت توی یه سایت مرجع فونت رو منظورتون هست؟یا نه چیز دیگه ای هست؟
اگر ما بخواهیم چندتا فایل css توی سایت داشته باشیم باید ابتدای هر فایلمون این دستور رو بنویسیم یا لازم نیست این کار رو انجام بدیم؟

[zednet]

شما هم می توانید آدرس فونت سایت های دیگر را در قسمت URL قرار دهید، مثلا در قسمت URL این عبارت را وارد کنید:
http://yoursite.ir/fonts/nazanin.ttf
هم می توانید بصورت Local از URL استفاده کنید.

در جواب سوال دوم باید عرض کنم، نیازی نیست شما برای هر بار استفاده کردن از فونتی جدید این مراحل را طی کنید؛
می توانید از مثال زیر استفاده کنید:

@font-face {
font-family: 'nazanin';
src:url('b_nazanin.ttf') format('truetype');

font-family: 'Italic';
src:url('Italic.otf') format('OpenType');
}
در مثال بالا من هم از فونت Nazanin می توانم استفاده کنم و هم از فونت Italic.

-= موفق باشید =-

[b.paseban]

با تشکر از شما دوست عزیز.بابیت سوال اول.
اما سوال دوم من یه چیز دیگه ای بود .
من گفتم اگه چندتا فایل css داسته باشیم.

[zednet]

:لبخندساده: متوجه شدم!
شما می توانید کلیه فونت های مورد نظر خود را طبق روش بالا ایجاد کنید
بعد در یک فایل مثلا با نام fonts.css ذخیره کنید.
می توانید این فایل را در همه صفحات بازخوانی کنید
اما راه ساده تر این هست که شما مثلا یک فایل اصلی CSS بنام main.css دارید، در خط اول این فایل شما این دستور را وارد می کنید:

@import url('fonts.css');
حالا در همه جای دستورات CSS خود می توانید از فونت های جدید وارد شده استفاده کنید.

[AhmadTux]

برای سازگار بودن وب سایت خود با تمام مرورگرها باید این نوع پشتیبانی ها را درنظر داشته باشید:
InternetExplorer از EOT و TTF پشتیبانی می کند.
Safari ، FireFox ، Chrome و Opera از OTF و TTF وSVGپشتیبانی می کنند.
بیشتر مرورگرهای موبایل مثل سافاری IPAD و... ، از SVG پشتیبانی می کنند.

<style>
@font-face {
font-family: 'nazanin';
src: url('b_nazanin.eot'),
url('b_nazanin.woff') format('woff'),
url('b_nazanin.ttf') format('truetype'),
url('b_nazanin.svg#webfont') format('svg')
url('Italic.otf') format('OpenType');
}

/* تست */
p{
font-family: 'nazanin';
color:#FF2255;
}

</style>

سلام
ممنون از شما
الان مشکل این چیه ؟

@font-face {
font-family:'b koodak';
src: url('../fonts/fa/eot/BKoodkBd.eot'),
url('../fonts/fa/woff/BKoodkBd.woff') format('woff'),
url('../fonts/fa/ttf/BKoodkBd.ttf') format('truetype'),
url('') format('svg')
url('') format('OpenType');
}