CSS Fonts

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    4 thg 11, 2022

  • Số lượt xem

    433 lượt xem


CSS Fonts cung cấp các thuộc tính để thay đổi font family, font size, font style,...

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-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

Lưu ý: Giá trị font-sizefont-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;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.