چه فونت هایی در همه سیستم عامل ها وجود دارد؟ فونت های مشترک برای همه نسخه های (فعالی) ویندوز و معادل های مک آنها

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

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

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

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

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

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

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

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

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

این ویژگی یک لیست اولویت بندی شده از نام های خانوادگی فونت و/یا نام خانوادگی عمومی را مشخص می کند. با توجه به مشخصات 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 برای مجموعه وب است.

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

• آریال
• آریال مشکی
• کمیک بدون ام اس
• پیک جدید
• گرجستان
• تأثیر
• تایمز نیو رومن
• تربوشت ام اس
• وردنا

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

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

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

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

هنگام شروع به ایجاد یک طرح، باید فونت های مورد استفاده در صفحه را به طور خاص در 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.	نیمبوس رومن شماره 9 ال	سریف
تربوشت ام اس	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	سریف
تأثیر	زغال چوبی	رخا	بدون دندانه
تایمز نیو رومن	بار	نیمبوس رومن شماره 9 ال	سریف
تربوشت ام اس	هلوتیکا	گارودا	بدون دندانه
وردنا	ژنو	DejaVu Sans	بدون دندانه

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

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

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

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

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

نتیجه گیری:

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

یکی از وظایف اصلی طراحی وب سایت، انتخاب مناسب است فونت های استاندارد. خدمات جاسازی فونت مانند فونت های وب گوگل یا 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 و به عنوان یک تنوع از کلاسیک های قدیمی استفاده می شود. همچنین یک فونت monospaced در نظر گرفته می شود. برخلاف فونت‌های 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. تأثیر

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

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

اگر در زمینه طراحی وب تازه کار هستید، ممکن است به چیزی مانند این فکر کنید: «چرا باید به چنین مجموعه کوچکی از فونت ها محدود شوم؟ من مجموعه عظیمی از فونت های زیبا دارم!» واقعیت این است که مرورگر بازدید کننده فقط می تواند فونت هایی را که نصب شده اند نمایش دهد در اوسیستم عامل ( تقریبا مترجم:در حال حاضر، امکان استفاده از هر فونتی در هنگام طراحی صفحات و ویژگی جدید آن وجود دارد @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 فقط در اینترنت اکسپلورر نمایش داده می شوند؛ در مرورگرهای دیگر معمولاً با یک فونت استاندارد جایگزین می شوند (اگرچه، برای مثال، فونت Symbol در Opera و Webdings در Safari نمایش داده می شود).

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 برای اسکرین شات)