فونت های وب CSS

فونت های وب CSS به فونت های سفارشی که در صفحات وب بارگیری می شوند اشاره دارند. بدون font-@face ، شما فقط به استفاده از فونت های ایمن وب محدود می شوید.

فونت های وب CSS چیست؟

فونت های ایمن وب به دلیل ایمن بودن در بسیاری از رایانه ها ، به عنوان ایمن تگ گذاری شدند. آن ها تضمین کردند که محتوای متن برای همه کاربران یکسان ارائه می شود.

با این حال ، فونت های وب CSS با اجازه دادن به توسعه دهندگان برای تنظیم فایلهای فونت برای بارگیری هنگام بارگیری کاربران از وب سایتهایشان ، این قانون را تغییر دادند. بنابراین ، می توانید از فونت های منحصر به فرد و نادر برای طراحی وب خود استفاده کنید.

قالب های مختلف قلم

بارگذاری فونت های وب CSS کار دشواری نیست. فراموش نکنید که مسیرها (URL ها) را برای پرونده های قلم تنظیم کنید تا به CSS خود منتقل شوند. علاوه بر این ، برای اطمینان از اینکه مرورگرها می توانند فونت ها را شناسایی و پیدا کنند ، باید قالب هر پرونده فونت را مشخص کنید.

به عنوان یک قاعده ، بهتر است قالب های جدیدتر مانند WOFF2 را به ابتدای کار نزدیک کنید ، در حالی که قالب هایی مانند TTF می توانند در انتهای اعلامیه باشند.

نحوه اعلامیه در اینجا است:

@font-face {
  font-family: 'SelectedFont';
  src: url('mywebfont.eot'); /* IE9 Compat Modes */
  src: url('mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('mywebfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('mywebfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('mywebfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

OTF یا TTF

OTF و TTF مخفف OpenType Font و TrueType Font هستند.

TTF یک پسوند پرونده است که به طور گسترده توسط اپل و مایکروسافت استفاده می شود. بدون افت کیفیت مقیاس بندی می شود و فونت ها هنگام نمایش و چاپ به همان شکل هستند.

OTF مبتنی بر TrueType است زیرا بدون افت کیفیت نیز مقیاس می گیرد. این بیشتر مناسب طراحان وب است زیرا OTF ویژگی هایی از قبیل بندهای کوچک و کوچک را ارائه می دهد.

وقتی می خواهید از OTF یا TTF استفاده کنید ، به یاد داشته باشید که تفاوت بین OTF و TTF این است که TTF برای استفاده منظم مناسب تر است ، در حالی که OTF می تواند برای طراحان وب بهتر باشد.

WOFF در مقابل WOFF2

WOFF بر اساس قالب های TTF و OTF ساخته شده است. با این حال ، عمدتا برای استفاده در وب است. همه مرورگرهای مدرن از فشرده سازی سریع فونت های WOFF پشتیبانی می کنند (که منجر به سریعتر بارگیری فونت ها می شود).

WOFF2 نسخه جدیدتر WOFF است. WOFF2 فشرده سازی بهبود یافته و اندازه پرونده های فونت کوچکتر را ارائه می دهد. بنابراین ، پاسخ WOFF در مقابل WOFF2 این است که WOFF2 برتر است و اکنون به جای قالب فونت WOFF ، به توصیه شده تبدیل می شود.

SVG

SVG اجازه می دهد تا از آیکون های glyph برای نمایش محتوای متنی استفاده شود. به دلیل مشخصات منحصر به فرد SVG 1.1 می توانید در اسناد SVG قلم ایجاد کنید. علاوه بر این ، ویژگی های استایل فونت CSS با اسناد SVG کار می کنند ، بنابراین font-face@ می تواند برای متن در پرونده های SVG استفاده شود.

EOT

EOT مخفف عبارت OpenType Font های جاسازی شده است.فونت های EOT را می توان به صورت نسخه های فشرده فونت های OTF دانست که توسط مایکروسافت برای استفاده از آنها در صفحات وب تعبیه شده است.

بارگذاری فونت های سفارشی

قانون font-face@ به شما امکان می دهد فونت های سفارشی را به صفحات وب اضافه کنید.

این قانون توسعه دهندگان را از استفاده از فونت های به اصطلاح وب ایمن رها می کند و لازم است اولین مورد در پرونده CSS باشد.

برای اینکه font-face@ به درستی کار کند ، باید دارای ویژگی font-family باشد. علاوه بر این ، توسعه دهندگان باید ویژگی src را نشان دهند: راهی به فایل فونت.

در مثال ، ما فونت خود را comicSans صدا می کنیم ، مسیر اطلاعات فونت را تعریف می کنیم و آن را روی یک عنصر HTML اعمال می کنیم:

@font-face {
    font-family: comicSans;       
    src: url(comicSans_light.woff);  
}    

div  {
    font-family: comicSans;  
}

می توانید مسیر را به دو روش به فایل فونت اضافه کنید:

• با تعیین فایل محلی: در صورتی کار می کند که کاربران قبلاً فونت را نصب کرده باشند.
• با تعیین URL: اگر فایل محلی در دسترس نیست ، CSS تنظیم می کند که فایل به طور خودکار در رایانه بارگیری شود.

نکته: نام فونت باید با یک حرف کوچک شروع شود زیرا یک شخصیت بزرگ می تواند باعث ایجاد عوارض در اینترنت اکسپلورر شود.

ساخت فونت های منحصر به فرد پررنگ است

اگر جلوه پررنگ می خواهید ، باید از ویژگی استایل دهی به font-weight استفاده کنید.

با این حال ، روش استفاده از آن با فونت های وب CSS بارگذاری شده کمی متفاوت است. شما باید یک قانون اضافی font-face@ اضافه کنید که حاوی توضیحاتی برای متن پررنگ باشد. این اجازه می دهد تا از چندین قانون font-face@ برای یک فونت استفاده کنید.

در مثال زیر ، نحوه افزودن قانون دوم font-face@ را مشاهده خواهید کرد. comicsans_bold.woff فایل فونت دیگری است که شامل نویسه های پررنگ برای قلم ComicSans خواهد بود.

هر زمان comicSans به صورت font-weight ارائه می شود ، مرورگرها به این قطعه CSS اشاره می کنند: bold:

@font-face {
    font-family: myFont;       
    src: url(/learn/Greetings-Bold.ttf);  
    font-weight: bold;
}    
@font-face {
   font-family: myFont;
   src: url(/learn/Greetings.ttf);
}

نکات مهم فونت های وب CSS:

• یک روش مدرن برای استفاده از font-face@ شامل تنها فرمت های WOFF2 و WOFF است زیرا به شما کمک می کند با پرونده های کمتری کار کنید.
• فونت های SVG دیگر توصیه نمی شوند زیرا ممکن است مشکلاتی ایجاد کنند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.