تحتوي هذه القائمة على الخطوط المشتركة في جميع أنظمة تشغيل Windows الحالية (في الواقع، منذ Windows 98)، وما يعادلها في نظام التشغيل Mac OS. تسمى هذه الخطوط أحيانًا "الخطوط الآمنة للمتصفح" ( الخطوط الآمنة للمتصفح). هذا كتاب مرجعي صغير أستخدمه عندما أقوم بإنشاء صفحات ويب وأعتقد أنه سيكون مفيدًا لك أيضًا.

إذا كنت جديدًا في تصميم الويب، فقد تفكر في شيء مثل: "لماذا يجب أن أقتصر على هذه المجموعة الصغيرة من الخطوط؟ لدي مجموعة ضخمة من الخطوط الجميلة! الحقيقة هي أن متصفح الزائر يمكنه عرض الخطوط المثبتة فقط فينظام التشغيل ( تقريبا. مترجم:في الوقت الحالي، من الممكن بالفعل استخدام أي خطوط تقريبًا عند تصميم الصفحات باستخدام CSS 3 وخاصيته الجديدة @الخط الوجه; ومع ذلك، لا تدعم جميع المتصفحات هذه الوظيفة حتى الآن)، مما يعني ذلك كليجب أن يكون زائر صفحتك هو صاحب الخطوط التي اخترتها. ولذلك، يجب عليك فقط استخدام الخطوط المتوفرة على كل نظام تشغيل. لحسن الحظ، CSS لديه خاصية @خط العائلة، مما يسهل هذه المهمة.

قائمة

@ معنى عائلة الخط	شبابيك	ماك	عائلة
اريال، هلفتيكا، سانس-سيريف	اريال	اريال، هلفتيكا	بلا الرقيق
"Arial Black"، Gadget، sans-serif	ارييل الأسود	اريال بلاك، جادجيت	بلا الرقيق
"كوميك بلا MS"، مخطوطة	هزلية بلا MS	هزلية بلا MS 5	مخطوطة
"البريد السريع الجديد"، البريد السريع، أحادي المسافة	ساعي جديد	ساعي جديد، ساعي 6	com.monospace
جورجيا، شريف	جورجيا 1	جورجيا	شريف
تأثير، الفحم، بلا الرقيق	تأثير	إمباكت 5، فحم 6	بلا الرقيق
"وحدة تحكم لوسيدا"، موناكو، أحادية المسافة	وحدة تحكم لوسيدا	موناكو 5	com.monospace
"Lucida Sans Unicode"، "Lucida Grande"، sans-serif	لوسيدا بلا يونيكود	لوسيدا غراندي	بلا الرقيق
"Palatino Linotype"، "Book Antiqua"، Palatino، serif	بالاتينو لينوتايب، كتاب أنتيكا 3	بالاتينو 6	شريف
تاهوما، جنيف، سانس-سيريف	تاهوما	جنيف	بلا الرقيق
"تايمز نيو رومان"، تايمز، شريف	تايمز نيو رومان	مرات	شريف
"Trebuchet MS"، Helvetica، sans-serif	المنجنيق MS 1	هلفتيكا	بلا الرقيق
فيردانا، جنيف، سانس-سيريف	فيردانا	فيردانا، جنيف	بلا الرقيق
رمز	الرمز 2	الرمز 2	-
التنجيد	المنسوجات 2	المنسوجات 2	-
ويندينجز، "زابف دينجباتس"	وينجدينجز 2	زابف دينغباتس 2	-
"MS Sans Serif"، جنيف، sans-serif	إم إس سانس شريف 4	جنيف	بلا الرقيق
"إم إس شريف"، "نيويورك"، رقيق	إم إس شريف 4	نيويورك 6	شريف

1 يتم شحن خطوط Georgia وTrebuchet MS مع Windows 2000/XP ويتم تضمينها في حزمة خطوط IE (وتأتي بالفعل مع العديد من تطبيقات Microsoft)، لذلك يتم تثبيتها على العديد من أجهزة الكمبيوتر التي تعمل بنظام Windows 98.

2 يتم عرض خطوط الرموز فقط في Internet Explorer؛ وفي المتصفحات الأخرى يتم استبدالها عادةً بخط قياسي (على الرغم من أنه، على سبيل المثال، يتم عرض خط الرمز في Opera وWebdings في Safari).

3 خط Book Antiqua مطابق تقريبًا لخط Palatino Linotype؛ يأتي Palatino Linotype مع نظام التشغيل Windows 2000/XP، ويأتي Book Antiqua مع نظام التشغيل Windows 98.

4 يرجى ملاحظة أن هذه الخطوط ليست TrueType، ولكنها صورة نقطية، لذا قد تبدو سيئة في بعض الأحجام (وهي مصممة للعرض عند 8 و10 و12 و14 و18 و24 نقطة عند 96 نقطة في البوصة).

5 تعمل هذه الخطوط فقط في Safari بالنمط القياسي، ولكنها لا تعمل بالخط العريض أو المائل. يعمل Comic Sans MS أيضًا بالخط العريض، ولكن ليس بالخط المائل. يبدو أن متصفحات Mac الأخرى جيدة في محاكاة خصائص الخطوط المفقودة من تلقاء نفسها (بفضل Christian Fecteau للحصول على النصيحة).

