Trong bài học này, bạn sẽ tìm hiểu một số thuộc tính CSS cụ thể được sử dụng để xác định kiểu chữ trên các trang web và sẽ áp dụng các thuộc tính này cho trang web danh mục đầu tư của bạn. Bạn cũng sẽ tìm hiểu một số chiến lược để chọn một họ phông chữ Show
Kết quả của người họcKhi hoàn thành bài tập này
Họ phông chữ. Serif, Sans-serif, và những thứ khácTrong CSS (và trong kiểu chữ nói chung) có năm loại hoặc họ phông chữ cơ bản. serif, sans serif, cursive, fantasy và monospace Phông chữ Serif có các dòng hoặc nét nhỏ kéo dài từ cuối các ký tự. Chúng có thể trông giống như bàn chân nhỏ, mũ, đuôi, cờ hoặc dấu chấm. Phông chữ Serif đã được sử dụng trong nhiều thế kỷ trong sách in, tạp chí và báo Phông chữ Sans-serif không có serif ("sans" là tiếng Pháp có nghĩa là "không có"). Những phông chữ này đơn giản và dễ hiểu Đã có nghiên cứu sâu rộng về họ phông chữ nào, serif hoặc sans-serif, dễ đọc hơn. Thật không may, kết quả là không thuyết phục. Có hàng chục nghiên cứu ủng hộ cả hai họ phông chữ. Điểm mấu chốt. Có nhiều biến số ảnh hưởng đến khả năng đọc của văn bản, không chỉ riêng họ phông chữ. Đối với nội dung của trang web, điều quan trọng là chọn một phông chữ không quá lộn xộn và trôi chảy từ chữ cái này sang chữ cái khác mà không có quá nhiều khoảng cách giữa các chữ cái. Nói chung, sự lựa chọn tốt nhất để đạt được giao diện gọn gàng, trôi chảy, dễ đọc này là sans-serif. Tuy nhiên, bạn cũng có thể đạt được giao diện này với một số phông chữ serif nhất định Đối với tiêu đề trang, tiêu đề và tiêu đề phụ, phông chữ serif đôi khi là lựa chọn tốt hơn, bởi vì chúng có thể được coi là trang trọng và hoành tráng hơn, giúp góp phần vào cách người đọc cảm nhận thứ bậc của trang Còn chữ thảo, tưởng tượng và đơn cách thì sao?Những phông chữ này khó đọc hơn và nên được sử dụng một cách tiết kiệm. Tùy thuộc vào thông điệp hoặc cảm giác mà bạn đang cố gắng truyền đạt, chúng có thể phù hợp với các đoạn văn bản ngắn, chẳng hạn như tiêu đề hoặc tiêu đề phụ Các thuộc tính Typographic phổ biến trong CSSKiểu chữ trên Web liên quan đến sự tương tác giữa các thuộc tính khác nhau trong CSS. Dưới đây là một vài trong số phổ biến nhất họ phông chữThuộc tính này chỉ định phông chữ của một phần tử. Giá trị của họ phông chữ là danh sách các phông chữ ưa thích, được phân tách bằng dấu phẩy, như trong ví dụ này body {
font-family: Verdana, Arial, sans-serif;
}
h1 {
font-family: "Times New Roman", Times, serif;
}
Nếu người dùng có phông chữ đầu tiên trong danh sách được cài đặt trên máy tính của họ, trình duyệt của họ sẽ hiển thị phông chữ đó. Nếu không, trình duyệt sẽ cố gắng hiển thị phông chữ tiếp theo trong danh sách. Phông chữ cuối cùng trong danh sách phải luôn là một trong năm họ phông chữ chung, được mô tả ở trên. Một lần nữa, họ là
Đây là phông chữ dự phòng, sẽ được sử dụng nếu không có sẵn phông chữ ưa thích nào Lưu ý rằng trong ví dụ trên, "Times New Roman" xuất hiện trong dấu ngoặc kép, trong khi các phông chữ khác thì không. Bất cứ khi nào tên của một phông chữ nhiều hơn một từ, nó phải được đặt trong dấu ngoặc kép cỡ chữThuộc tính này chỉ định kích thước của phông chữ. Điều này có thể được biểu thị bằng các đơn vị tương đối như % hoặc em hoặc bằng các đơn vị tuyệt đối như px (xem bài học trước Giải phẫu Phong cách nếu bạn cần ôn lại các đơn vị này) Kích thước phông chữ cũng có thể được biểu thị bằng các thuật ngữ như nhỏ, trung bình, lớn, lớn hơn, x-lớn và xx-lớn kiểu chữThuộc tính này chỉ định kiểu phông chữ, bình thường, nghiêng hoặc xiên trọng lượng phông chữThuộc tính này chỉ định trọng lượng hoặc độ dày của các ký tự. Nó có thể là bình thường, nhạt hơn, đậm hoặc táo bạo hơn. Nó cũng có thể được biểu thị dưới dạng một giá trị số từ 100 đến 900 (các số phải chia hết cho 100) chiều cao giữa các dòngThuộc tính này chỉ định chiều cao của một dòng văn bản. Giá trị này thường được thể hiện dưới dạng % hoặc em và phải lớn hơn chiều cao của phông chữ, nếu không, các dòng văn bản sẽ được ghép lại với nhau Để có khả năng đọc tối đa, W3C's Web Content Accessibility Guidelines 2. 0 yêu cầu chiều cao dòng của các khối văn bản ít nhất là 1. 5em hoặc 150% căn chỉnh văn bảnThuộc tính này chỉ định cách văn bản được căn chỉnh theo chiều ngang. Đây có thể là trái, phải hoặc giữa. Nó cũng có thể là căn chỉnh, giúp căn chỉnh văn bản ở cả bên trái và bên phải của trang giống như một ấn phẩm in. Tuy nhiên, điều này có xu hướng dẫn đến khoảng cách khó xử giữa các từ và nên tránh trên web khoảng cách giữa các chữ cáiThuộc tính này cho phép bạn chỉ định khoảng cách giữa các chữ cái. Nó có thể được thể hiện bằng cách sử dụng cùng đơn vị như các thuộc tính khác, chẳng hạn như cỡ chữ. Đôi khi nó được sử dụng để mang lại một cái nhìn đặc biệt cho các yếu tố nhất định, chẳng hạn như tiêu đề bóng văn bảnThuộc tính này là mới trong CSS3. Do đó, nó không được hỗ trợ bởi tất cả các trình duyệt, nhưng nếu bạn có một trình duyệt tương đối mới, thuộc tính này có thể gắn bóng vào văn bản. Nếu được thực hiện tốt và ít sử dụng, điều này có thể mang lại hiệu ứng đẹp cho nội dung chẳng hạn như tiêu đề. Để biết thêm thông tin, hãy tham khảo trang Thuộc tính CSS3 Text-shadow tại W3Schools. com Tất cả các họ phông chữ trong CSS là gì?Trong CSS (và trong kiểu chữ nói chung) có năm loại hoặc họ phông chữ cơ bản. serif, sans serif, chữ thảo, fantasy và monospace .
4 họ phông chữ chính là gì?Tìm hiểu về bốn loại phông chữ chính— Serif, Sans Serif, Hiển thị và Chữ viết —là một nơi tuyệt vời để bắt đầu. Hãy xem lại những điều cơ bản về từng loại phông chữ và một số ví dụ về các thương hiệu sử dụng chúng.
6 họ phông chữ là gì?6 loại phông chữ . Phông chữ Serif. Phông chữ Serif có nguồn gốc từ bảng chữ cái Latinh. . Phông chữ Slab Serif. Đây là những phiên bản đậm hơn và to hơn của phông chữ serif. . phông chữ sans serif. . Phông chữ Script. . Phông chữ trang trí. . Phông chữ viết tay |
