Kết nối

So sánh các đơn vị đo kích thước font trong HTML

6.112 lượt xem 
 

Để định nghĩa kích thước font chữ cho văn bản trong 1 trang web, bạn có thể dùng thuộc tính font-size, ví dụ:

<p style="font-size:12pt">Xin chào các bạn! Đây là website dammio.com...</p>

Trong ví dụ trên chúng ta định nghĩa đoạn văn có kích thước là 12pt (point). Có rất nhiều đơn vị để định nghĩa kích thước font như: px, pt, em, % hay thậm chí là đơn vị vw (1vw = 1% độ rộng viewport, tức là độ rộng của cổng xem trang web). Việc chứa có nhiều đơn vị, khiến cho người thiết kế Web khó khăn trong việc chuyển đổi và nên sử dụng đơn vị nào, bảng sau đưa ra các so sánh các đơn vị kèm theo ví dụ:

Font Size Conversion Chart
Point (pt) Pixel (px) Em (em) Phần trăm (%) Từ khóa Ví dụ
6pt 8px 0.5em 50% Sample
7pt 9px 0.55em 55% Sample
7.5pt 10px 0.625em 62.5% x-small Sample
8pt 11px 0.7em 70% Sample
9pt 12px 0.75em 75% Sample
10pt 13px 0.8em 80% small Sample
10.5pt 14px 0.875em 87.5% Sample
11pt 15px 0.95em 95% Sample
12pt 16px 1em 100% medium Sample
13pt 17px 1.05em 105% Sample
13.5pt 18px 1.125em 112.5% large Sample
14pt 19px 1.2em 120% Sample
14.5pt 20px 1.25em 125% Sample
15pt 21px 1.3em 130% Sample
16pt 22px 1.4em 140% Sample
17pt 23px 1.45em 145% Sample
18pt 24px 1.5em 150% x-large Sample
20pt 26px 1.6em 160% Sample
22pt 29px 1.8em 180% Sample
24pt 32px 2em 200% xx-large Sample
26pt 35px 2.2em 220% Sample
27pt 36px 2.25em 225% Sample
28pt 37px 2.3em 230% Sample
29pt 38px 2.35em 235% Sample
30pt 40px 2.45em 245% Sample
32pt 42px 2.55em 255% Sample
34pt 45px 2.75em 275% Sample
36pt 48px 3em 300% Sample

Bảng trên giúp bạn so sánh các đơn vị kích thước văn bản, chẳng hạn 12 pt tương ứng 16 px hay 1 em. Nếu bạn muốn dùng font chữ cố định thì có thể dùng pt, nếu bạn muốn font chữ thay đổi theo kích thước màn hình có thể dùng px hay em. Việc áp dụng đơn vị font chữ nào là tùy thuộc nội dung, bố cục trang web và các tình huống cụ thể.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). So sánh các đơn vị đo kích thước font trong HTML. https://www.dammio.com/2018/04/26/so-sanh-cac-don-vi-do-kich-thuoc-font-trong-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {So sánh các đơn vị đo kích thước font trong HTML},
    year = {2018},
    url = {https://www.dammio.com/2018/04/26/so-sanh-cac-don-vi-do-kich-thuoc-font-trong-html},
    urldate = {2025-04-18}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
trackback

[…] Để canh lề cho Spinner, bạn buộc phải sử dụng một số lớp canh lề như theo khoảng trắng như .m, .m-1,…,.m-5 (margin) và .p, .p-1,…, .p-5 (padding). Ví dụ canh lề bằng lớp .m-5 có nghĩa bạn cách lề theo thuộc tính margin: 3rem!important;. Trong đó rem là 1 đơn vị kích thước font chữ, bạn thêm tìm hiểu thêm ở bài So sánh các đơn vị đo kích thước font trong HTM…. […]

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x