6 يتم تثبيت هذه الخطوط على نظام Mac فقط مع التثبيت الكلاسيكي

لقطات الشاشة

• 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
• نظام التشغيل Windows Vista وFirefox 2.0 وClearType ممكّن (بفضل Michiel Bijl على لقطة الشاشة)

عند البدء في إنشاء تخطيط، تحتاج إلى تحديد الخطوط المستخدمة في الصفحة على وجه التحديد في CSS. في كثير من الأحيان، وبخطوط مختلفة، لا يقوم المصمم بكتابة النص الرئيسي للصفحة فحسب، بل يكتب أيضًا العديد من العناوين والشعارات والأحرف الأولى:

يعرف المصمم الجيد، مثل مصمم التخطيط الجيد، أن المتصفح يمكنه فقط استخدام الخطوط المثبتة على جهاز الكمبيوتر الخاص بالمستخدم لعرض الصفحة. أي أنه يمكن تقسيم الخطوط إلى فئتين:

1. الخطوط التي سيتم عرضها بدون مشاكل من قبل الغالبية العظمى من المستخدمين.
2. الخطوط التي لا تمتلكها مجموعة كبيرة من المستخدمين.

إذا استخدم المصمم خطوط الفئة الثانية لإنشاء، على سبيل المثال، شعار أو عناوين ثابتة كبيرة، فلا يمكنك التردد في استخدام هذه التقنية. عيب استخدام هذه التقنية هو عدم المرونة. إذا كانت هناك تغييرات في النص، فسيتعين عليك إعادة الصورة وتغيير CSS (على سبيل المثال، إذا كانت أبعاد الصورة الجديدة لا تتطابق مع الصورة القديمة).

يمكننا القول أن خطر استخدام التقنية يعتمد بشكل مباشر على احتمالية تغيير النص. لذلك، على سبيل المثال، لا يمكن كتابة النص العام للصفحة بخطوط غير قياسية! المصمم المختص لن يفعل هذا أبدًا. وإذا صادف المصمم خطًا أخضر، فإن مصمم التخطيط الجيد ملزم ببساطة بتصحيح خطأه - في التخطيط، استبدل هذا الخط بالخط القياسي الأكثر تشابهًا.

ولكن كيف يمكن تمييز خطوط المجموعة الأولى عن الثانية؟ فمن الواضح أنه لا يمكنك الاعتماد على مجموعة الخطوط المثبتة مباشرة على جهاز الكمبيوتر الخاص بك! دعونا معرفة ذلك.

الخطوط القياسية

الخطوط القياسية هي مجموعة من الخطوط المثبتة مع نظام التشغيل. وبما أن أنظمة التشغيل مختلفة، فإن مجموعة الخطوط الخاصة بها مختلفة. يمكن العثور على قائمة الخطوط القياسية للإصدارات المختلفة من Windows، على سبيل المثال، في المقالة خطوط Windows القياسية، وقائمة خطوط Mac OS القياسية في صفحة الخطوط المضمنة في Mac OS. أما أنظمة التشغيل Unix/Linux فلا تحتوي على مجموعة واحدة من الخطوط. يستخدم العديد من مستخدمي Linux مجموعة خطوط DejaVu، خاصة على Ubuntu التي يتم تثبيتها افتراضيًا. وفقًا للإحصائيات الواردة من http://www.codestyle.org، فإن العديد من مستخدمي Unix/Linux لديهم أيضًا مجموعات خطوط URW وFree ومجموعات خطوط أخرى مثبتة. وفقًا لنفس الإحصائيات، فإن أكثر من 60% من مستخدمي Unix/Linux لديهم خطوط من مجموعة الخطوط الأساسية للويب على أجهزة الكمبيوتر الخاصة بهم، والتي كانت حتى عام 2002 متاحة رسميًا للتنزيل المجاني على موقع Microsoft على الويب.

لكي يتم عرض الصفحة بالشكل الذي أراده المصمم، على أي نظام تشغيل، من الممكن تحديد عدة خطوط في خاصية CSS، مفصولة بفواصل.

تحدد هذه الخاصية قائمة ذات أولوية لأسماء عائلة الخطوط و/أو أسماء العائلة العامة. وفقًا لمواصفات CSS2، هناك نوعان من أسماء عائلة الخطوط:

1. اسم عائلة الخط الذي تختاره. على سبيل المثال، "تايمز نيو رومان"، "أريال" وغيرها. يجب أن تكون أسماء عائلة الخطوط التي تحتوي على مسافات محاطة بعلامات اقتباس. إذا كانت علامات الاقتباس مفقودة، فسيتم تجاهل أي أحرف مسافات قبل اسم الخط وبعده، وسيتم تحويل أي تسلسل للمسافات داخل اسم الخط إلى مسافة واحدة.
2. عائلة عامة (مشتركة). تحدد المواصفات العائلات العامة التالية:
   • serif - الخطوط ذات الرقيق في نهايتها؛
   • بلا الرقيق - الخطوط بلا الرقيق؛
   • مخطوطة - الخطوط المائلة؛
   • الخيال - الخطوط الزخرفية.
   • monospace - خط أحادي المسافة (بأحرف بنفس العرض).
   أسماء عائلة العشيرة هي كلمات رئيسية ولا تحتاج إلى وضعها بين علامتي الاقتباس.

