Khóa học CSS - Bài 11 - Định dạng kiểu chữ

Quay về MỤC LỤC HỌC CSS

1. Font Family

Có 02 loại kiểu chữ sau:

·         Generic family – 01 nhóm kiểu chữ dễ đọc, dễ nhìn như “Serif” hay “Monospace”

·         Font family – nhóm kiểu chữ riêng biệt.

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts có những đường gạch nhỏ ở cuối trong 01 vài ký tự.
Sans-serif	Arial Verdana	"Sans" nghĩa là không – những kiểu fonts này không có những đường gạch ở cuối các ký tự.
Monospace	Courier New Lucida Console	Tất cả ký tự monospace có cùng bề rộng.

Trong CSS để thiết lập kiểu chữ ta dùng thuộc tính font-family.

Thuộc tính này giữ một nhóm các kiểu chữ tương tự nhau, nếu kiểu chữ này trình duyệt không tìm thấy, nó sẽ tự động tìm kiểu tiếp theo, và cứ thế.

Kết thúc sẽ là họ tổng quát của kiểu chữ đó (generic family)

Ví dụ:

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

2. Font Style

Kiểu chữ nghiêng trong CSS được xác định bằng thuộc tính font-style

Có 03 thuộc tính trong font-style:

·         normal – chữ bình thường.

·         italic – chữ nghiêng.

·         oblique – chữ nghiêng nhưng đơn giản hơn.

Ví dụ:

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

3. Kích cỡ chữ

Trong CSS có 02 để thay đổi kích cỡ chữ

·         Dùng thẻ HTML – ví dụ h1, h2

·         Dùng thuộc tính font-size

Thuộc tính font-size có thể nhận các loại giá trị sau:

·         pixel – thiết lập chính xác cỡ chữ

Ví dụ:

p {
    font-size: 14px;
}

·         em – 1em = 16 px

Ví dụ:

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

·         Kết hợp em và %

Ví dụ: ta thiết lập trong % font-size trong phần body để kiểm soát cỡ chữ toàn trang web.

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

·         vw – viewport width (xem mục 5)

4. Độ dày chữ

Trong CSS để thiết lập độ dày của 01 kiểu chữ ta dùng thuộc tính font-weight.

Ví dụ:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

5. Cỡ chữ Responsive

Cỡ chữ có thể được thiết lập tùy vào kích cỡ màn hình thiết bị.

Trong CSS ta có thể làm được điều này qua đơn vị: vw (viewport width)

1vw = 1% viewport width

Ví dụ:

<h1 style="font-size:10vw">Hello World</h1>

Các bạn phóng to – thu nhỏ trình duyệt để thấy hiệu ứng

6. Font Variant

Thiết lập kiểu chữ small-caps.

Tất cả chữ sẽ được đổi ra chữ hoa hết nhưng với 01 kích thước nhỏ hơn.

Ví dụ:

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

Nếu vẫn còn chưa rõ, các bạn xem thêm video clip sau:

Quay về MỤC LỤC HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm