CSS Web Safe Fonts

-


خطوط الويب الآمنة هي خطوط يتم تثبيتها مع تثبيت المتصفحات بشكل تلقائي وتعتبر خطوط عالميه يتم التعرف عليها عن طريق جميع المتصفحات والاجهزة

لنفرض ان في حال من الأحوال فشل قراءة هذه الخطوط الآمنة، ماذا سيحدث للصفحات، اكيد بتكون مشكلة خاصة اذا ما كنا محددين خط بديل. ولحل هذه المشكلة يجب إضافة واستخدام اكثر من خط في خاصية font-family وفي حال تم فشل قراءة الخط الأول بتنقل الى الثاني وهكذا. 


تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:


نبدأ بإنشاء ملف HTML باسم  TextFont وبعدها نضيف الكود التالي: 

<!DOCTYPE html>
<html>
    <style>
        h1 {
           font-family: "Times New Roman", Times, serif;
           }
    </style>
<body>
<html>  
    <h1>مرحبا بكم </h1>
  </div>                  
</body>
</html>


شغل الصفحة ونشوف النتيجة (الصورة)

 طيب نفهم الكود:

الكود التالي :

h1 {
           font-family: "Times New Roman", Times, serif;
   }

يتم تطبيق نوع الخط Times New Roman على h1 elements الموجودة في صفحة HTML  وفي حال عدم وجود هذا الخط بنتقل الى الخط Times وبعدها serif



فيما يلي قائمة بأفضل الخطوط التي تعتبر آمنه في HTMl , CSS 

Arial (sans-serif)

Verdana (sans-serif)

Helvetica (sans-serif)

Tahoma (sans-serif)

Trebuchet MS (sans-serif)

Times New Roman (serif)

Georgia (serif)

Garamond (serif)

Courier New (monospace)

Brush Script MT (cursive)

حاول تجرب تطبيق هذه الأنواع وراسلنا بالنتيجة.