وبالتالي، بالنسبة للتصميم، يتم أخذ خط قياسي من نظام التشغيل Windows، ويتم تحديد خط مماثل لنظام التشغيل Mac OS وUnix/Linux، ويتم تحديد عائلة خطوط مشتركة، وبذلك تكون قد انتهيت.

لكن الأمر ليس بهذه البساطة. دعونا نحفر بمزيد من التفاصيل.

أبحث عن الخطوط الآمنة للويب

على الإنترنت، تطور مفهوم خطوط الويب "الآمنة" تاريخيًا. الخط الآمن هو خط قياسي لجميع أنظمة التشغيل. بما أنه لا يمكن للمرء إلا أن يحلم بمثل هذا الوضع، إذن لا توجد خطوط آمنة تماما!

يمكن اعتبار بعض الخطوط آمنة مع بعض التحفظات.

كان أساس تحديد الخطوط "الآمنة" هو خطوط نظام التشغيل Windows الأكثر شيوعًا، والتي تُستخدم أيضًا في أنظمة التشغيل الأخرى. مثال على هذا الاستخدام هو الخطوط الأساسية المذكورة سابقًا لحزمة خطوط الويب، والتي، وفقًا للإحصائيات، تم تنزيلها بواسطة العديد من مستخدمي Unix/Linux.

تتضمن هذه الحزمة الخطوط التالية: Andale Mono، Arial Black، Arial، Comic Sans MS، Courier New، Georgia، Impact، Times New Roman، Trebuchet MS، Verdana، Webdings. كلهم يدعمون الأبجدية السيريلية، وهو أمر مهم بالنسبة لRunet.

تتضمن مجموعة الخطوط التي تأتي بشكل قياسي مع نظام التشغيل Mac OS X (نظام التشغيل هذا هو الأكثر استخدامًا بين مستخدمي Mac OS) جميع الخطوط من الخطوط الأساسية لمجموعة الويب.

وبالتالي، استنادًا إلى خطوط Windows المستخدمة في أنظمة التشغيل الأخرى، تم تشكيل القائمة التالية لما يسمى بخطوط الويب "الآمنة":

• اريال
• ارييل الأسود
• هزلية بلا MS
• ساعي جديد
• جورجيا
• تأثير
• تايمز نيو رومان
• منجنيق MS
• فيردانا

يحتوي خط Webdings على أيقونات ولا يمكن استخدامه للمحتوى. لا يتم استخدام Andale Mono على نطاق واسع لأنه غير مناسب لقراءة الشاشة اليومية ولا يمتلكه جميع مستخدمي Windows.

كل مستخدمي Windows وMac OS X والغالبية العظمى من مستخدمي Unix/Linux (أي أولئك الذين قاموا بتثبيت الخطوط الأساسية لحزمة الويب) لديهم كل هذه الخطوط.

لكن ماذا عن الراحة؟ ففي النهاية، أنت تريد أن يرى أكبر عدد ممكن من المستخدمين خطة المصمم!

اقرأ عن هذا في الجزء الثاني من المنشور.

عند البدء في إنشاء تخطيط، تحتاج إلى تحديد الخطوط المستخدمة في الصفحة على وجه التحديد في CSS. في كثير من الأحيان، في خطوط مختلفة، لا يقوم المصمم بكتابة النص الرئيسي للصفحة فحسب، بل يقوم أيضًا بكتابة العناوين والشعارات والأحرف المختلفة المختلفة.

يعرف المصمم الجيد، مثل مصمم التخطيط الجيد، أن المتصفح يمكنه فقط استخدام الخطوط المثبتة على جهاز الكمبيوتر الخاص بالمستخدم لعرض الصفحة. أي أنه يمكن تقسيم الخطوط إلى فئتين:

1. الخطوط التي سيتم عرضها بدون مشاكل من قبل الغالبية العظمى من المستخدمين.
2. الخطوط التي لا تمتلكها مجموعة كبيرة من المستخدمين.

إذا استخدم المصمم خطوط الفئة الثانية لإنشاء، على سبيل المثال، شعار أو عناوين ثابتة كبيرة، فلا تتردد في استخدام تقنية استبدال النص بصورة. عيب استخدام هذه التقنية هو عدم المرونة. إذا كانت هناك تغييرات في النص، فسيتعين عليك إعادة الصورة وتغيير CSS (على سبيل المثال، إذا كانت أبعاد الصورة الجديدة لا تتطابق مع الصورة القديمة).

يمكننا القول أن خطر استخدام التقنية يعتمد بشكل مباشر على احتمالية تغيير النص. لذلك، على سبيل المثال، لا يمكن كتابة النص العام للصفحة بخطوط غير قياسية! المصمم المختص لن يفعل هذا أبدًا. وإذا صادف المصمم خطًا أخضر، فإن مصمم التخطيط الجيد ملزم ببساطة بتصحيح خطأه - في التخطيط، استبدل هذا الخط بالخط القياسي الأكثر تشابهًا.

