يتم تحديد حجم الخط بواسطة سمة العلامة. كيفية إنشاء خط جميل في html: الأحجام والألوان وعلامات خطوط html. تغيير حجم الخط عند تنسيق العناوين

17.07.2020

وصف

يحدد حجم الخط للعنصر. يمكن ضبط الحجم بعدة طرق. مجموعة من الثوابت (xx-صغير، x-صغير، صغير، متوسط، كبير، x-كبير، xx-كبير) تحدد الحجم الذي يسمى المطلق.

في الحقيقة، فهي ليست مطلقة تمامًا، لأنها تعتمد على إعدادات المتصفح ونظام التشغيل.

تقوم مجموعة أخرى من الثوابت (الأكبر والأصغر) بتعيين أحجام الخطوط النسبية. نظرًا لأن الحجم موروث من العنصر الأصلي، يتم تطبيق هذه الأحجام النسبية على العنصر الأصلي لتحديد حجم الخط للعنصر الحالي.

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

يتم تعريف حجم الخط نفسه على أنه الارتفاع من خط الأساس إلى أعلى الدبوس، كما هو موضح في الشكل. 1.

أرز. 1. حجم الخط

بناء الجملة

حجم الخط: الحجم المطلق | الحجم النسبي | معنى | الفائدة | يرث

قيم

لتعيين الحجم المطلق، يتم استخدام القيم التالية: xx-small، x-small، صغير، متوسط، كبير، x-large، xx-large.

يتم عرض مراسلاتها مع حجم الخط في HTML في الجدول. 1.

يتم تحديد حجم الخط النسبي بالقيم الأكبر والأصغر.

يُسمح أيضًا باستخدام أي وحدات CSS صالحة: em (ارتفاع خط العنصر)، ex (ارتفاع الحرف x)، النقاط (pt)، البكسل (px)، النسب المئوية (٪)، وما إلى ذلك. حجم خط العنصر الأصلي هو يؤخذ على أنه 100٪. القيم السلبية غير مسموح بها.

يرث يرث قيمة الأصل.

HTML5 CSS2.1 IE Cr Op Sa Fx

حجم الخط



Duis te fugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem Nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.من الحكمة أن نقوم بالحد الأدنى من التمارين التي نمارسها في ullamcorper ولا نرغب في الحصول على أي شيء من أي شيء يترتب على ذلك.

نتيجة

هذا المثال

يظهر في الشكل. 1.

أرز. 2. استخدام خاصية حجم الخط

نموذج الكائن

document.getElementById("elementID").style.fontSize

  • المتصفحات
  • CSS
    • مقدمة
    • أنواع الوثائق
    • أنواع النمط
  • PHP
لكن ما قصدته حقًا هو هذا: استخدام القوائم.
    فوتوشوب
  • HTML
  • RNR


أولئك. في المستقبل، يجب أن تفهم أن جميع العلامات التي أوضحتها لك يجب أن تُدرج في قالب HTML الرئيسي بين العلامات و

لنعد الآن إلى فصلنا؛ يتم استخدام علامة الحاوية لتنفيذ جميع هذه الوظائف المذكورة في العنوان.

الآن دعونا نعود إلى موضوعنا.

من أجل تغيير حجم أو خط أو لون نص قسم منفصل في HTML، هناك علامة حاوية قطعة منفصلة من النص

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

اللون = "الأحمر"> قطعة منفصلة من النصقيم السمات لونكما هو الحال بالنسبة لسمات النص bgcolor لعلامة الجسم، أي يمكننا تحديدها بكلمات باللغة الإنجليزية (أسود، أخضر، فضي، ليموني، رمادي، زيتوني، أبيض، أصفر، كستنائي، بحري، أحمر، أزرق، أرجواني، أزرق مخضر) ، فوشيا، أكوا) أو أرقام الألوان في RGB (#000000- #FFFFFF)

الوجه = "تاهوما"> قطعة منفصلة من النصتعمل الخطوط على جعل النص يتمتع بمظهر أكثر استثنائية، ولكن هناك مشكلة واحدة، وهي أن الخطوط التي لديك (يمكنك مشاهدتها في C:WINDOWSFonts) قد لا تكون متاحة لزوارك، والمشكلة الثانية في الخطوط هي أن بعض الخطوط لا يمكن استخدامه إلا باللغة السيريلية (الحروف الروسية) أو العكس فقط مع الأبجدية اللاتينية (الحروف الإنجليزية)، وهناك بالطبع نوع ثالث مناسب لكل من الأبجدية اللاتينية والسيريلية. سأعرض في القائمة السفلية الخطوط القياسية والمتوفرة على جميع أجهزة الكمبيوتر والتي تناسب أيضًا أي أحرف:

  • اريال
  • بلا الكونية
  • ساعي
  • جاراموند
  • هلفتيكا
  • فيردانا
  • تاهوما
  • مرات
  • تايمز نيو رومان
يمكنك تحديد خطوط متعددة في نفس الوقت: وجه = "تاهوما، تايمز، فيردانا"> قطعة منفصلة من النص
من هذا الكود أود أن أشير إلى ما يلي: إذا لم يكن لدى الزائر الخط تاهوما، فسيتم توفير النص بالخط مرات، وإذا لم يكن هناك Times، فسيكون النص Times New Roman. حسنًا، إذا لم يكن هذا الخط موجودًا، فهو الخط الافتراضي للمتصفح.

الآن دعنا ننتقل إلى الأحجام، يمكنك تغيير حجم النص في HTML باستخدام علامتين الخطو/أو باسفونت.
لنبدأ مع باسفونت، يتم استخدام هذه العلامة لتغيير اللون الأساسي والخط وحجم النص، على سبيل المثال:
....نص....
هذه العلامة ليست حاوية، أي. ليس لديه علامة خلفية. يتم تعيين لون وخط النص كما في العلامة الخطولكن لتغيير حجم النص يتم استخدام السمة مقاسبقيمة من 1 إلى 7. يمكن استخدام هذه العلامة عدة مرات في النص: الحجم = "4">....نص....
الحجم = "6">....نص....
الحجم = "3">....نص....
بشكل افتراضي، حجم النص = "3"، لا يمكن تحديد هذا الحجم. في المثال الأول قمنا بزيادة النص بمقدار واحد، وفي السطر الثاني قمنا بزيادته إلى "6"، وفي الثالث قمنا بإعادته إلى النص الافتراضي مرة أخرى.
الآن أريد أن أخيب ظنك، فقد تم تقديم هذه العلامة في الإصدار HTML-4.01، وبناءً على ذلك، يتم دعم Internet Explorer فقط في المتصفح، بينما تتجاهلها المتصفحات الأخرى ببساطة، لذا فمن الأفضل عدم استخدام هذه العلامة على الإطلاق!!!
واستخدم العلامة فقط الخط مع سمة الحجموهو مدعوم من قبل جميع المتصفحات تقريبًا. سمة الحجم، يأخذ أيضًا القيم من 1 إلى 7، ولكن يمكن أيضًا تحديد هذه الأحجام من "-2" إلى "+4"
نص
نص
نص
نص
نص
نص
نص
يمكن أن تحتوي علامة FONT، مثل BASEFONT، على عدة سمات:
الحجم = "5" اللون = "الأحمر" Fase = "تاهوما، تايمز، فيردانا">....نص....

تحياتي لجميع قراء هذا المقال والمشتركين في مدونتي! أريد أن أخصص منشور اليوم لموضوع دون معرفة أن موارد الإنترنت الخاصة بك لن تكون قابلة للقراءة وجذابة: "كيفية تعيين خط في HTML". الموضوع في حد ذاته سهل وأنا متأكد من أنك ستتقنه بسرعة.

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

الخطوط مختلفة

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

  • هلفتيكا.
  • فوتورا.
  • جاراموند.
  • بودوني.
  • بيمبو؛
  • روكويل.
  • تايمز نيو رومان.

تكمن اختلافاتهم الرئيسية في علاقتهم بعائلات معينة. هناك عائلات serif (serif)، وsans serif، وزخرفية، ومائلة، وأحادية المسافة.

أريد أيضًا التأكيد على أن هناك 5 أحجام للخطوط.

لنبدأ بلغة html و"قدراتها الإبداعية"

تنسيق النص باستخدام علامات html

اسم أولاً header

صالترجمة بحرف أحمر!

هنا يقع أولاًفقرة حاضِرمثال. من أجل الوضوح هذه الكلماتسيتم كتابتها بالخط المائل.



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

والآن حان الوقت لكي يُظهر CSS مهاراته

على الرغم من المجموعة الكاملة من العلامات المتنوعة التي يوفرها HTML، فإن CSS هي أداة أكثر ملاءمة ومرونة لتصميم مظهر الخطوط.

الخصائص الرئيسية المستخدمة لتنسيق المحتوى هي: الخطومكوناته: زخرفة النص.

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

اسم العقار الكلمات الرئيسية
عائلة الخط يمكن تثبيتها كعائلات خطوط قياسية:

· بدون الرقيق (بلا الرقيق)؛

· العتيقة (رقيق)؛

· ديكور (خيال) ؛

· مائل (مخطوطة)؛

· الفضاء الأحادي (أحادي الفضاء)،

وكذلك هي الأنماط القياسية الموجودة (Arial، Calibri، وما إلى ذلك).

حجم الخط لتعيين الحجم المطلق للرموز، يتم استخدام الرموز التالية: xx-small، x-small، صغير، متوسط، كبير، x-large، xx-large. يمكنك أيضًا تحديد قيمة فريدة.
وزن الخط المسؤول عن تشبع نمط النص. يتم تحديد التغييرات في النطاق باستخدام الكلمات عادي أو غامق أو أخف أو أكثر جرأة.
متغير الخط يحدد تمثيل الحروف باستخدام الكلمات الرئيسية: الأحرف الصغيرة، عادية أو ترث.
نمط الخط يضبط الأصل العادي أو المائل أو المائل أو يرث الأصل.
امتداد الخط يدل على كثافة الحروف. يمكن تحديد القيم التالية: فائق التكثيف، فائق التوسيع، شديد التكثيف، شديد التوسيع، شبه مكثف، شبه موسع، عادي، موسع، مكثف، وارث.

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

والآن حان الوقت للمثال الثاني. لقد أخذت الكود السابق وقمت بتصميمه باستخدام CSS. لذلك، تم تزيين العنوان بالظل (باستخدام الخاصية نص-الظل) ومع مخطط تفصيلي حول ( حدود-لون). وفي الوقت نفسه، قمت بتكبير كلمة واحدة. أردت أيضًا استخدام المعلمة العتامةلتعيين شفافية العنوان الفرعي.

تنسيق النص باستخدام <a href="https://svd-komi.ru/ar/to-install-on-your-computer/fonovyi-blok-div-imeet-otstupy-kak-sdelat-otstupy-v-css-rasshirennye-vozmozhnosti/">خصائص المغلق</a>

اسم أولاً header

عنوان فرعي شفاف!

هنا يقع أولاًفقرة حاضِرمثال. من أجل الوضوح هذه الكلماتسيتم كتابتها بالخط المائل.



أو دراسة العلامات التي تقوم بتنسيق نص HTML

نقدم انتباهكم إلى أحد أهم وأبسط الدروس في البرنامج التعليمي.

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

انظر أدناه العلامات التي تقوم بتنسيق نص HTML:

  • العلامات → جريئة نص HTML(نوع غامق).
  • العلامات → جريئة نص HTML(نوع غامق).
  • العلامات → أحادي المسافة نص HTML(الخط أحادي المسافة).
  • العلامات → أحادي المسافة نص HTML(الخط أحادي المسافة).
  • العلامات → أحادي المسافة نص HTML(الخط أحادي المسافة).
  • العلامات نص HTML، أكبر من الحجم المعتاد (خط كبير).
  • العلامات نص HTMLالحجم أصغر من المعتاد (خط صغير).
  • العلامات → مائل نص HTML(الخط المائل).
  • العلامات → مائل نص HTML(الخط المائل).
  • العلامات → مائل نص HTML(الخط المائل).
  • العلامات → تحته خط نص HTML(الخط تحته خط).
  • العلامات → شطب نص HTML(الخط يتوسطه خط).
  • العلامات نص HTML(الخط) في منخفض.
  • العلامات نص HTML(الخط) في مرتفع.

تنسيق نص HTML: يتوسطه خط، نص تحته خط

النتيجة: ... خط أحادي المسافة

النتيجة: ...حجم الخط أكبر من المعتاد

نتيجة: ... الخط المائل

النتيجة: نص يتوسطه خط (خط يتوسطه خط)

النتيجة: مرتفع

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

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

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


<НЕАD><ТIТLЕ>الأنماط الجسدية

<В>عريض
مائل
وشدد
شطب
<ТТ>آلة كاتبة
<ВХ1>مائل غامق
<ВХ1><и>تم وضع خط تحته خط مائل غامق


أرز. 649. الأنماط الجسدية

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


<НЕАD><ТIТLЕ>الأساليب المادية والمنطقية

<Н2>هذا - معدلرأس المستوى الثاني

أرز. 650. تغيير نمط الخط لجزء من العنوان

باستخدام علامة خاصة يمكنك تخصيص الخط للصور النصية: اضبط الخط والحجم واللون. أولا، يمكنك ضبط حجم الخط الرئيسي المستخدم في المستند بشكل افتراضي. علامة الخط الرئيسي لها التنسيق . يمكن ضبط حجم الخط الرئيسي من 1 إلى 7. إذا لم تستخدم هذه العلامة، فسيتم تعيين حجم الخط الرئيسي الافتراضي على 3.
علامة يضبط حجم الخط الحالي لأجزاء النص الفردية. هذه العلامة لا تؤثر على الأنماط. نطاق القيم المحتملة هو من 1 إلى 7. تتيح لك هذه العلامة أيضًا التحكم في حجم الخط الحالي بالنسبة إلى الخط الرئيسي. للقيام بذلك، استخدم الرمز + (للزيادة) والرمز - (لتقليل) حجم الخط بمقدار معين. على سبيل المثال، إذا تم تعيين حجم الخط الأساسي على 3، فسيتم وضع العلامة يضبط حجم الخط الحالي على 5.
لتعيين محرف الخط، استخدم العلامة . على سبيل المثال:

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

FACE="Arial، Sans Serif، Courier">

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

وسيطة سمة اللون هي تمثيل سداسي عشري لرمز اللون (المكونات الحمراء والخضراء والزرقاء، المعروفة أيضًا باسم مكونات RGB).


<НЕАD><ТIТLЕ>يوضح البرنامج التالي إدارة الخطوط:

<Р>تثبيت الخطوط الخط اريا
<Р>ABVGDEZHIK الخط البريدي
<Р>ABVGDEZHIK الخط البريدي


رمز الخط

أرز. 651. استخدام الخطوط المختلفة لاحظ ذلك في العلامة

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


<НЕАD><Т1ТLЕ>على التوالي للمؤشرات العلوية والسفلية.الفهارس

<НЗ>/الرأس>
<Р>مثال على استخدام الفهارس 2)(5+س

س+3 1أ 23
<Р>+أ 2


الحواشي

بالإضافة إلى تلك التي تمت مناقشتها أعلاه، هناك علامات تنسيق نص إضافية:

  • - تخصيص عناوين البريد الإلكتروني، العناوين البريديةو
    أرقام الهاتف؛
  • <СIТЕ> - تسليط الضوء على الاقتباسات.
  • , - تسجيل نصوص البرامج والثوابت الرمزية.
  • - إدخال النصوص من لوحة المفاتيح.

تستخدم الأنماط الثلاثة الأخيرة خطًا أحادي المسافة (عادةً Courier).
على سبيل المثال، يشغل الحرفان I وZ في الخط أحادي المسافة نفس المساحة. يرجع استخدام الخطوط أحادية المسافة إلى سهولة محاذاة النص باستخدام أحرف المسافات.دعونا نلاحظ نقطة أخرى. يمكن أن تتضمن علامات التحكم في الخط، مثل علامات النمط المنطقي، السمة العنوان = "سلسلة"، والذي يسمح لك بإرفاق تلميح أداة بالنص الموجود داخل هذه العلامة.