مشخص کردن یک سری فونت خانواده با CSS فونت خانواده اموال

نحو دارایی فونت-خانواده

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

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

p {font-family: Arial؛ }

اگر این سبک را به یک صفحه اعمال کردید، تمام پاراگرافها در خانواده فونت Arial نمایش داده خواهند شد. این عالی است و از آنجا که "Arial" همان چیزی است که به عنوان "فونت امن وب" شناخته می شود، بدان معنی است که اکثر (اگر نه همه) رایانه آن را نصب کرده باشد، می توانید راحت باشید که می دانید که صفحه شما در فونت مورد نظر نمایش داده خواهد شد .

پس اگر فونت انتخابی شما پیدا نشد چه اتفاقی می افتد؟ به عنوان مثال، اگر از "فونت ایمن وب" در یک صفحه استفاده نکنید، اگر نماینده کاربر آن فونت را نداشته باشد، چه کار می کند؟ آنها جایگزین می کنند.

این می تواند در برخی صفحات بسیار خنده دار به دنبال داشته باشد. من یک بار به یک صفحه رفتم که کامپیوتر من آن را به طور کامل در Wingdings (یک مجموعه آیکون) نمایش داد، زیرا کامپیوتر من فونت را که برنامهنویس مشخص کرده بود نداشت، و مرورگر من انتخاب بسیار بدی در فونت داشت استفاده به عنوان یک جایگزین. صفحه برای من کاملا غیر قابل خواندن بود! این جایی است که یک پشته فونت به بازی می آید

جدا کردن چندین خانواده فونت با یک Comma در فونت پشته

"فونت پشته" لیستی از فونت هایی است که می خواهید صفحه خود را استفاده کنید. شما می توانید گزینه های فونت خود را به ترتیب اولویت های خود قرار دهید و هر کدام را با کاما جدا کنید. اگر مرورگر اولین خانواده فونت را در لیست نداشته باشد، دومین و سپس سوم را امتحان می کند تا زمانی که یک سیستم در سیستم پیدا کند.

فونت خانواده: Pussycat، الجزایر، برادوی؛

در مثال بالا، مرورگر برای اولین بار فونت "Pussycat" را جستجو می کند، سپس "الجزایر" و سپس "برادوی" اگر هیچ یک از فونت های دیگر یافت نشد. این به شما امکان می دهد که حداقل یکی از فونت های انتخاب شده مورد استفاده قرار گیرد. این کامل نیست، به همین دلیل است که ما هنوز می توانیم به ستون فونت اضافه کنیم (به عنوان خوانده شده!).

استفاده از فونت های عمومی آخرین

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

شما همیشه باید لیست فونت خود را (حتی اگر آن یک لیست از یک خانواده یا فقط فونت وب ایمن) با یک فونت عمومی پایان دهید. پنج مورد وجود دارد که می توانید استفاده کنید:

دو مثال فوق ممکن است به:

فونت خانواده: Arial، sans-serif؛ فونت خانواده: Pussycat، الجزایر، برادوی، فانتزی؛

برخی از نامهای فونت نام دو یا بیشتر واژه است

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

فونت خانواده: "Times New Roman"، serif؛

در این مثال، می توانید ببینید که نام فونت "Times New Roman"، که چند کلمه ای است، در نقل قول قرار گرفته است. این به مرورگر می گوید که همه این سه کلمه از جمله این نام فونت هستند، در حالی که سه فونت متفاوت با نام های یک کلمه ای دارند.

مقاله اصلی جنیفر کریینین. ویرایش شده در 12/2/16 توسط جرمی جیرارد