Để đặ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ụngconst 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ìnhbody,
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;
}
4Bạ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-family
1
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-family
3 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-family
4 bạn có thể thêm vào thẻ font-family
5 của tệp font-family
6 của mình
Sau khi bạn sao chép thẻ liên kết trong phần font-family
5 của tệp font-family
6 của bạn trong thư mục font-family
9, 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ì
đều có lề trên. 0 và lề dưới. 1rem [16px theo mặc định].
1rem [16px by default], and its line-height is 1.5. In addition, allelements have margin-top: 0 and margin-bottom: 1rem [16px by default].