Khái niệm Fonts chữ và các thuộc tính của Fonts chữ trong Css - #10

Đăng bởi: Minacode|Cập nhật:09-01-2024

Ok anh em, Lựa chọn Fonts chữ là một việc rất quan trọng, việc chọn đúng Fonts chữ có tác động rất lớn đến cách người đọc trải nghiệm một trang web. Fonts chữ phù hợp có thể tạo ra bản sắc mạnh mẽ cho thương hiệu của bạn. Do vậy, Tiếp theo trong chủ để học nhanh Css cùng Minacode mình sẽ nói về Fonts trong Css nhé! Chúng ta sẽ làm quen với các thuộc tính liên quan đến nó như: font-family; font-style; font-weight; font-variant; font-size và cách sử dụng Fonts chữ của Google;. Nào Let's Go thôi

Font Families- Kiểu fonts

Trong Css có 5 kiểu fonts sau:

+ Serif fonts
+ Sans-serif fonts
+ Monospace fonts
+ Cursive fonts
+ Fantasy fonts

Khúc này mình không biết diễn tả chi tiết thế nào bẵng chữ cho đúng. Nên các bạn hay trải nghiệm sự khác nhau của mỗi fonts nhé!

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

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

font-family

Trong Css, chúng ta sử dụng thuộc tính font-family để chỉ định fonts chữ của văn bản. Lưu ý : Nếu tên phông chữ có nhiều hơn một từ thì phải đặt trong dấu ngoặc kép, như: "Time New Roman".

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>Minacode|font-family</h1>
<p class="p1">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="p2">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="p3">Kênh chia sẻ kiến thức lập trình miễn phí.</p>

</body>
</html>

Ta có:

Các bạn có thắc mắc tại sao mình lại để nhiều hơn một fonts trong font-family không?

Đó là vì font-family nên chứa một số tên fonts chữ làm "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 bằng fonts chữ bạn muốn và kết thúc bằng họ fonts chữ chung (để cho phép trình duyệt chọn fonts chữ tương tự trong họ fonts chữ chung, nếu không có sẵn fonts chữ nào khác). Tên fonts chữ phải được phân tách bằng dấu phẩy nhé!

Ví dụ:

p {
font-family: Tahoma, Verdana, sans-serif;
}

Ở đây, có ba loại phông chữ: Tahoma, Verdana và sans-serif. Phông chữ thứ hai và thứ ba là bản dự phòng, trong trường hợp trình duyệt không tìm thấy phông chữ đầu tiên.

Mình sẽ liệt kê một số Fonts chữ được đánh giá là an toàn nhất cho Css và Html mà mọi trình duyệt đều có thể tìm thấy nó:

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

Và các Fonts chữ dự phòng thường được sử dụng:

+ Serif
+ Sans-serif
+ Monospace
+ Cursive
+ Fantasy

Khúc này mình cũng không biết diễn tả chi tiết thế nào bẵng chữ cho đúng. Nên các bạn hay trải nghiệm sự khác nhau của mỗi fonts nhé!

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 hiển thị in nghiêng
+ oblique: Văn bản "nghiêng" (xiên rất giống với chữ nghiêng, nhưng ít được hỗ trợ hơn)

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<h1>Minacode|font-style</h1>

<p class="normal">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="italic">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="oblique">Kênh chia sẻ kiến thức lập trình miễn phí.</p>

</body>
</html>

Ta có:

font-weight

Thuộc tính font-weight chỉ định độ đậm của fonts chữ:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
 font-weight: normal;
}

p.light {
 font-weight: lighter;
}

p.thick {
 font-weight: bold;
}

p.thicker {
 font-weight: 900;
}
</style>
</head>
<body>

<h1>Minacode|font-weight</h1>

<p class="normal">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="light">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="thick">Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p class="thicker">Kênh chia sẻ kiến thức lập trình miễn phí.</p>

</body>
</html>

Ta có:

font-variant

Thuộc tính font-variant chỉ định liệu văn bản có được hiển thị bằng fontschữ viết hoa nhỏ hay không.

Trong phông chữ viết hoa nhỏ, tất cả các chữ cái viết thường đều được chuyển thành chữ in hoa. Tuy nhiên, các chữ in hoa được chuyển đổi sẽ xuất hiện ở cỡ chữ nhỏ hơn các chữ in hoa ban đầu trong văn bản.

(Cái này thực tế mình thấy ít sử dụng nhé!)

font-size

Thuộc tính font-size giúp thiết lập kích thước cho văn bản. Chúng ta có thể tùy biến nhưng bạn không nên sử dụng chức năng điều chỉnh cỡ chữ để biến đoạn văn trông giống tiêu đề, hoặc tiêu đề giống đoạn văn. Thay vào đó hãy luôn sử dụng các thẻ Html một cách thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho các đoạn văn.

Giá trị kích thước phông chữ có thể là kích thước tuyệt đối hoặc tương đối:

Kích thước tuyệt đối:

Đặt văn bản theo 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
Kích thước tuyệt đối rất hữu ích khi biết kích thước vật lý của đầu ra

Kích thước tương đối:

Đặt kích thước tương ứng với các phần 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 cỡ chữ, kích thước mặc định cho văn bản thông thường, như đoạn văn, là 16px (16px=1em).

Ví dụ một số cách đặt kích thước cho fonts chữ

Đặt cỡ chữ bằng pixel:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Đặt cỡ chữ bằng 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 cỡ 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 của 1em là 16px. Kích thước có thể được tính từ pixel đến em bằng công thức sau: 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 trong em trông giống với ví dụ trước tính bằng pixel. Tuy nhiên, với em thì có thể điều chỉnh được kích thước chữ trên mọi trình duyệt.

Sử dụng kết hợp % và Em:

Giải pháp phù hợp với tất cả các trình duyệt là đặt kích thước phông chữ mặc định theo 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;
}

Kích thước Font Responsive:

Kích thước văn bản có thể được đặt bằng một đơn vị 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:

<h1 style="font-size:10vw">MinaCode</h1>

Fonts chữ của Google

Nếu bạn không muốn sử dụng bất kỳ phông chữ tiêu chuẩn nào trong Css và Htm, bạn có thể sử dụng Google Fonts. Google Fonts được sử dụng miễn phí và có hơn 1000 phông chữ để bạn lựa chọn. Đặc biết là có rất nhiều kiểu Fonts chữ độc lạ trên này nhé!

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

<h1>Minacode</h1>
<p>Kênh chia sẻ kiến thức lập trình miễn phí.</p>
<p>0973999949</p>

</body>
</html>

Ta có:

Các bạn tham khảo thêm trong trang Fonts của Google dưới đây nhé: