chỉnh màu chữ trong css là một trong những từ khóa được search nhiều nhất về chủ đề chỉnh màu chữ trong css. Trong bài viết này, lamweb.vn sẽ viết bài viết Hướng dẫn chỉnh màu chữ trong css mới nhất 2020
Hướng dẫn chỉnh màu chữ trong css mới nhất 2020
Bên cạnh việc trang trí văn bản với CSS mà ta vừa mới học ở phần trước, nhưng để đoạn văn bản có thêm sức sống thì k thể thiếu việc trang trí hoặc xây dựng lại việc hiển thị font chữ cho đoạn văn bản đó.
khác giống như các tính chất trang trí văn bản, các tính chất thiết lập font chữ được sử dụng tiếp tục khá là ít nên bạn đủ sức đơn giản nhớ được. Cụ thể là chúng ta chỉ cần sử dụng tính chất font-family (chọn kiểu font chữ), font-weight (độ “mập” của chữ) và color (màu chữ).
xây dựng font chữ với font-family
Để thiết lập font chữ cho văn bản, chúng ta sẽ sử dụng thuộc tính font-family và giá trị của nó là tên các loại font chữ cần sử dụng.
Cú pháp: font-family: tên-font, tên-font-backup, tên-font-backup,...;
Trong đó, tên font trước tiên sẽ ưu tiên hiển thị, nếu máy tính user không có font đó thì nó sẽ dùng font backup tiếp theo và cứ thường xuyên như thế.
Cú pháp thì dễ rồi, nhưng cái quan trọng nhất của thuộc tính này là bạn sẽ lựa chọn font gì để sử dụng.
Các font chữ được xây dựng trong CSS theo hướng dẫn thông thường thì nó sẽ get font chữ trên máy tính ra để hiển thị. Điều này có nghĩa là nếu bạn thiết lập một font mà trên máy của người dùng không có thì nó sẽ k hiển thị được.
Khi xây dựng font chữ, bạn cần biết trước tiên là hai giá trị serif và sans-serif. Trong đó, serif là giá trị font kiểu có chân và sans-serif là trị giá kiểu font không chân và các font này sẽ quét dựa theo font chữ cơ bản trên máy tính.
Các font cơ bản trên máy tính
Một lời khuyên khi dùng font chữ trên web là nên ưu tiên việc dùng các font cơ bản trên máy tính mà đại đa số người dùng máy tính đều có. Các font cơ bản trên máy tính bao gồm:
Serif
- Palatino
- Time New Roman
- Georgia
Sans Serif
- Arial
- Helvetica
- Verdana
- Tahoma
Bạn đủ nội lực sử dụng một hội tụ font stack các font chữ cơ bản trên máy tính để dự phòng. Ví dụ:
|
01
|
font-family: Helvetica, Arial, Tahoma, sans-serif; |
check font stack
Nếu bạn có nhu cầu xem qua các font chữ thông dụng nhất trên máy tính và sao chép đoạn code sử dụng font chữ tối ưu nhất thì bạn có thể test tại trang www.cssfontstack.com để lấy font stack phù hợp và an toàn hơn để chắc chắn website mình hiển thị tốt với đại đa số người dùng, cả Windows và Mac.
font-style
tính chất font-style là để bạn thiết lập chữ vạch được hiển thị dưới dạng in nghiêng hoặc bình thường. thuộc tính này có 3 giá trị là normal (bình thường), italic (in nghiêng), oblique (cũng là nghiêng).
In đậm chữ viết với font-weight
Việc tùy chỉnh in đậm chữ vạch có hẳn một thuộc tính riêng đó là font-weight. giá trị của nó là là từ100,200, 300,….900, số càng lớn thì chữ càng đậm và “mập” ra.
bên cạnh đó nếu bạn không thích dùng số thì bạn đủ sức dùng các trị giá kiểu chữ lànormal,bold. Nếu phần tử mẹ của nó đang được thiết lập font-weight thì đủ sức dùng giá trị lighter và bolder để thiết lập độ đậm tương đối.
Màu chữ với thuộc tính color
Để thiết lập màu chữ, bạn sẽ sử dụng thuộc tính color và tính chất này bây giờ support chính thức 3 kiểu trị giá biểu diễn màu sắc cần dùng đó là kiểu tên, kiểu HEX và kiểu RBG. Về ý nghĩa về các kiểu này mình sẽ giải thích ở một bài học không giống, nhưng ngày nay bạn có thể check tên màu hay mã màu tại đây.
|
01
02
03
04
05
|
body color: #333333; |
cải thiện click thước chữ với font-size
Để đổi kích thước của chữ, bạn có thể sử dụng tính chất font-size và tính chất này chỉ có một giá trị duy nhất là số kèm tổ chức đo lường. Ví dụ:
|
01
02
03
04
05
|
p font-size: 16px; |
Lời kết
Hhmm, có vẻ cho đến nay văn bản trên web của bạn đang có hồn một xíu rồi thông qua việc vận dụng các thuộc tính trang trí văn bản ở bài trước và các tính chất trang trí chữ viết ở bài này. Vậy chúng ta sẽ nghiên cứu về cái gì ở phần sau nữa? Cứ nhấn qua bài tiếp theo sẽ rõ, khá quan trọng đấy nhé.
Nguồn : https://thachpham.com
