Thuộc tính Font trong CSS

Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn các thuộc tính Background trong CSS, để tìm hiểu tiếp các thuộc tính Font trong CSS, bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn.

Các thuộc tính font trong CSS xác định loại font chữ được sử dụng, kích thước, kiểu chữ, ... . Tham khảo tiếp học CSS dưới đây của Taimienphi.vn để tìm hiểu chi tiết các thuộc tính Font trong CSS.

Thuoc tinh Font trong CSS

Thuộc tính Font trong CSS

Mục Lục bài viết:
1. Thuộc tính Font -Family trong CSS
2. Thuộc tính Font-Style trong CSS
3. Thuộc tính Font-Size trong CSS
     3.1. Thiết lập Font Size bằng đơn vị Pixel
     3.2. Thiết lập Font Size bằng đơn vị Em
     3.3. Sử dụng kết hợp đơn vị Percent (%) và Em
4. Thuộc tính Font-Weight trong CSS
5. Responsive Font Size trong CSS
6. Thuộc tính Font-Variant trong CSS
7. Các thuộc tính Font trong CSS

Thuộc tính Font trong CSS

Các thuộc tính font trong CSS bao gồm:

- Thuộc tính font-family được sử dụng để thay đổi font chữ.

- Thuộc tính font-style được sử dụng để tạo font chữ in nghiêng.

- Thuộc tính font-variant được sử dụng để tạo hiệu ứng small-cap (thay đổi chữ thường thành chữ in nhỏ).

- Thuộc tính font-size được sử dụng để thay đổi kích thước font chữ.

- Thuộc tính font được sử dụng để rút gọn một số font chữ khác.

1. Thuộc tính Font -Family trong CSS

Để thay đổi font chữ cho text, chúng ta sử dụng thuộc tính font-family.

Khi sử dụng thuộc tính font-family chúng ta phải xác định nhiều tên font chữ khác nhau dưới dạng "dự phòng". Nếu trình duyệt không hỗ trợ font chữ đầu tiên, chúng ta có thể sử dụng font chữ tiếp theo, ... .

Bắt đầu bằng font chữ mà bạn muốn sử dụng và kết thúc bằng generic family để trình duyệt có thể lựa chọn font chữ trong generic family nếu các font chữ khác không có sẵn.

Lưu ý: Nếu tên font chữ dài hơn một từ, chúng ta phải đặt tên font chữ đó trong dấu ngoặc kép, chẳng hạn như "Times New Roman".

Nếu có nhiều font chữ được chỉ định trong danh sách, chúng ta sử dụng dấu phẩy để phân tách.

Ví dụ:

thuoc tinh font trong css

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh font trong css 2

2. Thuộc tính Font-Style trong CSS

Thuộc tính font-style trong CSS được sử dụng để chỉ định font chữ in nghiêng cho text.

Thuộc tính font-style bao gồm 3 giá trị:

normal - hiển thị text dưới dạng bình thường.

italic - hiển thị text dưới dạng chữ in nghiêng.

oblique - giá trị này gần giống giá trị italic, nhưng ít được hỗ trợ.

Ví dụ:

thuoc tinh font trong css 3

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh font trong css 4

3. Thuộc tính Font-Size trong CSS

Thuộc tính font-size trong CSS được sử dụng để thiết lập kích thước font chữ của text.

Trong thiết kế web, việc quản lý và lựa chọn kích thước font chữ là khá quan trọng. Chúng ta không thể điều chỉnh kích thước font chữ đoạn văn bản giống kích thước font chữ tiêu đề và ngược lại.

Thay vào đó chúng ta phải sử dụng các thẻ HTMLphù hợp, chẳng hạn như sử dụng các thẻ

cho tiêu đề và thẻ

cho đoạn văn bản.

Các giá trị kích thước font chữ trong CSS bao gồm kích thước tuyệt đối (absolute size) và tương đối (relative size).

Kích thước tuyệt đối (absolute size):

- Thiết lập kích thước font chữ cụ thể.

- Không cho phép người dùng thay đổi kích thước font chữ trên tất cả các trình duyệt.

- Kích thước tuyệt đối hữu ích trong trường hợp nếu biết kích thước vật lý đầu ra.

Kích thước tương đối (Relative size):

- Thiết lập kích thước font chữ tương đối các yếu tố xung quanh.

- Cho phép người dùng thay đổi kích thước text trên trình duyệt.

Lưu ý: Nếu không chỉ định kích thước font chữ cụ thể, kích thước mặc định cho đoạn văn bản là 16px (16px = 1em).

3.1 Thiết lập Font Size bằng đơn vị Pixel

Bằng cách thiết lập kích thước font chữ bằng đơn vị pixel, chúng ta có thể kiểm soát toàn bộ kích thước văn bản.

Ví dụ:

thuoc tinh font trong css 5

Kết quả đầu ra có dạng:

thuoc tinh font trong css 6

3.2 Thiết lập Font Size bằng đơn vị Em