ولكن كيف يمكن تمييز خطوط المجموعة الأولى عن الثانية؟ فمن الواضح أنه لا يمكنك الاعتماد على مجموعة الخطوط المثبتة مباشرة على جهاز الكمبيوتر الخاص بك! دعونا معرفة ذلك.

الخطوط القياسية

الخطوط القياسية هي مجموعة من الخطوط المثبتة مع نظام التشغيل. وبما أن أنظمة التشغيل مختلفة، فإن مجموعة الخطوط الخاصة بها مختلفة. يمكن العثور على قائمة الخطوط القياسية للإصدارات المختلفة من Windows، على سبيل المثال، في المقالة خطوط Windows القياسية، وقائمة خطوط Mac OS القياسية في صفحة الخطوط المضمنة مع Mac OS. أما أنظمة التشغيل Unix/Linux فلا تحتوي على مجموعة واحدة من الخطوط. يستخدم العديد من مستخدمي Linux مجموعة خطوط DejaVu، خاصة على Ubuntu التي يتم تثبيتها افتراضيًا. وفقًا للإحصائيات الواردة من http://www.codestyle.org، فإن العديد من مستخدمي Unix/Linux لديهم أيضًا مجموعات خطوط URW وFree ومجموعات خطوط أخرى مثبتة. وفقًا لنفس الإحصائيات، فإن أكثر من 60% من مستخدمي Unix/Linux لديهم خطوط من مجموعة الخطوط الأساسية للويب على أجهزة الكمبيوتر الخاصة بهم، والتي كانت حتى عام 2002 متاحة رسميًا للتنزيل المجاني على موقع Microsoft على الويب.

لكي يتم عرض الصفحة حسب المصمم المقصود على أي نظام تشغيل، من الممكن تحديد عدة خطوط في خاصية عائلة الخطوط CSS، مدرجة مفصولة بفواصل.

تحدد هذه الخاصية قائمة ذات أولوية لأسماء عائلة الخطوط و/أو أسماء العائلة العامة. وفقًا لمواصفات CSS2، هناك نوعان من أسماء عائلة الخطوط:

1. اسم عائلة الخط الذي تختاره. على سبيل المثال، "تايمز نيو رومان"، "أريال" وغيرها. يجب أن تكون أسماء عائلة الخطوط التي تحتوي على مسافات محاطة بعلامات اقتباس. إذا كانت علامات الاقتباس مفقودة، فسيتم تجاهل أي أحرف مسافات قبل اسم الخط وبعده، وسيتم تحويل أي تسلسل للمسافات داخل اسم الخط إلى مسافة واحدة.
2. عائلة عامة (مشتركة). تحدد المواصفات العائلات العامة التالية:
   • serif - الخطوط ذات الرقيق في نهايتها؛
   • بلا الرقيق - الخطوط بلا الرقيق؛
   • مخطوطة - الخطوط المائلة؛
   • الخيال - الخطوط الزخرفية.
   • monospace - خط أحادي المسافة (بأحرف بنفس العرض).

أسماء عائلة العشيرة هي كلمات رئيسية ولا تحتاج إلى وضعها بين علامتي الاقتباس.

وبالتالي، بالنسبة للتصميم، يتم أخذ خط قياسي من نظام التشغيل Windows، ويتم تحديد خط مماثل لنظام التشغيل Mac OS وUnix/Linux، ويتم تحديد عائلة خطوط مشتركة، وبذلك تكون قد انتهيت.

لكن الأمر ليس بهذه البساطة. دعونا نحفر بمزيد من التفاصيل.

أبحث عن الخطوط الآمنة للويب

على الإنترنت، تطور مفهوم خطوط الويب "الآمنة" تاريخيًا. الخط الآمن هو خط قياسي لجميع أنظمة التشغيل. نظرًا لأننا لا نستطيع إلا أن نحلم بمثل هذا الوضع، فلا توجد خطوط آمنة تمامًا!

يمكن اعتبار بعض الخطوط آمنة مع بعض التحفظات.

كان أساس تحديد الخطوط "الآمنة" هو خطوط نظام التشغيل Windows الأكثر شيوعًا، والتي تُستخدم أيضًا في أنظمة التشغيل الأخرى. مثال على هذا الاستخدام هو الخطوط الأساسية المذكورة سابقًا لحزمة خطوط الويب، والتي، وفقًا للإحصائيات، تم تنزيلها بواسطة العديد من مستخدمي Unix/Linux.

تتضمن هذه الحزمة الخطوط التالية: Andale Mono، Arial Black، Arial، Comic Sans MS، Courier New، Georgia، Impact، Times New Roman، Trebuchet MS، Verdana، Webdings. كلهم يدعمون الأبجدية السيريلية، وهو أمر مهم بالنسبة لRunet.

تتضمن مجموعة الخطوط التي تأتي بشكل قياسي مع نظام التشغيل Mac OS X (نظام التشغيل هذا هو الأكثر استخدامًا بين مستخدمي Mac OS) جميع الخطوط من الخطوط الأساسية لمجموعة الويب.

وبالتالي، استنادًا إلى خطوط Windows المستخدمة في أنظمة التشغيل الأخرى، تم تشكيل القائمة التالية لما يسمى بخطوط الويب "الآمنة":

