Tất cả về Font trong CSS

Chọn đúng Font chữ cho trang web của bạn là rất quan trọng! Trong bài này chúng ta sẽ cùng tìm hiểu về Font trong CSS và các thuộc tính liên quan. Trước khi đi vào nội dung chính thì tôi lấy một ví dụ cho các bạn dễ hiểu, đó là trong phần mềm soạn thảo Word ta có thể tùy chỉnh nhiều thuộc tính cho Font như: in đậm, in nghiêng, kiểu chữ, kích thước. Ta gọi đây là những thông số của Font và bạn hoàn toàn có thể làm điều này trong CSS.

Lựa chọn Font chữ rất quan trọng

• Việc 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 Font chữ dễ đọc là điều quan trọng. Font chữ làm tăng giá trị cho văn bản của bạn. Điều quan trọng nữa là chọn màu và kích thước văn bản chính xác cho Font chữ.

Chủng loại chung của Font

Trong CSS có 5 họ Font  chữ chung:

• Font chữ Serif 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.
• Font chữ Sans-serif có các đường nét rõ ràng, không kèm theo các nét nhỏ. Chúng tạo ra một cái nhìn hiện đại và tối giản.
• Font chữ Monospace: 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.
• Font chữ Cursive, bắt chước chữ viết tay của con người.
• Font chữ Fantasy là Font chữ trang trí, vui tươi.

Sự khác biệt giữa Font chữ Serif và Sans-serif

Một số ví dụ về Font chữ

Font chữ tốt nhất cho HTML và CSS

Danh sách sau đây là các Font chữ an toàn trên Web tốt nhất cho HTML và CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Một số thuộc tính chính của Font

Thuộc tính font-family liệt kê một số tên Font như một hệ thống dự phòng, để đảm bảo khả năng tương thích tối đa giữa các trình duyệt, hệ điều hành. Bắt đầu với Font chữ bạn muốn và kết thúc bằng một họ Font chung để cho phép trình duyệt chọn một Font chữ trong danh sách nếu máy tính khách không hỗ trợ Font đầu tiên.

CSS hổ trợ rất nhiều thuộc tính Font để định dạng chữ. Tuy nhiên hôm nay tôi chỉ giới thiệu các thuộc tính hay sử dụng đó là: font-family, font-size, font-weight, font-style.

font-family

font-family là thuộc tính quyết định loại Font nào sẽ được áp dụng. Cú pháp sử dụng như sau:

Bộ chọn{
font-family: giá trị;
}

Ví dụ:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Ở ví dụ trên tôi đã nhập vào 3 loại Font khác nhau, cách nhau bởi dấu phẩy. Mục đích đề phòng trường hợp máy tính của khách xem không hỗ trợ Font đầu tiên thì nó sẽ lấy Font thứ 2, cứ như vậy từ trái qua phải.

Bạn cũng có thể viết font-family nhiều lần và trình duyệt sẽ xét theo thứ tự từ trên xuống dưới.

.p1 {
  font-family: "Times New Roman";
  font-family: Times;
  font-family: serif;
}
.p2 {
  font-family: Arial;
  font-family: Helvetica;
  font-family: sans-serif;
}
.p3 {
  font-family: "Lucida Console";
  font-family: Courier New; 
  font-family: monospace;
}

Để chắc ăn thì bạn nên thêm một Font mặc định có sẵn khi cài đặt các hệ điều hành nhé hoặc bạn có thể sử dụng thuộc tính @font-face để lưu trữ Font trên Server.

Lưu ý: Khi tên của Font mà nhiều hơn một từ thì các bạn phải để nó vào trong dấu nháy kép nha, ví dụ như "Lucida Console"

font-size

font-size là thuộc tính dùng để thiết lập kích cỡ của chữ.

Cú pháp:

Bộ chọn{
font-size: giá trị;
}

Ví dụ sau:

p.f1 {
font-size: 15px;
}
p.f2 {
font-size: 25px;
}

Một ví dụ khác:

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Chúng ta có thể thiết lập giá trị cho font-size với nhiều đơn vị khác nhau như %, px, pt, em…

Ví dụ:

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 */
}

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Ngoài ra có 1 đơn vị khác là vw, có nghĩa là chiều rộng khung nhìn. Bằng cách này, 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:

Ví dụ:

<h1 style="font-size:10vw">Chào thế giới!</h1>

font-weight

font-weight là thuộc tính dùng để thiết lập độ đậm của chữ. font-weight có thể sử dụng một trong hai loại sau:

• Bằng số: 100, 200, 300, 400, 500, 600, 700,800, 900
• Bằng chữ: normal, bold, lighter….

Trong đó:

• normal: chữ sẽ hiển thị bình thường, đây cũng là giá trị mặc định và tương đương với 400.
• bold: chữ sẽ hiển thị  đậm, tương đương 700.
• bolder: chữ cái sẽ đậm hơn phần tử cha của nó.
• lighter: chữ cái sẽ nhạt hơn chữ cái của phần tử cha.
• Độ đậm sẽ tăng dần từ 100 đến 900.

Cú pháp:

Bộ chọn{
font-weight: giá trị;
}

Ví dụ:

p.1{
font-weight: normal;
}
p.2{
font-weight: bold;
}
p.3{
font-weight: 100;
}
p.4{
font-weight: 900;
}

font-style

font-style là thuộc tính dùng để thiết lập chữ in thường normal hoặc in nghiêng italic hoặc xiên oblique .

Cú pháp:

Bộ chọn{
font-style: giá trị;
}

Ví dụ:

p.1{
font-style: normal;
}
p.2{
font-style: italic;
}

Font chữ CSS Google

Nếu bạn không muốn sử dụng bất kỳ Font chữ tiêu chuẩn nào trong HTML, bạn có thể sử dụng Google Fonts. Google Fonts được sử dụng miễn phí và có hơn 1000 Font chữ để bạn lựa chọn.

Chỉ cần thêm liên kết đặc biệt trong phần <head> và sau đó tham khảo Font chữ Google rồi lựa chọn Font bạn yêu thích.

Ví dụ:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Tạo kiểu cho Google Fonts

Thêm hiệu ứng bóng đổ bằng thuộc tính text-shadow, ví dụ text-shadow: 3px 3px 3px #ababab;

Bật hiệu ứng Font chữ

Google cũng đã kích hoạt các hiệu ứng Font chữ khác nhau mà bạn có thể sử dụng. Đầu tiên hãy thêm vào API Google, sau đó thêm tên lớp đặc biệt cho phần tử sẽ sử dụng hiệu ứng đặc biệt. Tên lớp luôn bắt đầu bằng và kết thúc bằng .effect=effectnamefont-effect-effectname

Ví dụ:

<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>

Kết quả tương tự:

Để yêu cầu nhiều hiệu ứng Font chữ, chỉ cần tách các tên hiệu ứng bằng một ký tự gạch đứng |, như sau:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>

Kết quả tương tự:

Lời kết

Vậy là tôi đã giới thiệu cho các bạn các thuộc tính chính để định dạng chữ cũng như một số định dạng nâng cao. Chúc các bạn vận dụng tốt. Cuối cùng, trong khi viết không tránh khỏi sai sót. Nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để các bài viết của Tradevn.tech ngày càng một tốt hơn.

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---