Làm thế nào để sử dụng tốt nhất phông chữ trong CSS?

Bài viết này sẽ giới thiệu cho bạn một chủ đề đơn giản nhưng không kém phần quan trọng đó là Fonts In và cũng sẽ cung cấp cho bạn một minh chứng thực tế về chủ đề này. Các gợi ý sau sẽ được đề cập trong bài viết này,

• Phông chữ trong CSS
• Các thuộc tính trong Phông chữ CSS
• thuộc tính font-style
• thuộc tính font-weight
• thuộc tính font-size
• thuộc tính font-family

Các trang web mang nội dung dưới dạng hình ảnh, âm thanh, video và nội dung văn bản. Tuy nhiên, hầu hết các trang web vẫn dựa vào văn bản là định dạng chủ yếu. Điều này là do văn bản thuần túy mang lại một số lợi thế rất đáng kể.

Khả năng đọc không xâm phạm - Bạn muốn kiểm tra tỷ số trận đấu mới nhất khi ở văn phòng. Rõ ràng là bạn muốn cập nhật văn bản nhanh chóng chứ không phải video ồn ào!
Yêu cầu băng thông mạng thấp - Nội dung văn bản có thể được tải ngay cả trong các khu vực kết nối internet kém, trong khi đa phương tiện thì không.
Thân thiện với tìm kiếm - Các trang web luôn theo dõi mức độ dễ dàng nhận thấy nội dung của họ trên các công cụ tìm kiếm. Văn bản là phù hợp nhất cho điều này, ít nhất là cho đến khi AI hoàn toàn chiếm lĩnh internet!

Trong khi định dạng nội dung văn bản, các nhà thiết kế web chỉ có một số tham số để làm việc - phông chữ, căn chỉnh, tô sáng và màu sắc. Lựa chọn phông chữ phù hợp cho văn bản của bạn là một lựa chọn quan trọng. Thực hành tiêu chuẩn là sử dụng thẻ phông chữ CSS để xác định phông chữ cho văn bản trong các trang HTML.
Nếu bạn chưa quen với thế giới lập trình HTML, hãy tham quan cơ bản dành cho người mới bắt đầu tại đây. Bạn có thể muốn đọc các kiến ​​thức cơ bản về CSS trước khi bắt đầu tìm hiểu về các phông chữ CSS.

Để có hướng dẫn CSS toàn diện, hãy truy cập Hướng dẫn CSS Edureka cho người mới bắt đầu. Bạn sẽ nhận được một thông báo tuyệt vời về cách CSS được sử dụng để tăng cường thiết kế web HTML.

Tiếp tục với bài viết này về Phông chữ trong CSS

Phông chữ trong CSS

Phông chữ về cơ bản là một tập hợp các đặc điểm liên quan đến việc hiển thị văn bản. Phông chữ được phân biệt với nhau bằng kích thước, độ thụt đầu dòng, độ rộng, độ nghiêng, v.v. Hãy bắt đầu với hiển thị văn bản cơ bản bằng các phông chữ khác nhau.

Ví dụ 1: Tiêu đề và đoạn văn ở các phông chữ khác nhau

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Đoạn văn in nghiêng đậm phông chữ Georgia
 

 Ví dụ 1: Đầu ra 

Trong ví dụ 1, chúng ta có 3 dòng văn bản khác nhau với các phông chữ khác nhau. Bạn sẽ nhận thấy rằng mỗi phông chữ khác nhau về độ rộng ký tự, thụt lề, v.v.

Tiếp tục với bài viết này về Phông chữ trong CSS

Các thuộc tính trong Phông chữ CSS

Phông chữ CSS có 4 thuộc tính chính - kiểu, trọng lượng, kích thước và họ. Thuộc tính style biểu thị bình thường hoặc in nghiêng. Trọng số cho thấy phông chữ là trơn hoặc đậm. Trọng lượng cũng có thể được biểu thị bằng số. Kích thước chỉ đơn giản là kích thước phông chữ lớn hơn kích thước, lớn hơn văn bản xuất hiện. Có nhiều cách để chỉ định kích thước phông chữ, mô tả chi tiết được đưa ra trong các phần sau. Thuộc tính family là gán tên phông chữ cho văn bản.

sự khác biệt giữa sau đại học và thạc sĩ

Trong Ví dụ 1, chúng tôi đã sử dụng các tên phông chữ khác nhau cho các tiêu đề và đoạn văn. Dưới thẻ h1 và p, chúng ta thấy có hai tên phông chữ được liệt kê, trong khi thẻ h2 chỉ đặt tên một phông chữ. Đây là định nghĩa của một họ phông chữ, hãy nói thêm về điều này sau.

Tiếp tục với bài viết này về Phông chữ trong CSS

thuộc tính font-style:

