Bạn đang xem : cách đặt kích thước phông chữ trong css

CSS

Kích thước phông chữ

Kích thước phông chữ

Thuộc tính font-size đặt kích thước của văn bản.

Có thể quản lý kích thước văn bản là điều quan trọng trong thiết kế web. Tuy nhiên bạn
không nên sử dụng điều chỉnh kích thước phông chữ để làm cho các đoạn văn trông giống như tiêu đề, hoặc
các tiêu đề trông giống như các đoạn văn.

Luôn sử dụng các thẻ HTML thích hợp, như & lt; h1 & gt; – & lt; h6 & gt; cho các tiêu đề và & lt; p & gt; vì
đoạn văn.

Giá trị 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 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 (không hợp lý vì lý do trợ năng)
  • Kích thước tuyệt đối hữu ích khi kích thước vật lý của đầu ra được biết đến

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

  • Đặt kích thước so 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 mặc định cho văn bản bình thường, như đoạn văn, là 16px (16px = 1em).

Đặt kích thước phông chữ với điểm ảnh

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

Ví dụ

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

Hãy tự mình thử »

Xem Thêm  Cách Căn trái, Phải & Căn giữa Văn bản trong HTML - văn bản định vị trong html

Mẹo: 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 kích thước phông chữ bằng 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
các nhà phát triển sử dụng chúng 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 thành em bằng công thức sau: / 16 =

Ví dụ

h1 {
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 * /
}

Hãy tự mình thử »

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

Rất tiếc, vẫn có sự cố với các phiên bản cũ hơn
của Internet Explorer.
Văn bản trở nên lớn hơn
khi được làm lớn hơn và nhỏ hơn so với khi được làm nhỏ hơn.

Sử dụng Kết hợp Phần trăm và Em

Giải pháp hoạt động trên tất cả các trình duyệt là đặt kích thước phông chữ mặc định trong
phần trăm cho & lt; body & gt; phần tử:

Ví dụ

nội dung {
font-size: 100%;
}

h1 {
font-size: 2,5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0,875em;
}

Hãy tự mình thử »

Mã của chúng tôi hiện hoạt động tốt! Nó hiển thị cùng một 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 thu phóng hoặc thay đổi kích thước văn bản!

Xem Thêm  HTML Doctype - Doctype trong HTML là gì? - html doctype là gì

Kích thước phông chữ đáp ứng

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”.

Theo cách đó, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt:

Xin chào thế giới

Thay đổi kích thước cửa sổ trình duyệt để xem kích thước phông chữ thay đổi như thế nào.

Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50 cm, 1vw là 0,5 cm.


Xem thêm những thông tin liên quan đến chủ đề cách đặt kích thước phông chữ trong css

CSS fonts – Các thuộc tính định dạng font chữ trong CSS

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 4967 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu các thuộc tính định dạng font chữ trong CSS: font-family, @font-face, font-size, font-style, font-variant, font-weight

    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu

    html css nguyenthithuylien

Thuộc tính font-size trong CSS

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 7812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng thuộc tính font-size trong CSS để thiết lập việc tăng giảm kích thước của văn bản

Kích thước phông chữ đáp ứng trong CSS

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 4979 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Các font-sizesẽ không đáp ứng như thế này khi thay đổi kích thước cửa sổ trình…

Thuộc tính Font trong CSS, Family, Style, Variant, Size, phông chữ CSS

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 6570 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Font trong CSS, Family, Style, Variant, Size, phông chữ CSS

Phông chữ trong CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 2220 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thuộc tính của phông chữ trong CSS sẽ xác định phông chữ nào, nét chữ, kích cỡ, và kiểu chữ của văn bản. Đây chính là sự khác biệt giữa các phông

Cách thay đổi kích thước phông chữ HTML trong CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 4840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Là một developer, bạn sẽ không thể tiến xa nếu không biết cách thay đổi kích thước phông chữ trong CSS. Bài viết này sẽ hướng dẫn bạn cách thực hiện.

Tìm hiểu về các kiểu phông chữ trong CSS

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 7260 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ giúp các bạn có cái nhìn tổng quát và biết thêm nhiều kiểu phông chữ trong CSS.Thuộc tính phông chữ CSS xác định họ phông chữ, độ đậm,…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thẻ meta trong HTML - Ví dụ về siêu dữ liệu và mô tả siêu dữ liệu là gì - thẻ mô tả meta html

By ads_php