50. Web Font Trong CSS

Web Font trong CSS:

Web fonts cho phép bạn sử dụng các phông chữ không có sẵn trên máy tính của người dùng khi trình duyệt tải trang web của bạn. Bằng cách sử dụng web fonts, bạn có thể thay đổi phông chữ và tạo phong cách độc đáo cho trang web của mình. Dưới đây là ví dụ về cách sử dụng web font trong CSS:

Sử dụng Google Fonts:

Google Fonts cung cấp nhiều tùy chọn phông chữ miễn phí để bạn có thể sử dụng trong trang web của mình.

html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>
<body>
  <p>This is a sample text using the Open Sans font from Google Fonts.</p>
</body>
</html>

Sử dụng Web Fonts từ máy chủ:

Bạn cũng có thể tải về và lưu trữ các font trực tiếp trên máy chủ của bạn và sử dụng chúng trong trang web.

html

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('mycustomfont.woff2') format('woff2'),
           url('mycustomfont.woff') format('woff');
    }
    body {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <p>This is a sample text using a custom web font stored on the server.</p>
</body>
</html>

Trong ví dụ trên, bạn cần cung cấp đường dẫn đúng đến các tệp font trên máy chủ của bạn.

Sử dụng Web Fonts từ CSS ngoại tuyến:

Bạn cũng có thể nhúng các tệp font vào CSS của bạn bằng cách sử dụng dữ liệu base64 để tạo các @font-face.

css

@font-face {
  font-family: 'MyCustomFont';
  src: url(data:application/font-woff2;base64,...) format('woff2'),
       url(data:application/font-woff;base64,...) format('woff');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Trong ví dụ trên, bạn cần thay thế các dữ liệu base64 bằng dữ liệu thực tế của tệp font.

Lưu ý rằng việc sử dụng web font có thể ảnh hưởng đến tốc độ tải trang web của bạn, do đó hãy đảm bảo rằng bạn tối ưu hóa và chọn các phông chữ phù hợp cho dự án của mình.

Leave a Comment Cancel Reply