Cách thay đổi kích thước phông chữ HTML trong CSS
Có thể tạo kiểu cho các khía cạnh khác nhau của trang HTML của bạn là một kỹ năng quan trọng đối với các nhà thiết kế và nhà phát triển web. Để tạo kiểu cho các trang web HTML của bạn với màu sắc và kích thước phông chữ, bạn cần phải làm quen với CSS. Để nhắm mục tiêu kích thước phông chữ cụ thể, bạn có thể sử dụng CSS cỡ chữ bất động sản.
Nếu bạn đang tìm cách thay đổi kích thước phông chữ HTML bằng CSS, chúng tôi sẽ giúp bạn. Hãy đi sâu vào bằng cách bắt đầu với phần giới thiệu về CSS cỡ chữ bất động sản.
Mục Lục
Hiểu thuộc tính kích thước phông chữ CSS
Các cỡ chữ thuộc tính trong CSS rất hữu ích khi bạn cần thay đổi kích thước của văn bản HTML. Bạn có thể sử dụng thuộc tính này để thay đổi kích thước của mọi đoạn văn bản trên trang HTML hoặc nhắm mục tiêu các phần tử cụ thể để thay đổi.
Nhắm mục tiêu các yếu tố cụ thể thường được khuyến nghị vì bạn thường không muốn mọi thứ có cùng kích thước. Văn bản không tuân theo hệ thống phân cấp trực quan khó có thể quét qua và phân biệt các tiêu đề cấp cao hơn với các tiêu đề cấp thấp.
Nói một cách đơn giản hơn, đừng lạm dụng cỡ chữ bất động sản. Nếu bạn muốn một tiêu đề nổi bật, có các thẻ tiêu đề HTML khác nhau cho điều đó. Kiểm tra bảng gian lận cơ bản về HTML của chúng tôi để biết các thẻ, thuộc tính khác nhau và hơn thế nữa cùng với giải thích.
CSS cỡ chữ thuộc tính có hai loại giá trị: tuyệt đối và tương đối.
Giá trị độ dài tuyệt đối (tức là px) được cố định trong khi những cái tương đối (ví dụ: em và Ví dụ) linh hoạt. Ví dụ, đối với một đơn vị phông chữ-tương đối như em, kích thước thường được xác định bởi kích thước phông chữ của phần tử mẹ. Tuy nhiên, các đơn vị tương đối phông chữ dựa trên gốc như rem bị ảnh hưởng bởi kích thước phông chữ của phần tử gốc ().
Mỗi thứ đều có ưu và nhược điểm, nhưng về bản chất của việc giữ mọi thứ tập trung, chúng ta sẽ không thảo luận chúng trong bài viết này.
Cách thay đổi kích thước phông chữ của một phần tử HTML trong CSS
Bạn có thể thay đổi kích thước phông chữ của văn bản HTML bằng cách sử dụng một số cú pháp CSS chuẩn.
Đầu tiên, chỉ định bộ chọn (văn bản bạn muốn sửa đổi) và mở một số dấu ngoặc nhọn. Tiếp theo, nhập cỡ chữ theo sau là dấu hai chấm, chỉ định kích thước cụ thể mà bạn muốn văn bản HTML của mình được trình bày và đóng nó bằng dấu chấm phẩy.
Đây là cú pháp:
CSS selector {
font-size: value;
}Để hiểu rõ hơn về khái niệm này, hãy xem lại bản soạn thảo HTML sau có một vài dòng mã bổ sung (một tiêu đề và một đoạn văn):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Nếu bạn muốn thay đổi kích thước phông chữ của phần tử đoạn văn, bạn cần chọn nó (thông qua lớp, thẻ hoặc id) và sử dụng CSS cỡ chữ , đặt một giá trị tùy chỉnh với các đơn vị ưa thích của bạn. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng pixel (px).
p {
font-size: 18px;
}Mặc dù CSS nội tuyến thường không được khuyên dùng trong các dự án lớn, nhưng bạn cũng có thể sử dụng nó để thay đổi kích thước của văn bản HTML. Ghi chú từ mã CSS bên ngoài ở trên, chúng ta có thể triển khai nội tuyến tương tự như vậy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p style="font-size:18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Văn bản trong P Thẻ HTML bây giờ sẽ có kích thước tùy chỉnh mới.
Khắc phục sự cố lỗi khi thay đổi kích thước phông chữ HTML trong CSS
Mặc dù toàn bộ quá trình thay đổi kích thước văn bản trong CSS có vẻ dễ dàng, nhưng nó có thể không phải lúc nào cũng diễn ra chính xác như bạn mong đợi. Nếu bạn gặp sự cố, hãy bắt đầu bằng cách kiểm tra xem bạn đã lưu các thay đổi vào tệp của mình hay chưa (đồng thời, hãy đảm bảo rằng bạn liên kết trang CSS với tệp HTML của mình). Nếu bạn đã làm như vậy, hãy thử sử dụng phương pháp nội tuyến, sau đó làm mới trang.
Nếu nó hoạt động, có thể có vấn đề với mã CSS của bạn. Hãy thử sử dụng !quan trọng và nếu nó hoạt động, phải có một số mã xung đột. Phân tích cú pháp từng dòng mã CSS của bạn để thử và bắt lỗi đó.
Đọc tiếp
Giới thiệu về tác giả
