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
Tóm Tắt
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 kiến thiết 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ữ).
kiến thiết 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 thứ nhất 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ứ liên tục 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 những 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 gồm có :
Serif
- Palatino
- Time New Roman
- Georgia
Sans Serif
ADVERTISEMENT
- Arial
- Helvetica
- Verdana
- Tahoma
Bạn đủ nội lực sử dụng một quy tụ font stack những font chữ cơ bản trên máy tính để dự trữ. Ví dụ :
01 |
|
check font stack
Nếu bạn có nhu yếu xem qua những 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 hoàn toàn có thể test tại trang www.cssfontstack.com để lấy font stack tương thích và bảo đảm an toàn hơn để chắc như đinh 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 |
|
cải tổ click thước chữ với font-size
Để đổi size của chữ, bạn hoàn toàn có thể sử dụng đặc thù font-size và đặc thù này chỉ có một giá trị duy nhất là số kèm tổ chức triển khai thống kê giám sát. Ví dụ :
01 02 03 04 05 |
|
Lời kết
Hhmm, có vẻ như cho đến nay văn bản trên web của bạn đang có hồn một xíu rồi trải qua việc vận dụng những thuộc tính trang trí văn bản ở bài trước và những đặc thù trang trí chữ viết ở bài này. Vậy tất cả chúng ta sẽ điều tra và 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
Source: https://final-blade.com
Category: Kiến thức Internet