Thay đổi font chữ css

Trong mội trang web đôi lúc chúng ta cần in đậm, in nghiêng hay thay đổi font chữ của một đoạn văn bản nào đó mà không muốn sử dụng thẻ HTML để tác động. Chúng ta hoàn toàn có thể làm được điều đó với các thuộc tính font trong CSS.

1, Thuộc tính font-family.

-Thuộc tính font-family trong CSS có tác dụng thay đổi font chữ của thành phần được chọn.

Cú Pháp:

Selector{
    font-family: value;
}

Trong đó: value là tên font chữ mà các bạn muốn sử dụng.

VD: Xác định font chữ cho thẻ p là Arial.

p{
    font-family: Arial;
}

Xem Kết Quả

2, Thuộc tính font-size.

-Thuộc tính font-size trong CSS có tác dụng xác định kích cỡ của thành phần được chọn.

Cú Pháp:

Selector{
    font-size: value;
}

Trong đó: value là kích thước font chữ của thành phần đươc chọn. đơn vị có thể là px, em, %, ...

VD: Xác định font-size cho thẻ p có kích thước 22px.

p{
    font-size: 22px;
}

Xem Kết Quả

3, Thuộc tính font-style.

-Thuộc tính font-style trong CSS có tác dụng xác định kiểu chữ cho thành phần được chọn.

Cú Pháp:

selector{
    font-style: value;
}

Trong đó, value là một trong các giá trị sau:

• normal: bình thường.
• italic: chữ in nghiêng.
• oblique: in nghiêng nhưng chữ không bị nhạt.

VD:

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

Xem Kết Quả

4, Thuộc tính font-variant.

-Thuộc tính font-variant trong CSS có tác dụng xác định kiểu chữ cho thành phần được chọn.

Cú Pháp:

selector{
    font-variant: value;
}

Trong đó value là một trong các giá trị sau:

• normal: Bình thường.
• small-caps: Chuyển đổi sang chữ in hoa.
• inherit: Kế thừa từ thành phần cha.

VD:

p.normal{
    font-variant: normal;
}
p.small-caps{
    font-variant: small-caps;
}
p.inherit{
    font-variant: inherit;
}

Xem Kết Quả

5, Thuộc tính font-weight.

-Thuộc tính font-weight trong CSS có tác dụng thiết lập xem chữ được hiển thị là chữ đậm hay chữ thường.

Cú Pháp:

selector{
    font-weight: value;
}

Trong đó value là một trong các giá trị sau:

• normal: Bình thường.
• bold: Chữ đậm.
• Hoặc có thể là một giá trị số cụ thể.

VD:

p.normal{
    font-weight: normal;
}
p.bold{
    font-weight: bold;
}
p.number{
    font-weight: 700;
}

Xem Kết Quả

6, Lời Kết.

-Như vậy phần này mình đã trình bày với các bạn 5 thuộc tính trong CSS giúp chúng ta tác động vào font chữ, tuy nhiên thì vẫn còn một số thuộc tính khác rất ít khi sử dụng mà mình không nhắc tới ở đây.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Bài Viết Mới

Thuộc tính phông chữ trong CSS xác định loại phông chữ, độ đậm, kích cỡ và kiểu của văn bản

Chúng ta hãy cùng xem ví dụ đầu tiên:

Sự khác biệt giữa phông chữ Serif và Sans-serif

Nội dung

• Một số khái niệm:
• Font-Family (phông chữ)
  • Ví dụ:
• Font Style (Kiểu chữ)
  • Ví dụ:
• Font Size (Cỡ chữ)
• Đặt cỡ chữ bằng pixel
  • Ví dụ:
• Đặt cỡ chữ với Em
  • Ví dụ:
• Sử dụng kết hợp phần trăm và em
  • Ví dụ:
• Font Weight
  • Ví dụ:
• Responsive Font Size (Cỡ chữ tương thích)
  • Ví dụ:
• Font Variant
  • Ví dụ:

Một số khái niệm:

• Generic family (hay có thể gọi là nhóm phông chữ chung) là 1 nhóm các phông chữ có giao diện tương tự  (như “Serif” hoặc “Monospace”)
• Font family : tên 1 phông chữ cụ thể (như “Times New Roman” hoặc “Arial”)

Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.

Font-Family (phông chữ)

Phông chữ của một văn bản được đặt với thuộc tínhfont-family.

Thuộc tínhfont-family nên giữ nhiều tên phông chữ như một hệ thống “dự phòng”. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo, v.v.

Bắt đầu với 1 phông chữ bạn muốn và kết thúc là tên 1 nhóm phông chữ chung (generic family), để cho phép trình duyệt chọn một phông chữ tương tự trong nhóm đó, nếu không có phông chữ nào khác.

Lưu ý : Nếu tên của một phông chữ có nhiều hơn một từ, thì nó phải nằm trong dấu ngoặc kép, như: “Times New Roman”.

Nếu có nhiều phông chữ được chỉ định trong danh sách thì chúng sẽ được phân tách bằng dấu phẩy:

Ví dụ:

p {
  font-family: "Times New Roman", Times, serif;
}

Font Style (Kiểu chữ)

Thuộc tính font-style được sử dụng chủ yếu để chỉ định văn bản in nghiêng.

Thuộc tính này có 3 giá trị như sau:

• normal – Văn bản được hiển thị bình thường
• italic – Văn bản được in nghiêng
• oblique – Văn bản được in nghiêng (giá trị này ít được hỗ trợ bởi trình duyệt)

Ví dụ:

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Font Size (Cỡ chữ)

Thuộc tínhfont-sizethiết lập kích thước của văn bản.

Tuy nhiên, bạn không nên sử dụng thuộc tính font-size để làm cho đoạn văn trông giống như tiêu đề hoặc tiêu đề trông giống như đoạn văn.

Hãy sử dụng các thẻ HTML thích hợp, như <h2> – <h6> cho các tiêu đề và <p> cho các đoạn văn.

Kích thước phông chữ có thể là một kích thước tuyệt đối hoặc tương đối.

Kích thước tuyệt đối:

• Đặt văn bản thành một kích thước được chỉ định
• Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (xấu vì lý do truy cập)
• Kích thước tuyệt đối hữu ích khi biết kích thước vật lý của đầu ra

Kích thước tương đối:

• Đặt kích thước tương ứng với các yếu tố xung quanh
• Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

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

Đặt cỡ chữ bằng pixel

Đặt kích thước văn bản bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản:

Ví dụ:

h2 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để thay đổi kích thước toàn bộ trang.

Đặt cỡ chữ với Em

Để cho phép người dùng thay đổi kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.

1em bằng với kích thước phông chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.

Kích thước có thể được tính từ pixel đến em bằng công thức này: pixel / 16 = em

Ví dụ:

h2 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Trong ví dụ trên, kích thước văn bản trong em giống với ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.

Sử dụng kết hợp phần trăm và em

Để có thể hoạt động trong tất cả các trình duyệt: đặt kích thước phông chữ cho phần tử <body> theo phần trăm :

Ví dụ:

body {
  font-size: 100%;
}

h2 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

việc sử dụng kết hợp sẽ giúp hiển thị cùng kích thước văn bản trong tất cả các trình duyệt và cho phép tất cả các trình duyệt phóng to hoặc thay đổi kích thước văn bản!

Font Weight

Thuộc tínhfont-weightđược sử dụng chủ yếu để chỉ định văn bản in đậm.

Ví dụ:

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Responsive Font Size (Cỡ chữ tương thích)

Kích thước văn bản có thể được đặt bằng đơn vị vw, có nghĩa là “chiều rộng khung nhìn”.

Bằng cách đó, kích thước văn bản sẽ theo kích thước của cửa sổ trình duyệt.

Ví dụ:

1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50 cm thì 1vw là 0,5cm.

Font Variant

Thuộc tính font-variantchỉ định văn bản hiển thị với phông chữ nhỏ, in hoa (nhỏ hơn các chữ cái viết hoa gốc trong văn bản).

Ví dụ:

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}