SwiftUI Academy · درس

الخط والسُمك واللون

نسّق النص باستخدام font وfontWeight وforegroundStyle

الخط والسُمك واللون درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Styling Starts Here

A plain Text view shows words, but real apps style them. In this lesson you will set font, weight, and color to make text feel intentional. 🎨

The font Modifier

The font modifier picks a text style. Apple ships semantic sizes like title, headline, and body that adapt to the user automatically.

Text("Welcome")
    .font(.title)

Semantic Font Styles

Prefer semantic styles over fixed point sizes. Names like .largeTitle and .caption scale with the device and the user accessibility settings.

Text("Big").font(.largeTitle)
Text("Small").font(.caption)

Custom Point Sizes

Need an exact size? Pass .system(size:) with a number. It is handy for logos, but semantic styles are better for body text.

Text("Logo")
    .font(.system(size: 40))

Adding Weight

The fontWeight modifier sets how thick the strokes look. Try .bold for emphasis or .light for a softer, airier feel.

Text("Strong")
    .fontWeight(.bold)

Weight Inside font

You can also bake the weight right into the font call. This keeps related styling in one tidy place.

Text("Heavy")
    .font(.title.weight(.heavy))

Coloring Text

Use foregroundStyle to color text. Pass a Color like .red or a brand color, and the words pick up that tint instantly.

Text("Alert")
    .foregroundStyle(.red)

Semantic Colors

Reach for semantic colors like .primary and .secondary. They adapt to light and dark mode so your text stays readable everywhere.

Text("Hint")
    .foregroundStyle(.secondary)

Italic and Bold Shortcuts

SwiftUI offers quick toggles: .bold() and .italic(). They read cleanly and skip the longer modifier names.

Text("Note")
    .bold()
    .italic()

Chaining Modifiers

Modifiers stack top to bottom. Combine font, weight, and color on one Text to shape its full look in a single chain.

Text("Title")
    .font(.title)
    .bold()
    .foregroundStyle(.blue)

Order Can Matter

Most text modifiers commute, but order matters once layout enters. Keep styling first, then add padding or background later.

Quick Check

Which modifier sets the text color?

Lesson Recap

You styled text with font, fontWeight, and foregroundStyle. Lean on semantic styles and colors so your UI adapts beautifully. ✨

الأسئلة الشائعة

هل درس «الخط والسُمك واللون» مجاني؟

نعم — نص درس «الخط والسُمك واللون» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «الخط والسُمك واللون»؟

نسّق النص باستخدام font وfontWeight وforegroundStyle تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الخط والسُمك واللون»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى SwiftUI Academy