Phông chữ css

Question

Lựa chọn đúng chữ và phong cách là rất quan trọng đối với khả năng đọc của văn bản trên một trang web

Nội dung chính Show

Họ phông chữ
Sự khác biệt giữa font Serif và Sans-serif
Kiểu phông chữ
Set size font chữ with pixel
Set size font chữ bằng "em"
Use aconsumation % and "em"
Set size font chữ with "root em"
Set size font chữ bằng từ khóa
Đặt kích thước phông chữ bằng đơn vị nhìn
Trọng lượng phông chữ
Biến thể phông chữ

CSS cung cấp một số thuộc tính để tạo kiểu cho phông chữ của văn bản, bao gồm thay đổi phông chữ, kích thước và độ đậm của chúng, quản lý biến thể, v. v

Các thuộc tính font chữ là.

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

1,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

5

Hãy thảo luận chi tiết hơn về từng thuộc tính phông chữ chữ này

Họ phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

1 được sử dụng để xác định phông chữ được sử dụng cho văn bản

Thuộc tính này có thể chứa một số tên phông chữ được phân tách bằng dấu phẩy như một hệ thống dự phòng, do đó nếu phông chữ đầu tiên không có sẵn trên hệ thống của người dùng, trình duyệt sẽ cố gắng sử dụng phông chữ . v

Do đó, hãy liệt kê bảng chữ cái bạn muốn trước, sau đó liệt kê bảng chữ cái bất kỳ có thể thay thế phông chữ đầu tiên nếu nó không có sẵn. You should end list with a font chữ chung như -

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

7,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

8,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

9,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

0 and

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

1. Một điển hình họ phông chữ khai báo có thể trông giống như thế này

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

1

Lưu ý. Nếu tên của một họ phông chữ chứa nhiều hơn một từ, thì nó phải được đặt bên trong dấu nháy kép, ví dụ.
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
2,
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
3,
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
4, v. v

Họ phông chữ phổ biến nhất được sử dụng trong thiết kế web là serif và sans-serif , vì chúng phù hợp để đọc hơn. Ngoài ra, phông chữ monospace thường được sử dụng để hiển thị mã, bởi vì trong kiểu chữ này, mỗi chữ cái chiếm cùng một khoảng trống trông giống như văn bản được đánh máy

Các phông chữ chữ thảo trông giống như chữ viết tay. Các phông chữ tưởng tượng có thể hiển thị phông chữ nghệ thuật, nhưng chúng không sử dụng rộng rãi vì ít có sẵn trên các hệ điều hành

Sự khác biệt giữa font Serif và Sans-serif

Phông chữ serif có dòng hoặc nét nhỏ ở các ký tự đầu tiên, trong khi phông chữ sans-serif thẳng hơn và không có các nét nhỏ này. Xem hình minh họa sau đây

Để tìm hiểu về các tổ hợp font chữ thường được sử dụng, vui lòng xem tài liệu tham khảo về font chữ an toàn trên web

Kiểu phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2 được sử dụng để thiết lập các kiểu chữ cho nội dung văn bản của một phần tử

Giá trị của

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2 có thể là

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7,

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

8 hoặc

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

9. Default value is

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

Lưu ý. Nhìn chằm chằm, cả hai kiểu chữ chữ xiên và chữ nghiêng đều có vẻ giống nhau, nhưng có sự khác biệt. Style
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
8 sử dụng một phiên bản nghiêng của phông chữ chữ trong khi style
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
9 chỉ đơn giản làm nghiêng phông chữ chữ bình thường

Cỡ chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 được sử dụng để thiết lập kích thước phông chữ cho nội dung văn bản của một phần tử

Có một số cách để chỉ định giá trị kích thước phông chữ chữ, ví dụ như từ khóa, Tỷ lệ phần trăm, pixel, ems, v. v

Set size font chữ with pixel

Set size font chữ bằng các giá trị pixel (ví dụ. 14px, 16px, v. v. ) là một lựa chọn tốt khi bạn cần độ chính xác của pixel. Pixel là một đơn vị đo lường tuyệt đối đối với độ dài cố định

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

Việc xác định kích thước phông chữ bằng pixel không được coi là cách dễ dàng tiếp cận, vì người dùng không thể thay đổi kích thước phông chữ từ cài đặt trình duyệt. Ví dụ. người dùng có thị lực hạn chế hoặc kém có thể muốn đặt kích thước chữ chữ lớn hơn nhiều so với kích thước do bạn chỉ định

Do đó, bạn nên tránh sử dụng các giá trị pixel và thay vào đó hãy sử dụng các giá trị liên quan đến kích thước phông chữ mặc định của người dùng nếu bạn muốn tạo một thiết kế bổ sung vào

mẹo. Văn bản cũng có thể được thay đổi kích thước trong tất cả các trình duyệt bằng cách sử dụng tính năng thu phóng. Tuy nhiên, tính năng này thay đổi kích thước toàn bộ trang, không chỉ văn bản. W3C quảng cáo sử dụng giá trị em hoặc giá trị phần trăm (%) để tạo ra các bố cục lớn mạnh mẽ và khả năng mở rộng

Set size font chữ bằng "em"

Đơn vị

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

64 liên quan đến cỡ chữ của phần tử cha. Khi xác định thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

66 bằng kích thước của phông chữ áp dụng cho phần tử gốc

Vì vậy, nếu bạn đặt

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 20px trên phần tử, thì

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

68 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

69

Tuy nhiên, nếu bạn chưa đặt kích thước phông chữ ở bất kỳ đâu trên trang, thì đó là mặc định của trình duyệt, thường là 16px. Do that, by default

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

20 and

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

21

Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

6

Use aconsumation % and "em"

Như bạn đã quan sát trong ví dụ trên, việc tính toán các giá trị hiển thị không đơn giản. Để đơn giản hóa điều này, một biến kỹ thuật phổ biến là đặt

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 cho phần thân tử thành

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

23 (62,5% của 16px mặc định), tương đương với 10px hoặc 0,625em

Bây giờ bạn có thể thiết lập

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4 cho bất kỳ khai báo nào sử dụng đơn vị em, với một chuyển đổi dễ nhớ, bằng cách chia giá trị

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

25 cho 10, Bằng cách này

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

26,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

27,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

28,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

29, v. v. Please view ví dụ sau

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

2

Set size font chữ with "root em"

Để làm cho mọi thứ đơn giản hơn nữa, CSS3 đã giới thiệu đơn vị

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

40 (viết tắt của "root em") luôn liên quan đến kích thước phông chữ của phần tử gốc (

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

41), bất kể phần tử nằm ở đâu trong đó

Điều này có nghĩa là

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

43 tương đương với kích thước phông chữ của phần tử

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

41,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

45 theo mặc định trong hầu hết các trình duyệt. Hãy thử một ví dụ để hiểu cách nó thực sự hoạt động

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4

Set size font chữ bằng từ khóa

CSS cung cấp một số từ khóa mà bạn có thể sử dụng để xác định kích thước chữ chữ

Một kích thước phông chữ tuyệt đối có thể được xác định bằng một trong những từ khóa sau.

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

46,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

47,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

48, ________ 449, ________ 550, ________ 551 và ________ 552. Trong khi đó, kích thước phông chữ tương đối có thể được xác định chỉ bằng cách sử dụng các từ khóa.

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

53 hoặc

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

54. Hãy thử một ví dụ và xem nó hoạt động như thế nào

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

5

Lưu ý. Từ khóa
p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
49 tương đương với kích thước phông chữ mặc định của trình duyệt, thường là 16px. Tương tự như vậy, xx-nhỏ tương đương với 9 pixel, x-nhỏ là 10 pixel, nhỏ là 13 pixel, lớn là 18 pixel, x-lớn là 24 pixel và xx-lớn là 32 pixel

mẹo. Bằng cách đặt kích thước phông chữ trên phần tử, bạn có thể đặt kích thước phông chữ tương đối ở mọi nơi khác trên trang, cho phép bạn dễ dàng điều chỉnh kích thước phông chữ lên hoặc xuống cho phù hợp

Đặt kích thước phông chữ bằng đơn vị nhìn

Chữ kích thước chữ cái có thể được định nghĩa chỉ bằng cách sử dụng các đơn vị khung nhìn (đơn vị khung nhìn) như

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

56 hoặc

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

57

Vị trí khung nhìn đề cập đến phần trăm kích thước khung nhìn của trình duyệt, trong đó 1vw = 1% chiều rộng khung nhìn và 1vh = 1% chiều cao khung nhìn. Do đó, nếu khung nhìn rộng 1600px, 1vw là 16px

Hãy thử ví dụ sau bằng cách thay đổi kích thước cửa sổ trình duyệt và xem nó hoạt động như thế nào

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

4

Tuy nhiên, có một vấn đề với các khung nhìn đơn vị. Trên màn hình nhỏ, chữ trở nên nhỏ đến mức khó có thể đọc được. Để ngăn chặn điều này, bạn có thể sử dụng hàm

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

58 trong CSS, như sau

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

6

Trong ví dụ này, ngay cả khi chiều rộng khung nhìn trở thành 0, kích thước phông chữ tối thiểu sẽ là 1em hoặc 16px

Bạn có thể sử dụng các phương tiện truy vấn trong CSS để tạo kiểu chữ linh hoạt và đáp ứng tốt hơn

Trọng lượng phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3 quy định độ đậm của phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

3 có thể có một trong các giá trị sau.

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

42,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

43,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

44,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

45,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

46,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

47,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

48,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

49,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

60,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

61,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

62,

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

63 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

64

Các giá trị số từ

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

45 -

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

63 chỉ đánh giá mức độ quan trọng của phông chữ chữ, trong đó mỗi số đại diện cho độ đậm của phông chữ chữ.

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

48 giống như

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

61 giống như

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

42

Các giá trị

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

43 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

44 có liên quan đến độ đậm nhạt của phông chữ chữ được kế thừa, trong khi các giá trị khác như

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

7 và

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

42 là độ đậm nhạt đối lập của phông chữ chữ

Hãy thử một ví dụ để hiểu cơ sở thuộc tính này hoạt động như thế nào

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

3

Lưu ý. Hầu hết các phông chữ chỉ có sẵn với một số độ đậm nhạt trong chế độ; . Trong trường hợp nếu một chữ cái không có sẵn với trọng lượng phông chữ đã định sẵn, một chữ cái thay thế gần nhất có trọng lượng phông chữ đã định sẵn sẽ được chọn

Biến thể phông chữ

Thuộc tính

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

5 cho phép nội dung được hiển thị trong một biến thể viết hoa nhỏ đặc biệt

Chữ viết hoa nhỏ hơi khác với chữ viết hoa bình thường, trong đó các chữ cái viết thường xuất hiện dưới dạng phiên bản nhỏ hơn của các chữ cái viết hoa tương ứng

programming css

Phông chữ css

Họ phông chữ

Sự khác biệt giữa font Serif và Sans-serif

Kiểu phông chữ

Cỡ chữ

Set size font chữ with pixel

Set size font chữ bằng "em"

Use aconsumation % and "em"

Set size font chữ with "root em"

Set size font chữ bằng từ khóa

Đặt kích thước phông chữ bằng đơn vị nhìn

Trọng lượng phông chữ

Biến thể phông chữ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội