Tìm hiểu cách sử dụng CSS để thay đổi thuộc tính phông chữ
Phông chữ và CSS
CSS là cách hiệu quả nhất để điều chỉnh phông chữ trên trang web của bạn. Bạn có thể kiểm soát họ phông chữ , kích thước, màu sắc, trọng lượng và nhiều khía cạnh khác của kiểu chữ.
Thuộc tính phông chữ trong CSS là một trong những cách phổ biến nhất để làm cho trang của bạn trở nên đặc biệt và độc đáo hơn. Thật dễ dàng để thay đổi màu sắc, kích thước và thậm chí cả khuôn mặt (chính phông chữ) của văn bản của bạn với các thuộc tính phông chữ CSS .
- màu
- font-family
- cỡ chữ
Có ba phần cho một phông chữ:
- màu
- Đây là màu chữ sẽ hiển thị như trên màn hình.
- kích thước
- Đây là kiểu chữ lớn hay nhỏ sẽ hiển thị trên màn hình.
- đối mặt
- Đây là họ phông chữ, thường được gọi là phông chữ thực tế.
Màu phông chữ
Để thay đổi màu của văn bản, chỉ cần sử dụng thuộc tính kiểu màu CSS. Bạn có thể sử dụng tên màu hoặc mã thập lục phân. Như với tất cả các màu trên web, tốt nhất là sử dụng màu sắc an toàn của trình duyệt .
Hãy thử các kiểu sau trong các trang web của bạn:
phông chữ này có màu đỏ
phông chữ này có màu xanh dương
Kích thước phông chữ
Khi bạn đặt kích thước phông chữ trên web, bạn có thể đặt kích thước phông chữ ở kích thước tương đối hoặc rất cụ thể bằng cách sử dụng pixel, cm hoặc inch. Tuy nhiên, kích thước phông chữ chính xác hơn có nghĩa là được sử dụng để in và không dùng cho trang web, nơi mọi người xem trang web của bạn có thể có độ phân giải, kích thước màn hình hoặc cài đặt phông chữ mặc định khác nhau. Do đó, nếu bạn chọn kích thước chuẩn là 15px, bạn có thể ngạc nhiên khi thấy phông chữ của bạn lớn hay nhỏ hiển thị cho khách hàng của bạn.
Tôi khuyên bạn nên sử dụng ems cho kích thước phông chữ . Ems cho phép trang của bạn vẫn có thể truy cập bất kể ai đang xem nó, và ems có nghĩa là để hiển thị màn hình. Để lại điểm ảnh và điểm của bạn để hiển thị in. Để thay đổi kích thước phông chữ của bạn, hãy đặt kiểu sau vào trang web của bạn:
phông chữ này là 1em
phông chữ này là .75em
phông chữ này là 1.25em
Khuôn mặt phông chữ
Khuôn mặt của phông chữ là điều mà nhiều người nghĩ đến khi họ nghĩ "phông chữ". Bạn có thể khai báo bất kỳ khuôn mặt phông chữ nào bạn muốn, nhưng hãy nhớ, nếu người đọc của bạn không có phông chữ đó, trình duyệt của họ sẽ cố gắng tìm một kết quả phù hợp cho nó, và trang của họ sẽ không giống như bạn dự định.
Để giải quyết vấn đề này, bạn có thể chỉ định danh sách tên khuôn mặt, được phân cách bằng dấu phẩy để trình duyệt sử dụng theo thứ tự ưu tiên. Đây được gọi là ngăn xếp phông chữ. Hãy nhớ rằng phông chữ chuẩn trên PC (chẳng hạn như Arial) có thể không tiêu chuẩn trên máy Macintosh. Vì vậy, bạn nên luôn luôn xem các trang của mình bằng một máy được cài đặt tối thiểu (và tốt nhất là trên cả hai nền tảng) để đảm bảo rằng trang của bạn trông giống như được thiết kế ngay cả với các phông chữ tối thiểu.
Một trong những phông chữ yêu thích của tôi là tập hợp này là một bộ sưu tập phông chữ sans-serif và trong khi geneva và arial trông không tương tự khủng khiếp, cả hai đều khá chuẩn trên máy tính Macintosh và Windows . Tôi bao gồm helvetica và helv cho khách hàng trên các hệ điều hành khác như Unix hoặc Linux có thể không có một thư viện phông chữ mạnh mẽ.
phông chữ này là sans-serif
phông chữ này là serif