Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản

Khóa học thiết kế web chuyên nghiệp của chúng tôi sẽ cung cấp cho các bạn đầy đủ nhất các kỹ năng thiết kế giao diện web, thành thạo ngôn ngữ lập trình PHP&My SQL, Quản trị và tối ưu hóa website.

ĐỐI TƯỢNG HỌC VIÊN

    - Sinh viên ngành CNTT, Điện tử viễn thông
    - Doanh nghiệp muốn tự xây dựng Website riêng 
    - Tất cả các đối tượng có đam mê với ngành lập trình

THU HOẠCH KHÓA HỌC

        Bạn hoàn toàn có thể tự tin trong việc thiết kế 1 website hoàn thiện theo mình mong muốn: website bán hàng, website du lịch, bất động sản...

Các thuộc tính về font chữ sẽ cho phép bạn thay đổi họ font (font family), độ đậm (boldness), kích thước (size) và kiểu font (style).

Đặt font cho đoạn văn bản.

Để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử dụng thuộc tính font-family:

p {

  font-family: Arial, Tahoma, Verdana, sans-serif;

}

Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.

Đặt đoạn văn bản sử dụng font nhãn caption.

p.caption {

  font: caption;

}

Đặt kích thước font cho đoạn văn bản.

Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề có kích thước của chữ khác nhau, chúng ta có thể sử dụng thuộc tính font-size:

h1 {

  font-size: 20px;

}

h3 {

  font-size: 12px;

}

Định lại kích thước font bằng thuộc tính font-size-ajust:

p {

  font-size-ajust: 0.60;

}

Đặt kiểu font cho đoạn văn bản.

Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style:

p {

  font-style: italic; /* normal  |  italic |  oblique */

}

06

Muốn hiển thị font ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ sử dụng thuộc tính font-variant. Thuộc tính này có hai giá trị normal và small-caps

p {

  font-variant: normal; /* normal  |  small-caps */

}

Đặt độ đậm nhạt của font.

Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số)

h3 {

  font-weight: bold;

}

Khai báo các thuộc tính font ở dạng shorthand.

p {

  font: italic small-caps 900 12px arial;