NTM Solutions

Facebook Youtube Google+

Thứ Bảy, 7 tháng 4, 2018

Tự 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:

Nguồn: Lớp học vi tính .COM