لیست فونت های سیستم فونت های ایمن

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

استفاده از آنها بسیار آسان است. بیایید فونت های وب گوگل را به عنوان مثال در نظر بگیریم.

فونت Open Sans، Droid Serif یا Lato را انتخاب کنید. کد را بنویسید و آن را در عنصر قرار دهید سند HTML. شما آماده ارجاع آن در CSS هستید! کل فرآیند بیش از 60 ثانیه طول نکشید. و همه چیز کاملا رایگان است.

اشتباه چه می تواند باشد؟

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

اگر یک گزینه پشتیبان را پیاده سازی کنید، این اتفاق نمی افتد.

استفاده از فونت های وب ایمن چقدر مهم است؟

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

در مورد وب سایت ها چطور؟ شبیه این یکی؟ ممکن است فونتی که مشاهده می کنید همان قلمی نباشد که در ابتدا برای سایت تجویز شده است.

چه مفهومی داره؟ فرض کنید که طراح خانواده ای از فونت های پولی را برای سایت انتخاب کرده است. اگر آنها را نصب نکرده اید و توسط وب سرویس خاصی ارائه نمی شوند، فونتی که مشاهده می کنید یکی از گزینه های استاندارد است. مثلا تایمز نیو رومن.

بنابراین، متن روی صفحه نمایش شما ممکن است به سادگی وحشتناک به نظر برسد.

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

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

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

بیایید نگاهی به مجموعه ای از محبوب ترین ها بیندازیم فونت های استاندارد HTML.

15 بهترین فونت وب ایمن

1. آریال

در اکثر موارد استاندارد در نظر گرفته می شود. رایج ترین فونت " بدون دندانه"یا فونت های sans serif ( که در انتهای حروف سریف ندارند). اغلب در ویندوز برای جایگزینی کاراکترهای دیگر استفاده می شود.

1. هلوتیکا

Helvetica یک نجات دهنده برای طراحان است. این فونت وب استانداردتقریباً همیشه کار می کند ( حداقل به عنوان یک شبکه ایمنی برای فونت های دیگر).

1. تایمز نیو رومن

همان نقشی را برای فونت های سریف ایفا می کند که Arial برای فونت های sans serif انجام می دهد. این یکی از محبوب ترین ها است دستگاه های ویندوزی. این یک نسخه به روز شده از فونت قدیمی Times است.

1. بار

CSS فونت استانداردتایمز برای اکثر افراد آشناست. بسیاری از مردم او را با حروف کوچک در ستون های باریک روزنامه های قدیمی به یاد می آورند. رایج ترین نوع چاپ که به یک سنت تبدیل شده است.

1. پیک جدید

شبیه به Times New Roman و به عنوان یک تنوع از کلاسیک های قدیمی استفاده می شود. همچنین یک فونت تک فاصله در نظر گرفته می شود. برخلاف فونت‌های serif و sans serif، همه کاراکترهای آن دارای عرض یکسان هستند.

1. پیک

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

1. وردنا

Verdana را می توان به حق یک فونت وب واقعی در نظر گرفت ( فونت وب واقعی) به لطف خطوط ساده ای که به عنوان سریف عمل می کنند و همچنین اندازه بزرگ هستند. حروف آن کمی دراز هستند، بنابراین به راحتی روی صفحه نمایش خوانده می شوند.

1. گرجستان

فونت استاندارد وب گرجستان از نظر شکل و اندازه مشابه فونت Verdana است. کاراکترهای آن بزرگتر از سایر فونت های هم اندازه هستند. اما بهتر است از آن در ترکیب با دیگران استفاده نکنید. همان Times New Roman در مقایسه شبیه یک کوتوله به نظر می رسد.

1. پالاتینو

قدمت پالاتینو به دوران رنسانس باز می گردد. بدون شوخی این یک فونت بزرگ دیگر است که برای وب مناسب است. معمولاً در تیترها و تبلیغات استفاده می شود.

1. گاراموند

یکی دیگر از فونت های قدیمی که به قرن شانزدهم در پاریس باز می گردد. نسخه جدید و بهبود یافته آن در اکثر دستگاه های ویندوزی به صورت استاندارد ارائه می شود. بعدها این فونت توسط سیستم عامل های دیگر پذیرفته شد.

1. کتابدار

کتابدار ( یا Bookman Old Style) - یکی از بهترین فونت های استانداردبرای سرفصل ها ویژگی بارز آن خوانایی حتی در هنگام استفاده از اندازه کوچک است.

1. کمیک بدون ام اس

Comic Sans MS یک جایگزین سرگرم کننده برای فونت های سریف است.

1. تربوشت ام اس

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

1. آریال مشکی

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

1. تأثیر

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

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

سیستم، استاندارد، فونت امن

هر مرورگری فقط فونت هایی را نشان می دهد که در سیستم عامل رایانه وجود دارد. به همین دلیل به آنها System one می گویند و به صورت پیش فرض همراه با سیستم عامل نصب می شوند.

و به آنها فونت های ایمن می گویند زیرا احتمالاً در مرورگر اکثر بازدیدکنندگان سایت نمایش داده می شوند.

اما مشکل این است که سیستم عامل های مختلف مجموعه های مختلفی از فونت ها را نصب کرده اند. می توانید مجموعه فونت های ارائه شده را به همراه سیستم عامل در صفحات رسمی ویندوز و مک او اس مشاهده کنید. و در یونیکس/لینوکس هیچ مجموعه استانداردی وجود ندارد.

برای اینکه صفحه اینترنت مطابق با ایده طراح نمایش داده شود، یک ویژگی فونت به نام font-family در CSS نصب شد.

اموال font-family

ویژگی font-family خانواده فونت هایی است که بر اساس ویژگی های خاصی گروه بندی می شوند.

خانواده های ژنریک:

• serif - فونت هایی با سریف در انتها.
• sans-serif - فونت های sans-serif;
• خط شکسته - فونت های مورب؛
• فانتزی - فونت های تزئینی؛
• monospace - فونت monospace (با حروف هم عرض).

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

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

فقط منطق را دنبال کنید و همه چیز شفاف خواهد شد.

بدنه (فونت-خانواده: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif؛ )

بیایید به آنچه نوشته شده است نگاه کنیم:

• سیستم عامل ویندوز - Arial.
• OC Mac OS - Helvetica CY;
• OC Unix/Linux - Nimbus Sans L;
• خانواده عمومی - sans-serif.

به اصطلاح فونت های ایمن

بر اساس سیستم عامل ویندوز، لیستی از چندین فونت ایمن گردآوری شده است.

1. آریال
2. آریال مشکی
3. کمیک بدون ام اس
4. پیک جدید
5. گرجستان
6. تأثیر
7. تایمز نیو رومن
8. تربوشت ام اس
9. وردنا

همه این فونت ها بر روی Mac OS X، Windows و بسیاری از کاربران یونیکس/لینوکس که فونت های Core را برای بسته وب نصب کرده اند، نصب می شوند.

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

جدول مطابقت و تعلق فونت ها به یک خانواده خاص:

پنجره ها	سیستم عامل مک	یونیکس/لینوکس	خانواده اجدادی
آریال مشکی	Helvetica C.Y.	Nimbus Sans L	بدون دندانه
آریال	Helvetica C.Y.	Nimbus Sans L	بدون دندانه
کمیک بدون ام اس	موناکو CY	* (به زیر مراجعه کنید)	خط شکسته
پیک جدید	* (به زیر مراجعه کنید)	نیمباس مونو ال	تک فضا
گرجستان	* (به زیر مراجعه کنید)	کتاب مدرسه قرن L	سریف
تأثیر	زغال چوب C.Y.	* (به زیر مراجعه کنید)	بدون دندانه
تایمز نیو رومن	Times C.Y.	Nimbus Roman No9 L	سریف
تربوشت ام اس	Helvetica C.Y.	* (به زیر مراجعه کنید)	بدون دندانه
وردنا	ژنو C.Y.	DejaVu Sans	بدون دندانه

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

اتصال فونت های سیستم به سایت

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

اتصال فونت ها در یک فایل CSS

اگر نیاز به اتصال دارید فونت اصلی برای کل سند، فقط باید کد زیر را به شیوه نامه اضافه کنید:

بدنه ( فونت-خانواده: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif; /* فونت را به کل سند وصل کنید */ اندازه قلم: 16 پیکسل؛ /* علاوه بر این اندازه فونت را تنظیم کنید */ فونت -weight: 400 /* وزن قلم را تنظیم کنید یا به جای 400 مقدار را روی حالت عادی تنظیم کنید */ )

تعیین فونت برای سرفصل ها H1، H2، H3، H4، H5، H6، (اینجا هم همینطور است، ما فقط مقدار پررنگ را برای برجسته کردن عنوان ها تنظیم می کنیم):

H1,h2,h3,h4,h5,h6( font-family: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif; /* فونت را به عنوان ها متصل کنید */ font-weight: 600; / * وزن قلم را تنظیم کنید یا به جای 600، مقدار را روی پررنگ */ تنظیم کنید.

ما فقط به پاراگراف ها یک فونت اختصاص می دهیم:

P( font-family: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif؛ /* فونت را به پاراگراف ها متصل کنید، می توان آن را به لیست های li، بلوک های div، فرم ها و سایر عناصر اعمال کرد */ font-weight : /* وزن فونت را تنظیم کنید، یا به جای 600، مقدار قلم را روی پررنگ تنظیم کنید */ font-size: /* همچنین اندازه قلم را برای پاراگراف ها تنظیم کنید */ ;

به فقط به یک پاراگراف خاص یک فونت اختصاص دهید، یا بلاک کنید، ابتدا باید یک کلاس به این بلوک در سند HTML اختصاص دهید

در اینجا یک پاراگراف با فونت سفارشی وجود دارد

و در جدول CSS کد زیر را بنویسید:

فونت( font-family: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif; /* فونت را به پاراگراف های خاصی متصل می کنیم، می توان آن را به لیست های لی، بلوک های div، فرم ها و عناصر دیگر اعمال کرد */ font-weight: /* وزن فونت را تنظیم کنید، یا به جای 600، مقدار فونت را به صورت پررنگ تنظیم کنید: 16px همچنین اندازه فونت را تنظیم کنید */

اکنون، به هر تگ - یک عنصر html با کلاس فونت (آن را هر چه دوست دارید صدا کنید) یک فونت Arial با معمولی (400)، پررنگ و اندازه 16 پیکسل اختصاص داده می شود.
به طور مشابه، می‌توانید فونت‌های مختلفی را به لیست‌های لی، جداول، کل بلوک‌های div، کلمات یا عبارات جداگانه اختصاص دهید.

اتصال فونت ها در یک سند HTML

فونت ها به طور مستقیم در یک سند HTML مانند یک فایل CSS گنجانده می شوند، تنها تفاوت در نحو است. می توانید فونت ها را در سربرگ سند - بین تگ ها قرار دهید (شبیه به یک فایل CSS)، یا درون خطی - اختصاص خصوصیات مستقیم به تگ های html.

از جمله فونت ها در هدر، بین برچسب ها . برای این کار کد زیر را به سند html اضافه کنید:

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

اتصال فونت ها به صورت خطی، مستقیماً به عناصر سایت. اجازه بدهید چند مثال برایتان بیاورم:

اتصال فونت به پاراگراف

در اینجا یک پاراگراف با متن است

یک کلمه جداگانه را به صورت پررنگ برجسته می کنیم و یک فونت جداگانه از اصلی اختصاص می دهیم

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

این لینک است

به طور مشابه، ما فونت هایی را به هر تگ html اختصاص می دهیم.

اما همچنان بهتر است و توصیه می شود که از طریق یک فایل CSS به عناصر اختصاص دهید. ابتدا باید استایل ها را فقط یک بار در CSS بنویسید و سپس فقط کلاس مورد نیاز را در HTML اختصاص دهید. دوم اینکه با نوشتن استایل های درون خطی محتوای تکراری ایجاد می شود. به نظر می‌رسد این ویژگی‌ها و کلاس‌ها توسط موتورهای جستجو فهرست‌بندی شده‌اند، و من شنیده‌ام که W3C می‌خواهد inline را به طور کلی لغو کند. اگرچه گاهی اوقات نوشتن سبک ها به این روش آسان تر است.

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

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

یک طراح خوب، مانند یک طراح چیدمان خوب، می‌داند که مرورگر فقط می‌تواند از فونت‌هایی استفاده کند که روی رایانه کاربر نصب شده‌اند تا صفحه را نمایش دهند. یعنی فونت ها را می توان به دو دسته تقسیم کرد:

1. فونت هایی که توسط اکثریت قریب به اتفاق کاربران بدون مشکل نمایش داده می شوند.
2. فونت هایی که گروه نسبتاً زیادی از کاربران ندارند.

اگر طراح از فونت های دسته دوم برای ایجاد، به عنوان مثال، یک لوگو یا عناوین ثابت بزرگ استفاده کرده است، نمی توانید از تکنیک جایگزینی متن با یک تصویر دریغ نکنید. نقطه ضعف استفاده از این تکنیک انعطاف ناپذیری است. در صورت ایجاد تغییرات در متن، باید تصویر را دوباره انجام دهید و CSS را تغییر دهید (مثلاً اگر ابعاد تصویر جدید با تصویر قبلی مطابقت نداشته باشد).

می توان گفت که خطر استفاده از یک تکنیک مستقیماً به احتمال تغییر متن بستگی دارد. بنابراین مثلاً متن کلی یک صفحه را نمی توان با فونت های غیر استاندارد نوشت! یک طراح شایسته هرگز این کار را انجام نمی دهد. و اگر طراح با یک فونت سبز برخورد کرد، یک طراح چیدمان خوب به سادگی موظف است اشتباه خود را تصحیح کند - در چیدمان، این فونت را با مشابه ترین فونت استاندارد جایگزین کنید.

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

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

فونت های استاندارد مجموعه ای از فونت هایی هستند که با سیستم عامل نصب می شوند. از آنجایی که سیستم عامل ها متفاوت هستند، مجموعه فونت های آنها نیز متفاوت است. فهرستی از فونت‌های استاندارد نسخه‌های مختلف ویندوز را می‌توانید پیدا کنید، به‌عنوان مثال، در مقاله فونت‌های استاندارد ویندوز، و فهرستی از فونت‌های استاندارد سیستم‌عامل Mac در صفحه فونت‌های موجود در سیستم عامل Mac. در مورد سیستم عامل های یونیکس/لینوکس، آنها یک مجموعه فونت ندارند. بسیاری از کاربران لینوکس از مجموعه فونت DejaVu استفاده می کنند، به ویژه در اوبونتو که به طور پیش فرض نصب شده اند. طبق آمار http://www.codestyle.org، بسیاری از کاربران یونیکس/لینوکس نیز مجموعه فونت های URW، Free و سایر فونت ها را نصب کرده اند. بر اساس همین آمار، بیش از 60 درصد از کاربران یونیکس/لینوکس فونت هایی از فونت های Core برای مجموعه وب روی رایانه خود دارند که تا سال 2002 به طور رسمی برای دانلود رایگان در وب سایت مایکروسافت در دسترس بود.

برای اینکه صفحه همانطور که طراح در نظر دارد در هر سیستم عاملی نمایش داده شود، می توان چندین فونت را در ویژگی CSS font-family مشخص کرد که با کاما از هم جدا شده اند.

این ویژگی یک لیست اولویت بندی شده از نام های خانوادگی فونت و/یا نام خانوادگی عمومی را مشخص می کند. با توجه به مشخصات CSS2، دو نوع نام خانوادگی فونت وجود دارد:

1. نام خانوادگی فونت انتخابی شما به عنوان مثال، "Times new Roman"، "Arial" و دیگران. نام خانوادگی فونت حاوی فاصله باید در علامت نقل قول قرار گیرد. اگر نقل قول وجود نداشته باشد، هر کاراکتر فاصله قبل و بعد از نام فونت نادیده گرفته می شود و هر دنباله ای از فاصله ها در نام فونت به یک فاصله تبدیل می شود.
2. خانواده عمومی (مشترک). مشخصات خانواده های عمومی زیر را تعریف می کند:
   • serif - فونت هایی با سریف در انتها.
   • sans-serif - فونت های sans-serif;
   • خط شکسته - فونت های مورب؛
   • فانتزی - فونت های تزئینی؛
   • monospace - فونت monospace (با حروف هم عرض).

نام خانوادگی قبیله کلمات کلیدی هستند و نیازی به درج شدن در گیومه ندارند.

بنابراین، برای طراحی، یک فونت استاندارد از سیستم عامل ویندوز گرفته می شود، یک فونت مشابه برای Mac OS و Unix/Linux انتخاب می شود، یک خانواده فونت مشترک مشخص می شود و کار شما تمام است.

اما به این سادگی نیست. بیایید با جزئیات بیشتر حفاری کنیم.

به دنبال فونت های ایمن برای وب هستید

در اینترنت، مفهوم فونت های وب "ایمن" از لحاظ تاریخی توسعه یافته است. فونت ایمن فونتی است که برای همه سیستم عامل ها استاندارد است. از آنجایی که ما فقط می توانیم چنین وضعیتی را در خواب ببینیم، هیچ فونت کاملاً مطمئنی وجود ندارد!

برخی از فونت ها را می توان با برخی رزروها ایمن نامید.

مبنای تعریف فونت های "ایمن" فونت های رایج ترین سیستم عامل ویندوز بود که در سایر سیستم عامل ها نیز استفاده می شود. نمونه ای از این استفاده فونت های Core قبلا ذکر شده برای بسته فونت وب است که طبق آمار توسط بسیاری از کاربران یونیکس/لینوکس دانلود شده است.

این بسته شامل فونت های Andale Mono، Arial Black، Arial، Comic Sans MS، Courier New، Georgia، Impact، Times New Roman، Trebuchet MS، Verdana، Webdings می باشد. همه آنها از الفبای سیریلیک پشتیبانی می کنند که برای Runet مهم است.

مجموعه فونت‌هایی که به‌صورت استاندارد با Mac OS X ارائه می‌شوند (این سیستم‌عامل بیشترین استفاده را در میان کاربران سیستم‌عامل مک است) شامل تمام فونت‌های فونت‌های Core برای مجموعه وب است.

بنابراین، بر اساس فونت های ویندوز استفاده شده در سیستم عامل های دیگر، لیست زیر از فونت های وب به اصطلاح "ایمن" تشکیل شد:

1. آریال
2. آریال مشکی
3. کمیک بدون ام اس
4. پیک جدید
5. گرجستان
6. تأثیر
7. تایمز نیو رومن
8. تربوشت ام اس
9. وردنا

فونت Webdings حاوی نمادهایی است و نمی توان از آن برای محتوا استفاده کرد. Andale Mono به طور گسترده مورد استفاده قرار نمی گیرد زیرا برای خواندن روزمره صفحه نمایش مناسب نیست و همه کاربران ویندوز آن را ندارند.

هر کاربر ویندوز، Mac OS X و اکثریت قریب به اتفاق کاربران یونیکس/لینوکس (یعنی کسانی که فونت‌های Core را برای بسته وب نصب کرده‌اند) همه این فونت‌ها را دارند.

اما بقیه چی؟ پس از همه، شما می خواهید طرح طراح توسط هر چه بیشتر کاربران دیده شود!

فونت های پشتیبانی کننده سیریلیک

یکی از ویژگی های خاص RuNet مشکل کدگذاری صفحات و پشتیبانی از سیریلیک در فونت ها است. برای جلوگیری از مشکلات رمزگذاری کاراکترهای مختلف، افراد باهوش یونیکد را ارائه کردند که به شما امکان می دهد کاراکترهای چندین زبان را در یک فونت ترکیب کنید. بنابراین، برای صفحات روسی زبان باید فقط از فونت های یونیکد استفاده کنید که از سیریلیک پشتیبانی می کنند.

در زیر جدولی از متناظرهای فونت آمده است.

پنجره ها	سیستم عامل مک	یونیکس/لینوکس	خانواده اجدادی
آریال مشکی	Helvetica C.Y.	Nimbus Sans L	بدون دندانه
آریال	Helvetica C.Y.	Nimbus Sans L	بدون دندانه
کمیک بدون ام اس	موناکو CY	* (به زیر مراجعه کنید)	خط شکسته
پیک جدید	* (به زیر مراجعه کنید)	نیمباس مونو ال	تک فضا
گرجستان	* (به زیر مراجعه کنید)	کتاب مدرسه قرن L	سریف
تأثیر	زغال چوب C.Y.	* (به زیر مراجعه کنید)	بدون دندانه
تایمز نیو رومن	Times C.Y.	Nimbus Roman No9 L	سریف
تربوشت ام اس	Helvetica C.Y.	* (به زیر مراجعه کنید)	بدون دندانه
وردنا	ژنو C.Y.	DejaVu Sans	بدون دندانه

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

به عنوان مثال، اگر متن اصلی چیدمان Arial باشد، این فونت را در جدول پیدا می کنیم و خط مربوطه را در CSS می نویسیم:

بدنه (فونت-خانواده: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif؛ )

بدن ( فونت - خانواده: Arial، "Helvetica CY"، "Nimbus Sans L"، sans - serif.

این ورودی به این معنی است که اگر کاربر فونت Arial را داشته باشد (و همه کاربران ویندوز و همه کاربران Mac OS X آن را داشته باشند)، صفحه با این فونت نمایش داده می شود. اگر کاربر این فونت را نداشته باشد، صفحه یک کاربر روسی زبان Mac OS 9 با فونت استاندارد سیستم Helvetica CY به دقت نمایش داده می شود و برای کاربر یونیکس/لینوکس با فونت Nimbus Sans L نمایش داده می شود. ، که بر روی 90 درصد از کاربران یونیکس/لینوکس نصب شده است. اگر کاربر یونیکس/لینوکس در 10 درصد باشد که این فونت را ندارد، صفحه با فونت سریف که به طور پیش فرض برای مشاهده صفحات وب تنظیم شده است نمایش داده می شود.

علاوه بر این واقعیت که جدول فونت های یونیکس/لینوکس را در نظر می گیرد، نماد CY عجیبی بعد از Helvetica معمولی نیز وجود دارد. بیایید بفهمیم که چیست!

قبل از انتشار Mac OS X، این خط به این معنی بود: برای کاربران ویندوز، صفحه را با Arial، برای کاربران Mac OS 9 با فونت استاندارد Helvetica و برای بقیه، صفحه را در سیستم می‌بینیم. فونت sans-serif که به صورت پیش فرض در مرورگر پیکربندی شده است. اما باز هم یک نکته مهم! فونت استاندارد Mac OS 9 Helvetica سیریلیک ندارد! برای صفحه روسی زبان، این به معنای زیر است: برای کاربران ویندوز ما صفحه Arial را نمایش می دهیم، برای کاربران Mac OS 9 - با فونت استاندارد Helvetica، که اطلاعات ناخوانا را نمایش می دهد، و بقیه صفحه را با سیستم sans-serif مشاهده می کنند. فونت به طور پیش فرض در مرورگر پیکربندی شده است.

برای نمایش صحیح این مجموعه برای کاربران Mac OS 9، به جای Helvetica غیرسیریلیزه شده، منطقی است که همان قلم استاندارد Mac OS 9 Helvetica CY حاوی سیریلیک را مشخص کنید.

خوانش خط کش ها از زمان انتشار Mac OS X تغییر کرده است. اکنون یک فونت استاندارد رایج برای Windows/Mac OS X مشخص شده است. و اگر می‌خواهیم کاربران Mac OS 9 بتوانند هدف طراح را ببینند، باید فونتی حاوی سیریلیک را در خط فونت قرار دهیم.

بنابراین در حالی که هیچ فونت ایمن وجود ندارد، خانواده ای از فونت ها وجود دارد. آنها نیز نامیده می شوند پشته های CSS فونت. علاوه بر فونت‌های استاندارد Windows/Mac OS X، این خطوط همچنین می‌توانند شامل فونت‌های معادل از مجموعه استاندارد Mac OS 9 (که به‌طور پیش‌فرض حاوی فونت‌های «ایمن» نیست) و فونت‌های رایج Unix/Linux باشد.

هر طراح صفحه‌آرایی دیر یا زود با لحظه‌ای مواجه می‌شود که یک طراح از فونتی در طرح‌بندی استفاده می‌کند که در فهرست فونت‌های «ایمن» گنجانده نشده است. اما این هنوز دلیلی برای به صدا درآوردن زنگ خطر نیست! به عنوان مثال، طراحان اغلب از فونت Tahoma در طرح‌بندی استفاده می‌کنند که در این لیست گنجانده نشده است. یک خط فونت که به درستی ساخته شده است، امکان استفاده از Tahoma، بلکه سایر فونت ها را نیز فراهم می کند. تعداد فزاینده ای از طراحان از این فرصت استفاده می کنند و یک طراح چیدمان ماهر باید این موضوع را بداند.

در زیر یک جدول اضافی از فونت‌هایی وجود دارد که در لیست فونت‌های "ایمن" گنجانده نشده‌اند، اما می‌توانند در طرح‌بندی استفاده شوند.

پنجره ها	سیستم عامل مک	خانواده اجدادی
کنسول لوسیدا	موناکو	تک فضا
لوسیدا بدون یونیکد	لوسیدا گرانده	بدون دندانه
تاهوما	ژنو C.Y.	بدون دندانه

اگر الفبای سیریلیک وجود نداشته باشد چه؟

برای متون انگلیسی زبان، جداول بالا ظاهر کمی متفاوت دارند.

پنجره ها	سیستم عامل مک	یونیکس/لینوکس	خانواده اجدادی
آریال مشکی	ابزارک	Nimbus Sans L	بدون دندانه
آریال	هلوتیکا	Nimbus Sans L	بدون دندانه
کمیک بدون ام اس	موناکو	TSCu_Comic	خط شکسته
پیک جدید	پیک	نیمباس مونو ال	تک فضا
گرجستان	* (به زیر مراجعه کنید)	کتاب مدرسه قرن L	سریف
تأثیر	زغال چوبی	رخا	بدون دندانه
تایمز نیو رومن	بار	Nimbus Roman No9 L	سریف
تربوشت ام اس	هلوتیکا	گارودا	بدون دندانه
وردنا	ژنو	DejaVu Sans	بدون دندانه

برای فونت های Arial، Courier New و Times New Roman بهتر است هنگام ایجاد خط کش ابتدا فونت Unix/Linux و سپس فونت Mac OS را مشخص کنید. این به دلیل کج بودن مجموعه فونت های هسته لینوکس X11 است.

فونت هایی که در لیست "ایمن" گنجانده نشده اند، اما می توانند در طرح بندی ها استفاده شوند، توسط پشته های فونت CSS بر اساس این جدول بهتر تعریف می شوند.

پنجره ها	سیستم عامل مک	یونیکس/لینوکس	خانواده اجدادی
کنسول لوسیدا	موناکو	-	تک فضا
لوسیدا بدون یونیکد	لوسیدا گرانده	گارودا	بدون دندانه
لینوتایپ پالاتینو	پالاتینو	گارودا**	بدون دندانه
تاهوما	ژنو	کالیمتی	بدون دندانه

خط تیره در ستون یونیکس/لینوکس نشان می دهد که کاربران این سیستم عامل ها به احتمال زیاد فونت پیش فرض را در صفحه خواهند دید.

** در این خط، منطقی است که فونت Garuda را قبل از Palatino قرار دهید (به توضیح بالا مراجعه کنید).

نتیجه گیری:

1. هیچ فونت کاملاً مطمئنی وجود ندارد. فونت های زیر را می توان به طور مشروط ایمن در نظر گرفت:
   • آریال
   • آریال مشکی
   • کمیک بدون ام اس
   • پیک جدید
   • گرجستان
   • تأثیر
   • تایمز نیو رومن
   • تربوشت ام اس
   • وردنا
2. پشته های امن CSS که پشتیبانی از سیریلیک در فونت ها را در نظر می گیرند را می توان در مقاله یافت.
3. اگر پشتیبانی از الفبای سیریلیک در صفحه مهم نیست، از پشته های CSS مقاله استفاده می کنیم.

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

اگر در زمینه طراحی وب تازه کار هستید، ممکن است به چیزی مانند این فکر کنید: «چرا باید به چنین مجموعه کوچکی از فونت ها محدود شوم؟ من مجموعه عظیمی از فونت های زیبا دارم!» واقعیت این است که مرورگر بازدید کننده فقط می تواند فونت هایی را که نصب شده اند نمایش دهد در اوسیستم عامل ( تقریبا مترجم:در حال حاضر، امکان استفاده از هر فونتی در طراحی صفحات با استفاده از CSS 3 و ویژگی جدید آن وجود دارد. @font-face; با این حال، همه مرورگرها هنوز از این عملکرد پشتیبانی نمی کنند)، که به این معنی است هربازدیدکننده صفحه شما باید صاحب فونت هایی باشد که انتخاب کرده اید. بنابراین، فقط باید از فونت هایی استفاده کنید که در هر سیستم عامل موجود است. خوشبختانه CSS یک ویژگی دارد @font-family، که این کار را آسان تر می کند.

فهرست کنید

@font-family معنی	پنجره ها	مک	خانواده
Arial، Helvetica، sans-serif	آریال	آریال، هلوتیکا	بدون دندانه
"Arial Black"، Gadget، sans-serif	آریال مشکی	Arial Black، Gadget	بدون دندانه
"Comic Sans MS"، خط شکسته	کمیک بدون ام اس	Comic Sans MS 5	خط شکسته
«پیک جدید»، پیک، مونو اسپیس	پیک جدید	پیک جدید، پیک 6	تک فضا
گرجستان، سریف	گرجستان 1	گرجستان	سریف
ضربه، زغال، sans-serif	تأثیر	ضربه 5، زغال چوب 6	بدون دندانه
"کنسول لوسیدا"، موناکو، مونو اسپیس	کنسول لوسیدا	موناکو 5	تک فضا
"Lucida Sans Unicode"، "Lucida Grande"، sans-serif	لوسیدا بدون یونیکد	لوسیدا گرانده	بدون دندانه
"Palatino Linotype"، "Book Antiqua"، Palatino، serif	Palatino Linotype, Book Antiqua 3	پالاتینو 6	سریف
Tahoma، ژنو، sans-serif	تاهوما	ژنو	بدون دندانه
"Times New Roman"، Times, serif	تایمز نیو رومن	بار	سریف
"Trebuchet MS"، Helvetica، sans-serif	Trebuchet MS 1	هلوتیکا	بدون دندانه
Verdana، ژنو، sans-serif	وردنا	وردنا، ژنو	بدون دندانه
سمبل	نماد 2	نماد 2	-
صفحات وب	صفحات وب 2	صفحات وب 2	-
Wingdings، "Zapf Dingbats"	بال 2	Zapf Dingbats 2	-
"MS Sans Serif"، ژنو، sans-serif	MS Sans Serif 4	ژنو	بدون دندانه
"MS Serif"، "New York"، serif	MS Serif 4	نیویورک 6	سریف

1 فونت‌های Georgia و Trebuchet MS با Windows 2000/XP عرضه می‌شوند و در بسته فونت IE گنجانده شده‌اند (و در واقع با بسیاری از برنامه‌های مایکروسافت عرضه می‌شوند)، بنابراین بر روی بسیاری از رایانه‌های Windows 98 نصب می‌شوند.

2 فونت های Symbol فقط در مرورگرهای اینترنت اکسپلورر نمایش داده می شوند.

3 فونت Book Antiqua تقریباً مشابه Palatino Linotype است. Palatino Linotype با ویندوز 2000/XP و Book Antiqua با ویندوز 98 عرضه می شود.

4 لطفاً توجه داشته باشید که این فونت ها TrueType نیستند، بلکه بیت مپ هستند، بنابراین ممکن است در برخی از اندازه ها بد به نظر برسند (برای نمایش در 8، 10، 12، 14، 18 و 24 pt در 96 DPI طراحی شده اند).

5 این فونت ها فقط در سافاری به سبک استاندارد کار می کنند، اما به صورت پررنگ یا کج کار نمی کنند. Comic Sans MS نیز به صورت پررنگ کار می کند، اما نه به صورت مورب. به نظر می رسد سایر مرورگرهای مک به خوبی ویژگی های فونت از دست رفته را تقلید می کنند (با تشکر از Christian Fecteau برای راهنمایی).

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

اسکرین شات ها

• Mac OS X 10.4.8، Firefox 2.0، ClearType فعال است (با تشکر از Juris Vecvanags برای اسکرین شات)
• Mac OS X 10.4.4، Firefox 1.5، ClearType فعال است
• Mac OS X 10.4.11، Safari 3.0.4، ClearType فعال (با تشکر از Nolan Gladius برای اسکرین شات)
• Mac OS X 10.4.4، Safari 2.0.3، ClearType فعال است (با تشکر از Eric Zavesky برای اسکرین شات)
• Windows Vista، Internet Explorer 7، ClearType فعال است
• ویندوز ویستا، فایرفاکس 2.0، ClearType فعال است (با تشکر از Michiel Bijl برای اسکرین شات)