فونت جایگزین (Font Fallbacks) در CSS

«فونت جایگزین» راهکاری است برای زمانی که فونت اصلی در دستگاه کاربر موجود نیست. بنابراین با نوشتن چند گزینه در ویژگی font-family و پایان دادن فهرست با خانواده عمومی، نمایش متن همیشه قابل اعتماد می ماند.

دسته بندی های رایج فونت ها

جایگزین ها معمولاً بر اساس پنج خانواده عمومی نوشته می شوند: Serif، Sans-serif، Monospace، Cursive و Fantasy.

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

جایگزین های خانواده Serif

h1 { font-family: "Times New Roman", Times, serif; }
h2 { font-family: Georgia, serif; }
p  { font-family: Garamond, serif; }

جایگزین های خانواده Sans-serif

.a { font-family: Arial, Helvetica, sans-serif; }
.b { font-family: Tahoma, Verdana, sans-serif; }
.c { font-family: "Trebuchet MS", Helvetica, sans-serif; }
.d { font-family: Geneva, Verdana, sans-serif; }

جایگزین های خانواده Monospace

code { font-family: "Courier New", Courier, monospace; }

جایگزین های خانواده Cursive

.hand { font-family: "Brush Script MT", cursive; }

جایگزین های خانواده Fantasy

.title { font-family: Copperplate, Papyrus, fantasy; }

الگوی نوشتن font-family و نکات ضروری

ابتدا فونت دلخواه را بنویسید، سپس چند فونت مشابه و در پایان یک خانواده عمومی قرار دهید. اگر نام فونت چندکلمه ای است، آن را در کوتیشن بگذارید.

.text { font-family: Georgia, "Times New Roman", serif; }

نکته: پیش از انتشار، نمایش فونت ها را در مرورگرها و دستگاه های مختلف بررسی کنید و حتماً از «فونت جایگزین» استفاده کنید.

برای مرور مفاهیم مرتبط، به بخش فونت وب سیف و راهنمای کلی فونت ها در CSS سر بزنید. همچنین می توانید درباره فونت جایگزین بیشتر بخوانید.