1. اريال
2. ارييل الأسود
3. هزلية بلا MS
4. ساعي جديد
5. جورجيا
6. تأثير
7. تايمز نيو رومان
8. منجنيق MS
9. فيردانا

يحتوي خط Webdings على أيقونات ولا يمكن استخدامه للمحتوى. لا يتم استخدام Andale Mono على نطاق واسع لأنه غير مناسب لقراءة الشاشة اليومية ولا يمتلكه جميع مستخدمي Windows.

كل مستخدمي Windows وMac OS X والغالبية العظمى من مستخدمي Unix/Linux (أي أولئك الذين قاموا بتثبيت الخطوط الأساسية لحزمة الويب) لديهم كل هذه الخطوط.

لكن ماذا عن الراحة؟ ففي النهاية، أنت تريد أن يرى أكبر عدد ممكن من المستخدمين خطة المصمم!

الخطوط التي تدعم السيريلية

الميزة المحددة لـ RuNet هي مشكلة ترميز الصفحات ودعم السيريلية في الخطوط. لتجنب مشاكل ترميزات الأحرف المختلفة، توصل الأشخاص الأذكياء إلى Unicode، الذي يسمح لك بدمج أحرف من عدة لغات في خط واحد. وبالتالي، بالنسبة للصفحات باللغة الروسية، تحتاج إلى استخدام خطوط Unicode التي تدعم السيريلية فقط.

يوجد أدناه جدول لمراسلات الخطوط.

شبابيك	نظام التشغيل ماك	يونيكس/لينكس	عائلة الأجداد
ارييل الأسود	هلفتيكا سي.واي.	نيمبوس سانس L	بلا الرقيق
اريال	هلفتيكا سي.واي.	نيمبوس سانس L	بلا الرقيق
هزلية بلا MS	موناكو قبرصي	* (انظر أدناه)	مخطوطة
ساعي جديد	* (انظر أدناه)	نيمبوس مونو L	مونوسبيس
جورجيا	* (انظر أدناه)	كتاب القرن المدرسي L	شريف
تأثير	الفحم C.Y.	* (انظر أدناه)	بلا الرقيق
تايمز نيو رومان	تايمز سي.واي.	نيمبوس رومان رقم 9 إل	شريف
منجنيق MS	هلفتيكا سي.واي.	* (انظر أدناه)	بلا الرقيق
فيردانا	جنيف سي.واي.	ديجافو بلا	بلا الرقيق

* في العمود المقابل للخط يعني أن نظام التشغيل لا يحتوي على مكافئات سيريلية أصلية لخط Windows. ولكن في الوقت نفسه، هناك احتمال كبير أن يتم تثبيت هذا الخط نفسه مباشرة في نظام التشغيل.

على سبيل المثال، إذا كان النص الرئيسي للتخطيط هو Arial، فإننا نجد هذا الخط في الجدول ونكتب السطر المقابل في CSS:

الجسم (عائلة الخط: Arial، "Helvetica CY"، "Nimbus Sans L"، sans-serif؛)

