font-face در CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 19 بهمن 1399در این مقاله با تگ font-face در CSS آشنا می شویم.
توضیح خانواده فونت در CSS
به طور پیش فرض ، شما فقط می توانید از بین تعداد انگشت شماری از فونت های ایمن وب برای استفاده در CSS انتخاب کنید. اگرچه کاربردی و پرطرفدار هستند اما اگر بخواهید طرحی منحصر به فرد ایجاد کنید ممکن است کاربرد چندانی نداشته باشد. برای اینکه بتوانید یک خانواده قلم CSS سفارشی اضافه کنید و از آن در سند خود استفاده کنید ، باید از قانون font-face@ استفاده کنید:
@font-face {
font-family: fontname;
src: url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2);
}استفاده از font-face در CSS
با استفاده از قانون font-face ، می توانید یک خانواده قلم CSS سفارشی را وارد کنید ، آن را در مرورگر بارگیری کرده و در وب سایت ارائه دهید:
@font-face {
font-family: fontname;
src: url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2);
font-weight: italic;
}این قانون باید قبل از سایر خصوصیات یک ظاهر طراحی شده در صفحه سبک ظاهر شود.
برای بارگذاری یک خانواده قلم سفارشی در CSS ، باید دو ویژگی تعریف کنید:
- font-family نام قلم را تعریف می کند
- src یک URL را مشخص می کند که از آن فونت بارگیری می شود
همچنین می توانید برخی از ویژگی های اختیاری را اضافه کنید:
| Description | Property |
| نحوه کشش قلم را مشخص می کند (به طور پیش فرض طبیعی است) | font-stretch |
| نحوه مدل سازی قلم را تعریف می کند (به طور پیش فرض طبیعی است) | font-style |
| جسارت قلم را تعریف می کند (به طور پیش فرض طبیعی است) | font-weight |
| نویسه های یونی کد را که قلم پشتیبانی می کند تعریف می کند (به طور پیش فرض U + 0-10FFFF) | unicode-range |
نحوه استفاده از قلم بارگیری شده
برای استفاده از خانواده قلم های سفارشی در CSS ، ابتدا باید منبع معتبری را پیدا کنید که قلم ها را ارائه می دهد (به عنوان مثال Font Squirrel) و فایل را با قلم مورد نظر خود بارگیری کنید. پس از پایان بارگیری ، ممکن است لازم باشد آن را استخراج کنید.
مراحل بعدی برای کاربران ویندوز و Mac کمی متفاوت است:
| برای نصب روی فایل کلیک راست کنید. پرونده های قلم را با پسوند .ttf ، .otf یا .fon به پوشه Fonts منتقل کنید. | windows |
| روی پرونده دوبار کلیک کنید و در منوی ظاهر شده Install Font را انتخاب کنید. | mac |
روش های جایگزین برای افزودن فونت ها
دو روش وجود دارد که به شما امکان می دهد یک خانواده فونت CSS سفارشی بدون استفاده از font-face@ اضافه کنید – پیوند دادن و وارد کردن.
پیوند دادن پرونده های قلم نیاز دارد که یک عنصر <link> را با منبع قلم تعریف شده در قسمت <head> سند HTML اضافه کنید:
<link href="https://fonts.googleapis.com/css?family=Gayathri&display=swap" rel="stylesheet">
div {
font-family: 'Gayathri', sans-serif;
}وارد کردن پرونده های قلم به استفاده از قانون import نیاز دارد. مجدداً ، باید منبع را برای وارد کردن خانواده قلم CSS از:
@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');
div {
font-family: 'Gayathri', sans-serif;
}پشتیبانی از مرورگر
این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera و Edge پشتیبانی می شود.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