Họ phông chữ React Bootstrap

Để đặt họ phông chữ chung trong React, hãy đặt kiểu font-family trên phần tử html trong tệp index.css của bạn và nhập tệp vào tệp index.js của bạn

CSS toàn cầu phải được nhập vào index.js để đảm bảo rằng nó được tải trên tất cả các trang trong ứng dụng React của bạn

Dưới đây là ví dụ về cách đặt thuộc tính CSS font-family trong tệp index.css của chúng tôi

Và đây là cách chúng tôi sẽ nhập tệp index.css vào tệp index.js của chúng tôi

Ví dụ trên giả định rằng tệp index.css của bạn nằm trong cùng thư mục với tệp index.js của bạn

Khi nhập các tệp CSS chung trong React, cách tốt nhất là nhập tệp CSS vào tệp index.js của bạn

Tệp index.js là điểm vào của ứng dụng React của bạn, vì vậy nó sẽ luôn chạy

Mặt khác, nếu bạn nhập tệp CSS vào một thành phần, các kiểu CSS có thể bị xóa sau khi thành phần của bạn ngắt kết nối

Tôi có thể thêm tệp

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

@font-face {
  font-family: 'Poppins';
  src: local('Poppins'), url(./fonts/Poppins-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Black.ttf) format('truetype');
}

6 với một thành phần để xác minh phông chữ chung được áp dụng

const App = () => {
  return (
    

      
bobbyhadz.com
    

  );
};

export default App;

Sử dụng phông chữ từ tệp cục bộ trong React. js

Nếu bạn đã tải xuống một phông chữ và cần tải phông chữ đó từ một tệp cục bộ, hãy tạo một_______0_______7 trực tiếp trong thư mục

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

@font-face {
  font-family: 'Poppins';
  src: local('Poppins'), url(./fonts/Poppins-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Black.ttf) format('truetype');
}

8 của bạn và di chuyển các phông chữ của bạn đến đó

Bây giờ bạn có thể nhập chúng vào tệp index.css của mình

Ví dụ sau giả định rằng bạn đã tải xuống phông chữ

body, html {
  font-family: 'Square Peg', cursive;
}

0 vào thư mục

body, html {
  font-family: 'Square Peg', cursive;
}

1 của mình

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

@font-face {
  font-family: 'Poppins';
  src: local('Poppins'), url(./fonts/Poppins-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  src: local('Poppins'), url(./fonts/Poppins-Black.ttf) format('truetype');
}

Đối với định dạng

body, html {
  font-family: 'Square Peg', cursive;
}

2, chúng tôi chuyển

body, html {
  font-family: 'Square Peg', cursive;
}

3 cho hàm

body, html {
  font-family: 'Square Peg', cursive;
}

4

Đối với định dạng

body, html {
  font-family: 'Square Peg', cursive;
}

5, chúng tôi chuyển

body, html {
  font-family: 'Square Peg', cursive;
}

6 cho hàm

body, html {
  font-family: 'Square Peg', cursive;
}

4

Đối với định dạng

body, html {
  font-family: 'Square Peg', cursive;
}

8, chúng tôi chuyển

body, html {
  font-family: 'Square Peg', cursive;
}

9 cho hàm

body, html {
  font-family: 'Square Peg', cursive;
}

4

Bạn có thể tải xuống một phông chữ bằng cách chọn một phông chữ từ google fonts và nhấp vào nút font-family1

Sử dụng phông chữ chung từ CDN trong React. js

Nếu bạn đang thiết lập một họ phông chung dựa trên các kiểu bên ngoài, e. g. từ______17_______2 CDN, đảm bảo tải kiểu trong tệp font-family3 của bạn

Ví dụ: với phông chữ google, bạn có thể nhấp vào phông chữ đã chọn và sau đó nhấp vào "Chọn kiểu này" và bạn sẽ nhận được một font-family4 bạn có thể thêm vào thẻ font-family5 của tệp font-family6 của mình

Sau khi bạn sao chép thẻ liên kết trong phần font-family5 của tệp font-family6 của bạn trong thư mục font-family9, bạn vẫn phải đặt thuộc tính font-family trong tệp index.css của mình

body, html {
  font-family: 'Square Peg', cursive;
}

Giá trị của thuộc tính font-family sẽ phụ thuộc vào phông chữ cụ thể mà bạn đã chọn. Bạn sẽ có thể tìm thấy nó ngay bên dưới nơi bạn lấy thẻ liên kết từ đó

React Bootstrap sử dụng phông chữ nào?

Cách thêm phông chữ

Cách thay đổi phông chữ Bootstrap 5

Phông chữ mặc định của Bootstrap 5 là gì