Cho phép người dùng thay đổi kích thước font chữ (trên menu trình duyệt). Một số nhà phát triển thường sử dụng đơn vị Em thay vì sử dụng đơn vị Pixel.

1em tương đương với kích thước font chữ hiện tại. Kích thước font chữ mặc định trên trình duyệt là 16px, vì vậy kích thước mặc định của 1em là 16px.

Để tính kích thước được đổi từ pixel sang em, chúng ta sử dụng công thức: pixels/16=em.

Ví dụ:

thuoc tinh font trong css 7

Kết quả đầu ra có dạng:

thuoc tinh font trong css 8

Trong ví dụ trên, kích thước văn bản được thiết lập bằng đơn vị em tương đương kích thước văn bản được thiết lập bằng đơn vị pixel trong ví dụ trước. Tuy nhiên với kích thước em, chúng ta có thể điều chỉnh kích thước văn bản trên tất cả các trình duyệt.

3.3 Sử dụng kết hợp đơn vị Percent (%) và Em

Giải pháp này hoạt động trên tất cả các trình duyệt, thiết lập kích thước font chữ cho phần tử

mặc định theo đơn vị phần trăm.

Ví dụ:

thuoc tinh font trong css 9

Kết quả đầu ra có dạng:

thuoc tinh font trong css 10

4. Thuộc tính Font-Weight trong CSS

Thuộc tính font-weight trong CSS được sử dụng để thiết lập mức độ đậm nhật của font chữ.

Ví dụ:

thuoc tinh font trong css 11

Kết quả đầu ra có dạng:

thuoc tinh font trong css 12

5. Responsive Font Size trong CSS

Ngoài ra chúng ta có thể thiết lập kích thước font chữ bằng đơn bị vw (là viết tắt của viewport width - chiều rộng của viewport).

Bằng cách này kích thước văn bản sẽ được điều chỉnh phù hợp với kích thước cửa sổ trình duyệt.

Ví dụ:

thuoc tinh font trong css 13

Kết quả đầu ra có dạng:

thuoc tinh font trong css 14

Lưu ý: Viewport là kích thước cửa sổ trình duyệt, 1vw = 1% chiều rộng của viewport. Nếu chiều rộng viewport là 50 cm thì 1vw là 0.5 cm.

6. Thuộc tính Font-Variant trong CSS

Thuộc tính font-variant trong CSS xác định xem văn bản có được hiển thị dưới dạng chữ in hoa nhỏ (small-cap) hay không.

Ví dụ:

thuoc tinh font trong css 15

Kết quả đầu ra có dạng:

thuoc tinh font trong css 16

7. Các thuộc tính Font trong CSS

Dưới đây là bảng danh sách các thuộc tính Font trong CSS:

Thuộc tính Mô tả

font Thiết lập tất cả thuộc tính font chữ trong một khai báo.

font-family Chỉ định, thay đổi font chữ văn bản.

font-size Chỉ định kích thước font chữ văn bản.

font-style Chỉ định kiểu font chữ văn bản.

font-variant Chỉ định văn bản có được hiển thị dưới dạng chữ in hoa nhỏ hay không.

font-weight Xác định mức độ đậm nhạt font chữ.

thuoc tinh font trong css 17

https://thuthuat.taimienphi.vn/thuoc-tinh-font-trong-css-48856n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn thuộc tính Font trong CSS. Trong các bài học CSS tiếp theo Taimienp0hi.vn sẽ giới thiệu tiếp cho bạn thuộc tính Text trong CSS nhé.

Tác giả: Quỳnh Búp Bê     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Các lớp Helper trong Bootstrap, cách sử dụng
Gha là gì?
Phương thức lấy và thiết lập các thuộc tính CSS trong jQuery
Web5 là gì? Những điều cần biết về Web 5.0
Tổng hợp các hàm kỹ thuật trong Excel
Từ khoá liên quan:

Thuộc tính Font trong CSS

, học CSS, font trong CSS,

SOFT LIÊN QUAN
  • Kỹ thuật lập trình

    Tìm hiểu về ngôn ngữ lập trình C

    Kỹ thuật lập trình là tài liệu mang đến cho bạn các thông tin về ngôn ngữ lập trình C cũng như học các thuật toán, cấu trúc dữ liệu để thực hiện lập trình bằng loại ngôn ngữ khá thông dụng này. Tài liệu này rất hữu ích v ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong CSS.

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong CSS.

  • Cách chơi Đấu trường thú, Bloody Roar 2 trên máy tính PC

    Đấu trường thú, bloody roar 2 là trò chơi điện tử 3D trong series Đấu trường thú, bloody roar, tựa game được khá nhiều người yêu thích hiện nay. Bài viết này, Taimienphi.vn sẽ hướng dẫn bạn cách chơi Đấu trường thú bloody roar 2, cụ thể là chế độ 2 người. Hãy đọc, tìm hiểu để nắm được các nút, phím di chuyển, đánh và hóa thân vào câu chuyện của các nhân vật trong tựa game này bạn nhé!