Kiến thức về CSS (P6): Thuộc tính font size-Thuộc tính font family

Trong CSS có rất nhiều thuộc tính, một trong những thuộc tính mà bạn cần sử dụng liên tục chính là thuộc tính font size và thuộc tính family. Bài viết dưới đây sẽ giúp bạn hiểu hơn về 2 thuộc tính này.

Thuộc tính font size

Thuộc tính font-size được dùng để định dạng cỡ chữ cho thành phần, kích thước của font chữ, bạn có thể gán giá trị cho thuộc tính font-size.

Cấu trúc

3

  • Bạn được phép tùy ý gán giá trị mà bạn muốn vào font-size
  • Đơn vị tính font-size được chia thành 2 loại: absolute và relative.

Absolute bao gồm các đơn vị tính sau:

  • Inches (in)
  • Centimeters (cm)
  • Millimeters (mm)

Relative bao gồm các giá trị sau:

  • Em: giá trị mặc định của font-size trên các trình duyệt.
  • X-height (ex)
  • Pixels (px)

4

Kích thước của font chữ phụ thuộc vào kích thước của phần tử cha.

Lưu ý: font-size không chấp nhận giả trị âm, ví dụ: font-size = -7cm thì không được chấp nhập.

Trong lập trình web hay thiết kế web, bạn muốn font-size phải được nhất quán trên các trình duyệt và các hệ điều hành khác nhau, thì bạn nên sử dụng đơn vị tính là em, và thiết lập các giá trị font-size cho các thẻ lớn như body, input, select, th, td giá trị ban đầu.

Tải Xuống

Thuộc tính font family

Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần. Font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.

Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families.

+ Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…

+ Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,… Khi lên danh sách font dùng để hiển thị một trang web bạn sẽ chọn những font mong muốn trang web sẽ được hiển thị để đặt ở các vị trí ưu tiên. Bạn cần chỉ định thêm một số font thông dụng dự phần như Arial, Tohama hay Times New Roman. Sẽ thuận tiện hơn cho bạn khi thiết kế web.

Cấu trúc

5

Ví dụ

7

Xem thêm:

Theo dõi tiếp các bài về kiến thức CSS nhé. Chúc các bạn tự học thiết kế web thật tốt.

  • Người viết đánh giá

  • Rated 5 stars
  • 100%

  • Reviewed by:
  • Published on:
  • Last modified: 20/07/2016

Giới thiệu

WEBICO là công ty thiết kế website theo hướng chuyên nghiệp và hiện đại, tiên phong trong việc áp dụng các công nghệ hàng đầu trên thế giới hiện nay như HTLM5, CS3, PHP, Bootstrap,...Ngoài ra, WEBICO còn cung cấp thêm các giải pháp cũng như dịch vụ chuyên về Internet Marketing.

Báo giá dịch vụ

Liên hệ với chúng tôi để nhận báo giá dịch vụ cho dự án của bạn với chi phí tốt nhất.