The font size in the component should be calculated based on css custom variables

[ZhangChengLin]

All components involving font size (including h1-h6) should now be calculated and designed on the client (browser) through css custom variables (--bs-body-font-size) instead of writing specific value.

It should be done based on the following as base source

bootstrap/scss/_reboot.scss

Line 52 in bde23ae

@include font-size(var(--#{$prefix}body-font-size));

bootstrap/dist/css/bootstrap.css

Line 199 in 344e912

font-size: var(--bs-body-font-size);

Below are some specific local examples, without giving too many examples.
In addition, where em is used as the unit, I am not sure whether it needs to be changed.

bootstrap/dist/css/bootstrap.css

Lines 225 to 266 in 344e912

	h1, .h1 {
	font-size: calc(1.375rem + 1.5vw);
	}
	@media (min-width: 1200px) {
	h1, .h1 {
	font-size: 2.5rem;
	}
	}
	h2, .h2 {
	font-size: calc(1.325rem + 0.9vw);
	}
	@media (min-width: 1200px) {
	h2, .h2 {
	font-size: 2rem;
	}
	}
	h3, .h3 {
	font-size: calc(1.3rem + 0.6vw);
	}
	@media (min-width: 1200px) {
	h3, .h3 {
	font-size: 1.75rem;
	}
	}
	h4, .h4 {
	font-size: calc(1.275rem + 0.3vw);
	}
	@media (min-width: 1200px) {
	h4, .h4 {
	font-size: 1.5rem;
	}
	}
	h5, .h5 {
	font-size: 1.25rem;
	}
	h6, .h6 {
	font-size: 1rem;

bootstrap/dist/css/bootstrap.css

Line 520 in 344e912

font-size: calc(1.275rem + 0.3vw);

bootstrap/dist/css/bootstrap.css

Line 604 in 344e912

font-size: calc(1.625rem + 4.5vw);

The reason is that when the basic font size becomes larger or smaller, the corresponding components should also change accordingly, so that it will not cause misalignment or display problems.
Generally, components do not change after being enlarged, because in the client, some sizes have been given specific values ​​instead of subsequent calculation changes. Although this step will consume the resources of the client, it should not be changed frequently.