css圆在中心根据宽度缩放_根据CSS中的容器宽度重新缩放字体

css圆在中心根据宽度缩放

Introduction:

介绍：

Dealing with fonts is a very interesting thing to do as fonts bring out the appearance of your website or a web page so you must choose the ideal fonts for your website or web page that helps in making your website or web page look amazing. But sometimes fonts can also pose many problems like rescaling which brings us to the topic at hand, rescaling the font based on the container width in CSS. The problem is very easy to solve but before we move further with the solution let us talk about fonts a little bit more.

处理字体是一件非常有趣的事情，因为字体会带出网站或网页的外观，因此您必须为网站或网页选择理想的字体，这有助于使网站或网页看起来很棒。但是有时字体也可能带来许多问题，例如重新缩放，这使我们进入了当前的话题， 根据CSS中的容器宽度重新缩放字体 。这个问题很容易解决，但是在我们进一步解决之前，让我们先谈谈字体。

Trivia:

琐事：

Fonts, as said earlier, are used regularly while developing a website or a web page. So, you must be very careful while selecting the primary font for your website or web page because fonts would define how your texts are gonna look like to the users and as you are aware the texts are the most fundamental elements of any website or web page. You can choose from an array of fonts available, just preview your website or web page first while making the selection for a font. The appearance is not only dependent on the right font style but also the size of the font. You don’t want your website or web page to appear shabby, therefore you must have a uniform-sized font for your web page or website. Now let us discuss how can we rescale our font based on container width in CSS and for you will need to read a bit more.

如前所述，在开发网站或网页时经常使用字体。因此，在选择网站或网页的主要字体时必须非常小心，因为字体会定义文本对用户的外观，并且您知道文本是任何网站或网页的最基本元素。您可以从可用的字体数组中进行选择，只是在选择字体时先预览您的网站或网页。外观不仅取决于正确的字体样式，而且还取决于字体的大小。您不希望您的网站或网页显得破旧，因此您必须为网页或网站使用统一大小的字体。现在让我们讨论如何根据CSS中的容器宽度重新调整字体，因为您将需要内容。

Method:

方法：

To set the font size, you can make use of viewport "VW" unit which is also known as viewport width. The viewport is the size of your window browser and 1vw = 1% of the viewport width. By making use of this property your font size will be by the browser window size.

要设置字体大小，可以使用视口“ VW”单位，也称为视口宽度。视口是窗口浏览器的大小，并且1vw =视口宽度的1％。通过使用此属性，您的字体大小将取决于浏览器窗口的大小。

Syntax:

句法：

    element{
font-size:length vw;
}

Example:

例：

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
h1 {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Rescale font based on container width in CSS</h1>
<center>
<img src="img_forest.jpg" width="240" height="184">
</center>
<p>
By making use of this property your font size will be in 
accordance with the browser window size.</p>
</body>
</html>

Output

输出量

Rescale font based on container width in CSS | Example

In the above example, font-size vw is applied to the content inside the h1 tag.

在上面的示例中，将font-size vw应用于h1标签内的内容。

Be wise:

聪明点：

Easy right? All you had to do was make use of Viewport property that would help in resizing the font according to the browser window. So go ahead and start resizing your font size and start making your website or webpage stylish and ready to deploy. Make sure that you choose the appropriate font for your website or webpage as this property will change the size of your font according to the browser window, therefore, choose wisely.

容易吧？您所要做的就是利用Viewport属性，该属性将有助于根据浏览器窗口调整字体大小。因此，开始调整字体大小，开始使您的网站或网页外观时尚并可以部署。确保为网站或网页选择合适的字体，因为此属性将根据浏览器窗口更改字体大小，因此，请明智选择。