CSS / Фонт ба текст

Фонт ба текст

Вэбийн мэдээллийн 90% нь текст хэлбэртэй байдаг. CSS typography буюу текстийн тохируулга нь хуудасны уншигдах байдал, гоёмсог байдалд шийдвэрлэх үүрэгтэй.

font-family

Текстийн фонтыг тохируулна. Fallback жагсаалт бичих нь заавал хэрэгтэй — хэрэглэгчийн компьютерт анхны фонт байхгүй бол дараагийнх нь ашиглагдана.

css
body {
  /* Геист → Arial → ямар ч sans-serif */
  font-family: "Geist Sans", Arial, sans-serif;
}

code {
  /* Монospace фонт код блокт */
  font-family: "Geist Mono", "Courier New", monospace;
}

Google Fonts ашиглах

Google Fonts үнэгүй бөгөөд хялбар ашиглагддаг. HTML <head>-д холбоно:

html
<head>
  <!-- Google Fonts холбох -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet"
  />
</head>
css
body {
  font-family: "Inter", sans-serif;
}

font-size

Текстийн хэмжээ. Гурван нэгж байна:

css
/* px — тогтмол хэмжээ */
h1 {
  font-size: 32px;
}

/* rem — root элементийн хэмжээтэй харьцангуй (анхдагч: 16px) */
h2 {
  font-size: 1.5rem;
} /* 24px */
p {
  font-size: 1rem;
} /* 16px */

/* em — эцэг элементийн хэмжээтэй харьцангуй */
.small {
  font-size: 0.875em;
} /* эцгийн 87.5% */

Зөвлөмж: Хэрэглэгчийн хөтчийн font-size тохиргоог хүндэтгэхийн тулд rem ашиглах нь дээр.

css
/* Нийтлэг хэмжээний жишээ */
h1 {
  font-size: 2.25rem;
} /* 36px */
h2 {
  font-size: 1.5rem;
} /* 24px */
h3 {
  font-size: 1.25rem;
} /* 20px */
p {
  font-size: 1rem;
} /* 16px */
small {
  font-size: 0.875rem;
} /* 14px */

font-weight

Фонтын зузааныг тохируулна:

css
.thin {
  font-weight: 300;
}
.normal {
  font-weight: 400;
} /* анхдагч */
.semibold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.black {
  font-weight: 900;
}

/* Утга нэрээр */
p {
  font-weight: normal;
}
strong {
  font-weight: bold;
}

font-style

css
em {
  font-style: italic;
} /* налуу */
.quote {
  font-style: italic;
}
.reset {
  font-style: normal;
} /* налуу болсон элементийг хэвийн болгох */

line-height

Мөр хоорондын зайг тохируулна. Уншигдах байдалд хамгийн ихээр нөлөөлдөг property:

css
/* Нэгжгүй тоо — font-size-д харьцангуй (зөвлөмж) */
body {
  line-height: 1.7; /* фонт хэмжээний 170% */
}

h1 {
  line-height: 1.2; /* гарчигт бага зай */
}

/* px болон rem ч болно */
.dense {
  line-height: 20px;
}

letter-spacing

Үсэг хоорондын зайг тохируулна:

css
.label {
  letter-spacing: 0.05em; /* арай өргөн */
}

.heading-display {
  letter-spacing: -0.02em; /* том гарчигт арай нарийн */
}

.tag {
  letter-spacing: 0.1em; /* том үсгийн тэмдэглэгээнд өргөн */
}

text-transform

Текстийн том/жижиг үсгийг CSS-ээр өөрчилнэ — HTML агуулгад нөлөөлөхгүй:

css
.uppercase {
  text-transform: uppercase;
} /* МОНГОЛ */
.lowercase {
  text-transform: lowercase;
} /* монгол */
.capitalize {
  text-transform: capitalize;
} /* Монгол Үсэг */
.none {
  text-transform: none;
} /* анхдагч */

text-decoration

Доогуур зурах, давхар зурах:

css
a {
  text-decoration: none; /* холбоосны доогуур зурыг арилгах */
}

a:hover {
  text-decoration: underline; /* hover дээр гарч ирэх */
}

.strikethrough {
  text-decoration: line-through; /* дундуур зурах */
  color: #475569;
}

/* Өнгө ба зузааныг тохируулж болно */
.custom-underline {
  text-decoration: underline;
  text-decoration-color: #a78bfa;
  text-decoration-thickness: 2px;
}

text-align

Текстийн зэрэгцүүлэлт:

css
.left {
  text-align: left;
} /* зүүн (анхдагч) */
.center {
  text-align: center;
} /* голлуулах */
.right {
  text-align: right;
} /* баруун */

Нэгдсэн жишээ

css
/* Хуудасны үндсэн тохируулга */
body {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #94a3b8;
}

/* Гарчгийн тохируулга */
h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

/* Холбоосны тохируулга */
a {
  color: #a78bfa;
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: #a78bfa;
}

/* Код блокын тохируулга */
code {
  font-family: "Geist Mono", monospace;
  font-size: 0.875rem;
  background-color: #1e293b;
  color: #f472b6;
  padding: 2px 6px;
  border-radius: 4px;
}

Дараагийн хичээлд:

CSS-ийн хамгийн чухал ойлголтуудын нэг — box model буюу хайрцагны загвар. Элемент бүр хэрхэн content, padding, border, margin давхаргуудаас бүрддэгийг практик жишээгээр судална.

← Өмнөх хичээлӨнгө ба дэвсгэрДараах хичээл →Box model