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

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

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

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

فهرست کنید

معنی @font-family پنجره ها مک خانواده
Arial، Helvetica، sans-serif آریال آریال، هلوتیکا بدون دندانه
"Arial Black"، Gadget، sans-serif آریال مشکی گجت مشکی آریال بدون دندانه
خط شکسته 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 در 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 برای اسکرین شات)

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

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

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

اگر یک طراح از فونت‌های دسته 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 (با حروف هم عرض).
    نام خانوادگی عمومی کلمات کلیدی هستند و نیازی به درج شدن در گیومه ندارند.

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

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

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

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

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

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

اگر طراح از فونت های دسته 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 (با حروف هم عرض).

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

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

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

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

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

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

مبنای تعریف فونت های «ایمن»، فونت های رایج ترین سیستم عامل ویندوز بود که در سایر سیستم عامل ها نیز استفاده می شود. نمونه ای از این استفاده فونت های 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 CY Nimbus Sans L بدون دندانه
آریال Helvetica CY Nimbus Sans L بدون دندانه
کمیک بدون ام اس موناکو CY * (به زیر مراجعه کنید) خط شکسته
پیک جدید * (به زیر مراجعه کنید) نیمباس مونو ال تک فضا
گرجستان * (به زیر مراجعه کنید) کتاب مدرسه قرن L سریف
تأثیر زغال سنگ CY * (به زیر مراجعه کنید) بدون دندانه
تایمز نیو رومن Times CY نیمبوس روم No9L سریف
تربوشت ام اس Helvetica CY * (به زیر مراجعه کنید) بدون دندانه
وردنا ژنو CY DejaVu Sans بدون دندانه

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

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

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

بدن (

font - family : Arial , "Helvetica CY" , "Nimbus Sans L" , sans - serif ;

این ورودی به این معنی است که اگر کاربر فونت Arial را داشته باشد (و همه کاربران ویندوز و همه کاربران Mac OS X آن را داشته باشند)، صفحه با این فونت نمایش داده می شود. اگر کاربر این فونت را نداشته باشد، صفحه کاربر روسی زبان Mac OS 9 به طور دقیق با فونت استاندارد سیستم Helvetica CY نمایش داده می شود و کاربر Unix/Linux با فونت 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 غیرسیریلیزه شده، منطقی است که همان قلم Helvetica CY، استاندارد برای Mac OS 9، حاوی سیریلیک را مشخص کنید.

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

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

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

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

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

و اگر بدون سیریلیک؟

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

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

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

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

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

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

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

نتیجه گیری:

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

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

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

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

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

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

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

ویژگی font-family font

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پنجره هاسیستم عامل مکینتاشیونیکس/لینوکسخانواده عمومی
آریال مشکیHelvetica CYNimbus Sans Lبدون دندانه
آریالHelvetica CYNimbus Sans Lبدون دندانه
کمیک بدون ام اسموناکو CY* (به زیر مراجعه کنید)خط شکسته
پیک جدید* (به زیر مراجعه کنید)نیمباس مونو التک فضا
گرجستان* (به زیر مراجعه کنید)کتاب مدرسه قرن Lسریف
تأثیرزغال سنگ CY* (به زیر مراجعه کنید)بدون دندانه
تایمز نیو رومنTimes CYنیمبوس روم No9Lسریف
تربوشت ام اسHelvetica CY* (به زیر مراجعه کنید)بدون دندانه
وردناژنو CYDejaVu Sansبدون دندانه

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

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

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

از جمله فونت ها در یک فایل CSS

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

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

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

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

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

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

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

در اینجا یک پاراگراف با فونت قابل تخصیص وجود دارد

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

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

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

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

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

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

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

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

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

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

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

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

این لینک است

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

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

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

برترین مقالات مرتبط