Hai kiểu chính có thể được đặt là 'bình thường' và 'nghiêng'. Chữ in nghiêng được coi là chữ thảo có bản chất nghiêng. Bình thường là tùy chọn mặc định là thẳng. Có một tùy chọn khác ít được sử dụng hơn được gọi là 'xiên', giống với tùy chọn in nghiêng trong hầu hết các phông chữ. Bạn cũng có thể đặt kiểu thành 'inherit' để nó lấy kiểu phông từ phần tử mẹ của nó.

Tiếp tục với bài viết này về Phông chữ trong CSS

thuộc tính font-weight:

Thuộc tính này quyết định xem phông chữ sẽ dày hay mỏng. Nó có thể được đặt thành ‘normal’ hoặc ‘bold’. Giá trị mặc định là bình thường. Giá trị này cũng có thể được đặt dưới dạng số. Trọng lượng 400 là bình thường và 700 là đậm. Có một số cài đặt khác (từ 100 - rất nhạt đến 900 - rất đậm), nhưng chúng không được hỗ trợ bởi tất cả các phông chữ. Tất cả các tùy chọn trọng lượng được hiển thị trong Ví dụ 3.

Tiếp tục với bài viết này về Phông chữ trong CSS

thuộc tính font-size:

Thuộc tính kích thước có thể được đặt theo nhiều cách. Hãy liệt kê những cách này bên dưới.
● Giá trị được liệt kê chẳng hạn như 'trung bình', 'lớn'. Trên thực tế, cũng giống như kích cỡ quần áo, các giá trị có thể từ XX Nhỏ đến XX Lớn!
● Đặt tương đối với phần tử mẹ của nó, là 'lớn hơn' hoặc 'nhỏ hơn'.
● Phần trăm kích thước của phần tử mẹ.
● Đặt làm 'inherit' để chấp nhận trực tiếp kích thước của phần tử mẹ.
● Dưới dạng giá trị tuyệt đối theo đơn vị px (pixel), pt (điểm) hoặc cm (cm)
‘Trung bình’ là giá trị mặc định được đặt cho tham số này.

Tiếp tục với bài viết này về Phông chữ trong CSS

thuộc tính font-family:

Trong HTML, họ phông chữ CSS dùng để đặt tên phông chữ. Bạn có thể chỉ cần đặt một tên phông chữ duy nhất với thẻ. Hoặc bạn có thể gán nhiều giá trị dưới dạng danh sách phông-họ xác định mức độ ưu tiên mà trình duyệt sẽ chọn phông chữ.
Danh sách được xếp thứ tự ưu tiên từ trái sang phải, dưới dạng hệ thống dự phòng. Giá trị đầu tiên nếu có sẽ được chọn hoặc điều khiển chuyển sang giá trị tiếp theo cho đến khi đạt đến cuối danh sách. Họ phông chữ mặc định được xác định bởi tùy chọn trình duyệt.
Họ phông chữ CSS có 2 loại - họ chung chung và họ phông chữ.
● Họ chung chung - dựa trên một số đặc điểm chung, các phông chữ được nhóm thành ‘serif’, ‘sans serif’, ‘monospace’, v.v. Ví dụ: Sans serif có nghĩa là phông chữ không có kiểu serif.
● Tên họ - phông chữ thuộc phân cấp họ cụ thể. Times, Arial, Courier là tất cả các họ phông chữ và Times New Roman là một phông chữ ví dụ của họ Times.
Các tùy chọn sử dụng họ phông chữ khác nhau được liệt kê trong Ví dụ 4 bên dưới.

cách tạo mảng động trong java

Một số điểm chung cần lưu ý

● Giống như một số thuộc tính CSS khác, một số cài đặt phông chữ khác nhau trong các trình duyệt khác nhau. Kiểm tra sự hỗ trợ của trình duyệt trước khi sử dụng một số cài đặt phông chữ hiếm.
● Bạn có thể đặt cài đặt phông chữ một cách riêng biệt bằng cách sử dụng các thẻ riêng lẻ kiểu phông chữ, độ đậm phông chữ, v.v. Ngoài ra, nếu bạn thích mã nhỏ gọn hơn, bạn có thể sử dụng thuộc tính phông chữ viết tắt với tất cả các giá trị trong cùng một dòng.
● Trong các tình huống người dùng mà bạn muốn phông chữ có kích thước khác nhau tùy thuộc vào kích thước trình duyệt, có một cài đặt cỡ phông hữu ích được gọi là cài đặt phông chữ đáp ứng. Nó có thể được đặt bằng đơn vị vw, có nghĩa là 'chiều rộng khung nhìn'. 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.

Hy vọng bạn đã tìm thấy thông tin bạn đang tìm kiếm trên Phông chữ trong CSS. Hãy chia sẻ kinh nghiệm của bạn với chúng tôi trong phần bình luận bên dưới. Chúc bạn thiết kế vui vẻ!

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).