جواب سوال طریقه استفاده فونت ساحل

💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۱۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

طریقه استفاده فونت ساحل:

بعد از دانلود فونت و تعریف آن به شکل زیر مقدار فونت فمیلی فونت تعریف شده انتخاب شده را مساوی با مقدار فونت فمیلی در استایل دهی عناصر قرار میدهیم.

در صورت نیاز سایر ویژگی‌های فونت رو تغییر می‌دهیم.

@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 در html5 ساپورت نمیشه پس بهتره استفاده نکنیم دیگه

حمید کوشافر ۲۰ خرداد ۱۳۹۹، ۰۵:۱۴

نحو ه ی استفاده از 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;
}

مهدی حبیبیان ۲۰ خرداد ۱۳۹۹، ۰۶:۱۳