جسم( الخط - العائلة: Arial، "Helvetica CY"، "Nimbus Sans L"، sans - serif؛

يعني هذا الإدخال أنه إذا كان لدى المستخدم الخط Arial (وجميع مستخدمي Windows وجميع مستخدمي Mac OS X لديهم)، فسيتم عرض الصفحة بهذا الخط. إذا لم يكن لدى المستخدم هذا الخط، فسيتم عرض صفحة مستخدم Mac OS 9 الناطق باللغة الروسية بدقة بخط النظام القياسي Helvetica CY، وبالنسبة لمستخدم Unix/Linux سيتم عرضها بخط Nimbus Sans L ، والذي تم تثبيته على 90% من مستخدمي Unix/Linux. إذا كان مستخدم Unix/Linux ضمن فئة 10% التي لا تحتوي على هذا الخط، فسيتم عرض الصفحة بالخط serif الذي تم تعيينه افتراضيًا لعرض صفحات الويب.

بالإضافة إلى حقيقة أن الجدول يأخذ في الاعتبار خطوط Unix/Linux، هناك أيضًا بعض رموز CY الغريبة بعد Helvetica المعتادة. دعونا معرفة ما هو!

قبل إصدار نظام التشغيل Mac OS X، كان لهذا السطر المعنى التالي: بالنسبة لمستخدمي Windows، نعرض الصفحة بتنسيق Arial، ولمستخدمي Mac OS 9، بخط Helvetica القياسي، وبالنسبة للباقي، فإننا نرى الصفحة في النظام خط sans-serif، الذي تم تكوينه افتراضيًا في المتصفح. ولكن مرة أخرى، فارق بسيط مهم! لا يحتوي خط Mac OS 9 Helvetica القياسي على السيريلية! بالنسبة لصفحة اللغة الروسية، كان هذا يعني ما يلي: بالنسبة لمستخدمي Windows، نعرض صفحة 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، ولكن أيضًا الخطوط الأخرى. يستغل عدد متزايد من المصممين هذه الفرصة، ويجب على مصمم التخطيط المختص أن يعرف ذلك.

يوجد أدناه جدول إضافي للخطوط غير المدرجة في قائمة الخطوط "الآمنة"، ولكن يمكن استخدامها في التخطيطات.

شبابيك	نظام التشغيل ماك	عائلة الأجداد
وحدة تحكم لوسيدا	موناكو	مونوسبيس
لوسيدا بلا يونيكود	لوسيدا غراندي	بلا الرقيق
تاهوما	جنيف سي.واي.	بلا الرقيق

ماذا لو لم يكن هناك الأبجدية السيريلية؟

بالنسبة للنصوص المكتوبة باللغة الإنجليزية، يكون للجداول المذكورة أعلاه مظهر مختلف قليلاً.

شبابيك	نظام التشغيل ماك	يونيكس/لينكس	عائلة الأجداد
ارييل الأسود	أداة	نيمبوس سانس L	بلا الرقيق
اريال	هلفتيكا	نيمبوس سانس L	بلا الرقيق
هزلية بلا MS	موناكو	TSCu_Comic	مخطوطة
ساعي جديد	ساعي	نيمبوس مونو L	مونوسبيس
جورجيا	* (انظر أدناه)	كتاب القرن المدرسي L	شريف
تأثير	فحم	ريكا	بلا الرقيق
تايمز نيو رومان	مرات	نيمبوس رومان رقم 9 إل	شريف
منجنيق MS	هلفتيكا	جارودا	بلا الرقيق
فيردانا	جنيف	ديجافو بلا	بلا الرقيق

بالنسبة لخطوط Arial وCourier New وTimes New Roman، عند إنشاء المساطر، من الأفضل تحديد خط Unix/Linux أولاً، ثم خط Mac OS. ويرجع ذلك إلى بعض الاعوجاج في مجموعة الخطوط الأساسية لنظام التشغيل Linux X11.

الخطوط التي لم يتم تضمينها في القائمة "الآمنة"، ولكن يمكن استخدامها في التخطيطات، يتم تعريفها بشكل أفضل بواسطة مجموعات خطوط CSS بناءً على هذا الجدول.

شبابيك	نظام التشغيل ماك	يونيكس/لينكس	عائلة الأجداد
وحدة تحكم لوسيدا	موناكو	-	مونوسبيس
لوسيدا بلا يونيكود	لوسيدا غراندي	جارودا	بلا الرقيق
بالاتينو الخط الخطي	بالاتينو	جارودا**	بلا الرقيق
تاهوما	جنيف	كلماتي	بلا الرقيق

تشير الشرطة في عمود Unix/Linux إلى أن مستخدمي أنظمة التشغيل هذه من المرجح أن يشاهدوا الخط الافتراضي على الصفحة.

** في هذا السطر، من المنطقي وضع خط Garuda قبل Palatino (انظر الشرح أعلاه).

الاستنتاجات:

1. لا توجد خطوط آمنة تماما. يمكن اعتبار الخطوط التالية آمنة مشروطة:
   • اريال
   • ارييل الأسود
   • هزلية بلا MS
   • ساعي جديد
   • جورجيا
   • تأثير
   • تايمز نيو رومان
   • منجنيق MS
   • فيردانا
2. يمكن العثور على مجموعات CSS الآمنة التي تأخذ في الاعتبار دعم الأبجدية السيريلية في الخطوط في المقالة.
3. إذا لم يكن دعم الأبجدية السيريلية مهمًا في الصفحة، فإننا نستخدم مكدسات CSS من المقالة.

تحتوي هذه القائمة على الخطوط المشتركة في جميع أنظمة تشغيل Windows الحالية (في الواقع، منذ Windows 98)، وما يعادلها في نظام التشغيل Mac OS. تسمى هذه الخطوط أحيانًا "الخطوط الآمنة للمتصفح" ( الخطوط الآمنة للمتصفح). هذا كتاب مرجعي صغير أستخدمه عندما أقوم بإنشاء صفحات ويب وأعتقد أنه سيكون مفيدًا لك أيضًا.

إذا كنت جديدًا في تصميم الويب، فقد تفكر في شيء مثل: "لماذا يجب أن أقتصر على هذه المجموعة الصغيرة من الخطوط؟ لدي مجموعة ضخمة من الخطوط الجميلة! الحقيقة هي أن متصفح الزائر يمكنه عرض الخطوط المثبتة فقط فينظام التشغيل ( تقريبا. مترجم:في الوقت الحالي، من الممكن بالفعل استخدام أي خطوط تقريبًا عند تصميم الصفحات وخصائصها الجديدة @الخط الوجه; ومع ذلك، لا تدعم جميع المتصفحات هذه الوظيفة حتى الآن)، مما يعني ذلك كليجب أن يكون زائر صفحتك هو صاحب الخطوط التي اخترتها. ولذلك، يجب عليك فقط استخدام الخطوط المتوفرة على كل نظام تشغيل. لحسن الحظ، CSS لديه خاصية @خط العائلة، مما يسهل هذه المهمة.

قائمة

@ معنى عائلة الخط	شبابيك	ماك	عائلة
اريال، هلفتيكا، سانس-سيريف	اريال	اريال، هلفتيكا	بلا الرقيق
"Arial Black"، Gadget، sans-serif	ارييل الأسود	اريال بلاك، جادجيت	بلا الرقيق
"كوميك بلا MS"، مخطوطة	هزلية بلا MS	هزلية بلا MS 5	مخطوطة
"البريد السريع الجديد"، البريد السريع، أحادي المسافة	ساعي جديد	ساعي جديد، ساعي 6	com.monospace
جورجيا، شريف	جورجيا 1	جورجيا	شريف
تأثير، الفحم، بلا الرقيق	تأثير	إمباكت 5، فحم 6	بلا الرقيق
"وحدة تحكم لوسيدا"، موناكو، أحادية المسافة	وحدة تحكم لوسيدا	موناكو 5	com.monospace
"Lucida Sans Unicode"، "Lucida Grande"، sans-serif	لوسيدا بلا يونيكود	لوسيدا غراندي	بلا الرقيق
"Palatino Linotype"، "Book Antiqua"، Palatino، serif	بالاتينو لينوتايب، كتاب أنتيكا 3	بالاتينو 6	شريف
تاهوما، جنيف، سانس-سيريف	تاهوما	جنيف	بلا الرقيق
"تايمز نيو رومان"، تايمز، شريف	تايمز نيو رومان	مرات	شريف
"Trebuchet MS"، Helvetica، sans-serif	المنجنيق MS 1	هلفتيكا	بلا الرقيق
فيردانا، جنيف، سانس-سيريف	فيردانا	فيردانا، جنيف	بلا الرقيق
رمز	الرمز 2	الرمز 2	-
التنجيد	المنسوجات 2	المنسوجات 2	-
ويندينجز، "زابف دينجباتس"	وينجدينجز 2	زابف دينغباتس 2	-
"MS Sans Serif"، جنيف، sans-serif	إم إس سانس شريف 4	جنيف	بلا الرقيق
"إم إس شريف"، "نيويورك"، رقيق	إم إس شريف 4	نيويورك 6	شريف

1 يتم شحن خطوط Georgia وTrebuchet MS مع Windows 2000/XP ويتم تضمينها في حزمة خطوط IE (وتأتي بالفعل مع العديد من تطبيقات Microsoft)، لذلك يتم تثبيتها على العديد من أجهزة الكمبيوتر التي تعمل بنظام Windows 98.

2 يتم عرض خطوط الرموز فقط في Internet Explorer؛ وفي المتصفحات الأخرى يتم استبدالها عادةً بخط قياسي (على الرغم من أنه، على سبيل المثال، يتم عرض خط الرمز في Opera وWebdings في Safari).

3 خط Book Antiqua مطابق تقريبًا لخط Palatino Linotype؛ يأتي Palatino Linotype مع نظام التشغيل Windows 2000/XP، ويأتي Book Antiqua مع نظام التشغيل Windows 98.

4 يرجى ملاحظة أن هذه الخطوط ليست TrueType، ولكنها صورة نقطية، لذا قد تبدو سيئة في بعض الأحجام (وهي مصممة للعرض عند 8 و10 و12 و14 و18 و24 نقطة عند 96 نقطة في البوصة).

5 تعمل هذه الخطوط فقط في Safari بالنمط القياسي، ولكنها لا تعمل بالخط العريض أو المائل. يعمل Comic Sans MS أيضًا بالخط العريض، ولكن ليس بالخط المائل. يبدو أن متصفحات Mac الأخرى جيدة في محاكاة خصائص الخطوط المفقودة من تلقاء نفسها (بفضل Christian Fecteau للحصول على النصيحة).

6 يتم تثبيت هذه الخطوط على نظام Mac فقط مع التثبيت الكلاسيكي

لقطات الشاشة

• 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
• نظام التشغيل Windows Vista وFirefox 2.0 وClearType ممكّن (بفضل Michiel Bijl على لقطة الشاشة)

إحدى المهام الرئيسية لتصميم الويب هي الاختيار الصحيح الخطوط القياسية. تم إنشاء خدمات تضمين الخطوط مثل Google Web Fonts أو Typekit كبديل بهدف تقديم شيء جديد.

فهي سهلة جدا للاستخدام. لنأخذ خطوط الويب من Google كمثال.

اختر الخط Open Sans أو Droid Serif أو Lato. اكتب الكود والصقه في العنصر وثيقة HTML. أنت جاهز للإشارة إليه في CSS! لم تستغرق العملية برمتها أكثر من 60 ثانية. وكل شيء مجاني تماما.

ماذا يمكن أن يكون الخطأ؟

قد لا تكون بعض الخطوط متاحة للجميع. وهذا يعني أنه قد تكون هناك مشاكل. أنت سعيد لأنك اخترت خطًا جميلاً للموقع، لكن زائر صفحة الويب يرى بدلاً من ذلك كتابة قبيحة.

لن يحدث هذا إذا قمت بتنفيذ خيار النسخ الاحتياطي.

ما مدى أهمية استخدام خطوط الويب الآمنة؟

يحتوي كل جهاز على مجموعته الخاصة من الخطوط المثبتة مسبقًا. أيهما يعتمد على نظام التشغيل. المشكلة هي أن هناك اختلافات طفيفة بينهما.

ماذا عن المواقع الإلكترونية؟ مثل هذه؟ قد لا يكون الخط الذي تراه هو الخط الذي تم تحديده في الأصل للموقع.

ماذا يعني ذلك؟ لنفترض أن المصمم اختار مجموعة من الخطوط المدفوعة للموقع. إذا لم تكن مثبتة لديك ولم يتم توفيرها بواسطة خدمة ويب خاصة، فإن الخط الذي تراه هو أحد الخيارات القياسية. على سبيل المثال، تايمز نيو رومان.

لذلك، قد يبدو النص الموجود على شاشتك فظيعًا.

و هنا الخطوط القياسية للموقعمتاح على جميع أنظمة التشغيل. هذه مجموعة صغيرة متاحة على أنظمة التشغيل Windows وMac وGoogle بالإضافة إلى Unix وLinux.

بمساعدة هذا التحديد، يمكن للمصممين، وكذلك مالكي مواقع الويب، تحديد الخط الذي يجب استخدامه كخط احتياطي. يمنحك هذا القدرة على التحكم في كيفية ظهور الصفحة على الأجهزة المختلفة.

كخيار احتياطي، يختار المطور خطًا مشابهًا جدًا للخط الأصلي، وهذا هو الخط الذي سيتم عرضه للمستخدم.

دعونا نلقي نظرة على مجموعة مختارة من الأكثر شعبية الخطوط القياسيةلغة البرمجة.

15 أفضل الخطوط الآمنة للويب

1. اريال

تعتبر قياسية في معظم الحالات. الخط الأكثر شيوعا " بلا الرقيق"أو الخطوط بلا الرقيق ( التي لا تحتوي على رقاقات في نهايات الحروف). غالبًا ما يتم استخدامه في Windows لاستبدال الأحرف الأخرى.

1. هلفتيكا

هلفيتيكا هي المنقذ للمصممين. هذا خط الويب القياسييعمل دائمًا تقريبًا ( على الأقل كشبكة أمان للخطوط الأخرى).

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

يؤدي نفس الدور بالنسبة للخطوط serif كما يفعل Arial بالنسبة للخطوط sans serif. إنها واحدة من الأكثر شعبية على أجهزة ويندوز. هذه نسخة محدثة من خط Times القديم.

1. مرات

CSS الخط القياسيالتايمز مألوفة لدى معظم الناس. يتذكره الكثير من الناس بأحرف صغيرة في أعمدة ضيقة من الصحف القديمة. النوع الأكثر شيوعا من الطباعة التي أصبحت تقليدا.

1. ساعي جديد

يشبه Times New Roman ويستخدم كنوع من الكلاسيكيات القديمة. ويعتبر أيضًا خطًا أحادي المسافة. على عكس خطوط serif وsans serif، فإن جميع أحرفها لها نفس العرض.

1. ساعي

خط قديم ذو عرض ثابت يُستخدم كخط احتياطي على جميع الأجهزة وأنظمة التشغيل تقريبًا.

1. فيردانا

يمكن اعتبار Verdana بحق خط ويب حقيقي ( خط الويب الحقيقي) بفضل الخطوط البسيطة التي تعمل بمثابة الرقيق، بالإضافة إلى الحجم الكبير. حروفها ممدودة قليلاً، لذا يسهل قراءتها على الشاشة.

1. جورجيا

خط الويب القياسي Georgia مشابه في الشكل والحجم لخط Verdana. أحرفها أكبر من الخطوط الأخرى بنفس الحجم. لكن من الأفضل عدم استخدامه مع الآخرين. نفس تايمز نيو رومان تبدو وكأنها قزم بالمقارنة.

1. بالاتينو

يعود تاريخ Palatino إلى عصر النهضة. لا مزاح. هذا خط كبير آخر مثالي للويب. يتم استخدامه بشكل شائع في العناوين والإعلانات.

1. جاراموند

خط قديم آخر ظهر في القرن السادس عشر في باريس. يأتي الإصدار الجديد والمحسن بشكل قياسي في معظم أجهزة Windows. وفي وقت لاحق، تم اعتماد هذا الخط من قبل أنظمة التشغيل الأخرى.

1. بوكمان

بوكمان ( أو بوكمان الطراز القديم) - واحد من أفضل الخطوط القياسيةللعناوين. السمة المميزة لها هي سهولة القراءة حتى عند استخدام حجم صغير.

1. هزلية بلا MS

يعد Comic Sans MS بديلاً ممتعًا للخطوط الرقيقة.

1. منجنيق MS

هذا خط ذو طابع العصور الوسطى تم تطويره في الأصل بواسطة Microsoft في منتصف التسعينيات. تم استخدامه في نظام التشغيل Windows XP. اليوم يتم استخدامه لتكوين النص الرئيسي.

1. ارييل الأسود

التناظرية الخط القياسي للموقعاريال. صحيح أنها أكبر وأسمك وأكثر صرامة. نسبه مشابهة لخط Helvetica. وهل هو مهم. يستطيعون استبدل Helvetica بنجاح دون الحاجة إلى شراء ترخيص.

1. تأثير

خط رائع آخر لتسليط الضوء على العناوين. إنه يعمل بشكل جيد في جملة قصيرة تتكون من عدة كلمات، وكذلك في الجمل الطويلة.