Lựa chọn Font chữ vô cùng quan trọng
Chọn đúng font chữ có tác động rất lớn đến cách người đọc trải nghiệm một trang web.
Font chữ phù hợp có thể tạo ra một bản sắc mạnh mẽ cho thương hiệu của bạn.
Sử dụng một font chữ dễ đọc là quan trọng. Font chữ thêm giá trị cho văn bản của bạn. Nó cũng quan trọng để chọn đúng màu và kích thước văn bản cho font chữ.
Các loại Font Family
Trong CSS có năm loại font chữ chung:
- Serif fonts có một nét nhỏ ở các cạnh của mỗi chữ cái. Chúng tạo ra một cảm giác trang trọng và sang trọng.
- Sans-serif fonts có đường nét sạch sẽ (không có nét nhỏ kèm theo). Chúng tạo ra một cái nhìn hiện đại và tối giản.
- Monospace fonts - ở đây tất cả các chữ cái có cùng chiều rộng cố định. Chúng tạo ra một cái nhìn máy móc.
- Cursive fonts bắt chước chữ viết tay của con người.
- Fantasy fonts là phông chữ trang trí / vui tươi.
Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn phông chữ serif.
CSS font-family
Trong CSS, chúng tôi sử dụng thuộc tính font-family để chỉ định font chữ của văn bản.
Lưu ý: Nếu tên phông chữ có nhiều hơn một từ, nó phải nằm trong dấu ngoặc kép, như: "Times New Roman".
.p1 { font-family: "Times New Roman", Times, serif; } .p2 { font-family: Arial, Helvetica, sans-serif; } .p3 { font-family: "Lucida Console", "Courier New", monospace; }
CSS Web Safe Fonts
Font chữ an toàn trên web là font chữ được cài đặt phổ biến trên tất cả các trình duyệt và thiết bị.
Font chữ dự phòng
Tuy nhiên, không có phông chữ hoàn toàn an toàn cho web 100%. Luôn có khả năng một phông chữ không được tìm thấy hoặc không được cài đặt đúng cách.
Do đó, điều rất quan trọng là luôn sử dụng font chữ dự phòng.
Điều này có nghĩa là bạn nên thêm một danh sách các "fontchữ dự phòng" tương tự trong thuộc tính font-family. Nếu phông chữ đầu tiên không hoạt động, trình duyệt sẽ thử phông chữ tiếp theo và phông chữ tiếp theo, v.v. Luôn kết thúc danh sách bằng font chữ chung.
p { font-family: Tahoma, Verdana, sans-serif; }
Các font chữ tốt nhất nhất cho HTML và CSS
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Lưu ý: Trước khi bạn xuất bản trang web của mình, hãy luôn kiểm tra xem font chữ của bạn xuất hiện như thế nào trên các trình duyệt và thiết bị khác nhau, đồng thời luôn sử dụng font chữ dự phòng!
Font Style
Thuộc tính font-style chủ yếu được sử dụng để chỉ định văn bản in nghiêng.
Thuộc tính này có ba giá trị:
- normal - Văn bản được hiển thị bình thường
- italic - Văn bản được in nghiêng
- oblique - Văn bản là "nghiêng" (xiên rất giống với in nghiêng, nhưng ít được hỗ trợ hơn)
p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }Font Weight
Thuộc tính font-weight chỉ định độ dày của font chữ:
p.normal { font-weight: normal; } p.thick { font-weight: bold; }
Font Variant
Thuộc tính font-variant chỉ định liệu văn bản có nên được hiển thị bằng font chữ in hoa nhỏ hay không.
Trong font chữ viết hoa nhỏ, tất cả các chữ cái thường được chuyển đổi thành chữ hoa. Tuy nhiên, các chữ hoa đã chuyển đổi sẽ xuất hiện ở kích thước font chữ nhỏ hơn các chữ hoa gốc trong văn bản.
p.normal { font-variant: normal; } p.small { font-variant: small-caps; }Font Size
Thuộc tính font-size đặt kích thước của văn bản.
Có thể quản lý kích thước văn bản là quan trọng trong thiết kế web. Tuy nhiên, bạn không nên điều chỉnh kích thước font chữ để làm cho các đoạn văn trông giống như các tiêu đề hoặc các tiêu đề trông giống như các đoạn văn.
Luôn luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho các tiêu đề và <p> cho các đoạn văn.
Giá trị kích thước font chữ có thể là một kích thước tuyệt đối hoặc tương đối.
Kích thước tuyệt đối:
- Đặt văn bản thành kích thước được chỉ định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không tốt vì lý do trợ năng)
- Kích thước tuyệt đối hữu ích khi kích thước vật lý của đầu ra được biết
Kích thước tương đối:
- Đặt kích thước so với các yếu tố xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
Lưu ý: Nếu bạn không chỉ định kích thước font chữ, kích thước mặc định cho văn bản bình thường, như đoạn văn, là 16px (16px = 1em).
Đặt font size với pixel
Đặt font-size bằng pixel cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản:
h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; }Mẹo: Nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng zoom tool để thay đổi kích thước toàn bộ trang.
Đặt font size với em
Để cho phép người dùng thay đổi kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng EM thay vì pixel.
1em bằng kích thước phông chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định là 1em là 16px.
Kích thước có thể được tính từ pixel sang em bằng công thức này: pixel/16 = em
h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ }Trong ví dụ trên, kích thước văn bản với em giống như ví dụ trước trong pixel. Tuy nhiên, với kích thước em, có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Thật không may, vẫn còn một vấn đề với các phiên bản cũ hơn của Internet Explorer. Văn bản trở nên lớn hơn khi làm lớn hơn và nhỏ hơn khi làm nhỏ hơn.
Sử dụng kết hợp phần trăm và em
Giải pháp hoạt động trên tất cả các trình duyệt là đặt font-size mặc định tính bằng phần trăm cho phần tử <body>:
body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }Code của chúng tôi bây giờ hoạt động tốt! Nó hiển thị cùng một kích thước văn bản trong tất cả các trình duyệt và cho phép tất cả các trình duyệt thu phóng hoặc thay đổi kích thước văn bản!
Responsive Font Size
Kích thước văn bản có thể được đặt bằng đơn vị vw, có nghĩa là "viewport width". Bằng cách đó, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt:
<h1 style="font-size:10vw">Hello World</h1>Google Fonts
Chỉ cần thêm style sheet link trong phần <head> và sau đó thêm font chữ trong CSS.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; } </style> </head>Sử dụng nhiều Google Fonts
Để sử dụng nhiều font chữ Google, chỉ cần tách các tên font chữ bằng ký tự ( | ), như sau:
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"> <style> h1.a {font-family: "Audiowide", sans-serif;} h1.b {font-family: "Sofia", sans-serif;} h1.c {font-family: "Trirong", serif;} </style> </head>Styling Google Fonts
Tất nhiên, bạn có thể tạo kiểu Google Fonts theo ý muốn, bằng CSS!
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; font-size: 30px; text-shadow: 3px 3px 3px #ababab; } </style> </head>
Font Effects
Google cũng đã kích hoạt các font effects khác nhau mà bạn có thể sử dụng.
Đầu tiên thêm hiệu ứng = tên hiệu ứng vào API Google, sau đó thêm một tên class vào element sẽ sử dụng hiệu ứng đặc biệt. Tên class luôn bắt đầu với hiệu ứng font - và kết thúc bằng tên hiệu ứng.
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"> <style> body { font-family: "Sofia", sans-serif; font-size: 30px; } </style> </head> <body> <h1 class="font-effect-fire">Sofia on Fire</h1> </body>CSS Font Property
Để rút ngắn code, cũng có thể chỉ định tất cả các thuộc tính font chữ riêng lẻ trong một thuộc tính.
Thuộc tính font là một thuộc tính viết tắt cho:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Lưu ý: Giá trị font-size và font-family là bắt buộc. Nếu thiếu một trong các giá trị khác, giá trị mặc định của chúng sẽ được sử dụng.
p.a { font: 20px Arial, sans-serif; } p.b { font: italic small-caps bold 12px/30px Georgia, serif; }