جواب سوال طریقه استفاده فونت ساحل
طریقه استفاده فونت ساحل:
بعد از دانلود فونت و تعریف آن به شکل زیر مقدار فونت فمیلی فونت تعریف شده انتخاب شده را مساوی با مقدار فونت فمیلی در استایل دهی عناصر قرار میدهیم.
در صورت نیاز سایر ویژگی های فونت رو تغییر می دهیم.
@font-face {
font-family: Sahel;
src: url('Sahel.eot');
src: url('Sahel.eot?#iefix') format('embedded-opentype'),
url('Sahel.woff2') format('woff2'),
url('Sahel.woff') format('woff'),
url('Sahel.ttf') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Sahel-B;
src: url('Sahel-Bold.eot');
src: url('Sahel-Bold.eot?#iefix') format('embedded-opentype'),
url('Sahel-Bold.woff2') format('woff2'),
url('Sahel-Bold.woff') format('woff'),
url('Sahel-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: Sahel-L;
src: url('Sahel-Light.eot');
src: url('Sahel-Light.eot?#iefix') format('embedded-opentype'),
url('Sahel-Light.woff2') format('woff2'),
url('Sahel-Light.woff') format('woff'),
url('Sahel-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Sahel-S;
src: url('Sahel-SemiBold.eot');
src: url('Sahel-SemiBold.eot?#iefix') format('embedded-opentype'),
url('Sahel-SemiBold.woff2') format('woff2'),
url('Sahel-SemiBold.woff') format('woff'),
url('Sahel-SemiBold.ttf') format('truetype');
font-weight: 600;
}
@font-face {
font-family: Sahel-BLACK;
src: url('Sahel-Black.eot');
src: url('Sahel-Black.eot?#iefix') format('embedded-opentype'),
url('Sahel-Black.woff2') format('woff2'),
url('Sahel-Black.woff') format('woff'),
url('Sahel-Black.ttf') format('truetype');
font-weight: 900;
با سلام و عرض ادب
همونطور که استاد فرمودند در رابطه تمرین این جلسه تاپیک جدید باز نمیکنم.
دوستان در سایت w3schools نوشته شده بجای اینکه تک تک از property های
- font-style
- font-family
- font-variant
- font-weight
- font-size/line-height
استفاده کنیم این امکان وجود داره که در عوض از property
- font
استفاده کنیم که حجم کدها کمتر بشه و کدهای تمیزتری رو داشته باشیم.
ولی من الان هر چقدر سعی میکنم این روش برای فونت ساحل کار نمیکنه!
<style>
@font-face {
font-family: sahel;
src: url("fonts/Sahel.eot") format("eot");
src: url("fonts/Sahel.woff2") format("woff2"),
url("fonts/Sahel.woff") format("woff");
font-weight: normal;
}
p{
font: sahel 25px;
}
</style>
باسلام
من اول فونت ساحل رو دانلود کردم
بعد فایل های مورد نظر رو در مسیر فایل html قرار دادم از حالت زیپ خارج کردم
بعد فایل ها و فرمت های فونت رو با @font-face تعریف کردم به شکل بالا
اسمی برای فونت فامیلی تعریف کردم
کوتاه نوسی فونت کردم
در قسمت کوتاه نویسی فونت اسم فونت فامیلی که در فونت فیس تعریف کردم استفاده کردم
باید دقت شود در کوتاه نویسی فونت همون طور که گفتید سلسله مراتب رعایت شود
نحو ه ی استفاده از Font:
در کوتاه نویسی خصوصیت ها، ریشه خصوصیت‌ها را نوشته و سپس به مقدار دهی می‌پردازیم، که البته مقدار دهی آن نیز طبق قاعده است، و اگر بر خلاف قاعده عمل کنیم، کد ما کار نخواهد کرد. در اول به مثال زیر توجه کنید، سپس به توضیح آن خواهیم پرداخت:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12pt;
font-family: times , serif;
}این پنج خصوصیت را می‌توان به صورت زیر در یک خط خلاصه کرد:
p { font: italic small-caps bold 12pt times , serif; }قاعده مقدار دهی به صورت زیر است
font: font-style | font-variant | font-weight | font-size | font-family
که کافی است بعد از font: طبق ترتیب بالا فقط مقدار خصوصیت‌ها را نوشت و دیگر نیازی نیست که خود نام خصوصیت نیز آورده شود.
درضمن دادن مقدار دادن به سه خصوصیت font-style ، font-variant و font-weight هنگام کوتاه نویسی اختیاری اما مقدار دادن به دو خصوصیت font-size و font-family اجباری است وگرنه کد کار نخواهد کرد، یعنی حداقل مقدار دادن در صورت کوتاه نویسی به صورت زیر است:
p { font: font-size | font-family; }درضمن همانطور که قبلا گفتم ترتیب آنها نیز مهم است مثلا اگر در قاعده بالا اول font-family و سپس font-size را مقدار دهی کنیم، کد در مرورگر کار نخواهد کرد.
در حالت کوتاه نویسی مقادیر خصوصیت‌ها باید با یک space از یکدیگر جدا شوند.
یک نمونه تقریبا کامل از مقدار دهی ویژگی font بصورت زیر می باشد:
p {
font-style: normal;
font-variant: normal;
font-weight: 500;
font-size: 13px;
line-height: 1.6;
font-family: Arial;
/* shorthand */
font: normal normal 500 13px/1.6 Arial;
}