تقديم مجموعة من الشروحات والمواضيع التي تهم بالحاسوب والانترنت من حيث الاستخدام والانشاء والتصميم والحماية، مع الاهتمام بمدونات بلوجر ومواقع التواصل الاجتماعي خصوصا فيسبوك وتويتر

النشرة البريدية @

خصائص التحكم في الخطوط font

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

خصائص الخطوط font
أهلا و سهلا بكم من جديد،
سنتعلم كيفية التحكم في الخطوط، وسنتعرف على بعض الإمكانيات المتعلقة بالخطوط، سنتعرف على خاصية نوع الخط font-family، وخاصية طراز الخط font-style، وخاصية تباين لخط font-variant، وخاصية وزن الخط font-weight، وخاصية حجم الخط font-size، ثم سنتعرف على كيفية اختصار وجمع كل خصائص الخط  من خلال خاصية واحدة font، وسنقوم أيضاً بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب، سنتعلم هذه الخصائص في هذا الدرس.

خاصية نوع الخط font-family

هناك نوعان من أسماء الخطوط:
خطوط بأسماء محددة، أمثلة "Tahoma, Times New Roman, Arial".
خطوط بأسماء عامة، تحدد مجموعة من الخطوط التي لها شكل متماث، أمثلة "serif, sans-serif, monodpace"، والاختلاف بينها يوضح في المثال التالي:
خاصية نوع الخط font-family
عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده.
font-family: arial, verdana, sans-serif;

خاصية طراز الخط font-style

الخاصية font-style تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو  oblique، مثلا القيمة italic تجعل الخط يظهر بشكل مائل.
font-style: italic;
font-style: oblique;
font-style: normal;

خاصية تباين لخط font-variant

الخاصية font-variant تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، شاهد المثال الآتي:
هذه الخاصية لا تدعمها كل الخطوط.
font-variant: small-caps;
font-variant: normal;

خاصية وزن الخط font-weight

الخاصية font-weight تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط.
font-weight: bold;
font-weight: normal;

خاصية حجم الخط font-size

هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن:
font-size: 30px;
font-size: 12pt;
font-size: 120%;
font-size: 1em;
هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'.

جمع كل خصائص الخط  font

هذه الخصائص:
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
يمكن اختصارها في سطر واحد باستخدام الخاصية font
font: italic bold 30px arial, sans-serif;
الخط الخاص بهذه المدونة مثلا:
font:13px ae_AlMothnna, Al-Mothnna,  ae_AlArabiya, Tahoma, Oswald, Arial, Comic Sans MS, Arial Black, Serif;
قائمة قيم الخاصية font ترتب بهذا الشكل:
font-style | font-variant | font-weight | font-size | font-family

ليست هناك تعليقات :

أضف تعليق

free tracking