fuente Rescale basado en anchura recipiente en CSS

CSS | Cambiar la escala de fuente basado en el ancho de contenedores : Aquí, vamos a aprender a Cambiar la escala de fuentes basado en el ancho de contenedores en el CSS.

Introducción:

Tratar con las fuentes es una cosa muy interesante que hacer cuando las fuentes que ponen en evidencia la aparición de su sitio web o una página web, por lo que debe elegir las fuentes ideales class su sitio web o una página web que ayuda en hacer que su sitio web o página web se vean increíbles. Pero a veces las fuentes también pueden presentar muchos problemas como el cambio de escala que nos lleva al tema que nos ocupa, reescalado la fuente en función del ancho de contenedores en CSS . El problema es muy fácil de resolver, pero antes de seguir adelante con la solución hablemos de fuentes un poco más.

Anécdota:

Fuentes, como se ha dicho anteriormente, se utilizan con regularidad, mientras que el desarrollo de un sitio web o una página web. Por lo tanto, hay que tener mucho cuidado al seleccionar la fuente primaria for su sitio web o una página web, ya que las fuentes se definen cómo sus textos son a parecer a los usuarios y como saben los textos son los elementos más fundamentales de cualquier página web o en la web . Se puede elegir entre una gran variedad de fuentes disponibles, solo una vista previa de su sitio web o una página web en primer lugar al tiempo que la selección for una fuente. La apariencia no es sólo depende del estilo de fuente derecho, sino también el tamaño de la fuente. Usted no quiere que su sitio web o página web que aparezcan en mal estado, por lo tanto, debe tener un tipo de letra de tamaño uniforme for su página web o sitio web. Ahora vamos a discutir cómo podemos cambiar la escala de nuestra fuente basado en el ancho de contenedores en CSS y for tendrá que leer un poco más.

Método:

Para establecer el tamaño de la fuente, se puede hacer uso de la ventana gráfica “VW” unidad que también se conoce como ventana de anchura. La ventana gráfica es el tamaño de su navegador ventana y 1vw = 1% de la anchura de la ventana gráfica. Al hacer uso de esta propiedad el tamaño de fuente será por el tamaño de la ventana del navegador.

Sintaxis:

    element{
font-size:length vw;
}

Ejemplo:

<!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>

salida

Rescale font based on container width in CSS - 4

En el ejemplo anterior, la fuente de tamaño vw se aplica al contenido en el interior del h1 etiqueta.

Sea prudente:

Fácil ¿verdad? Todo lo que tenía que hacer era hacer uso de la propiedad ventana gráfica que ayudaría a cambiar el tamaño de la fuente de acuerdo con la ventana del navegador. Así que adelante y empezar a cambiar el tamaño el tamaño de fuente y empezar a hacer su sitio web o una página web elegante y lista para su uso. Asegúrese de que elige la fuente apropiada for su sitio web o una página web ya que esta propiedad va a cambiar el tamaño de la fuente de acuerdo con la ventana del navegador, por lo tanto, elegir sabiamente.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *