Cualesquiera que sean las aplicaciones web o los sitios web que hacemos hoy en día, nos aseguramos de que sean compatibles con todos los tamaños de pantalla. Entonces, CSS viene con la propiedad font-optical-sizing que establece si el texto que se representa está optimizado para diferentes tamaños de pantalla o no. Permite que el navegador ajuste el contorno del glifo de la fuente para hacerlos más elegibles en diferentes tamaños.
Si una fuente admite la propiedad font-optical-sizing , usar esto sería la forma más eficiente de dimensionarla ópticamente. Si hablamos de la fuente que admite esta propiedad, entonces podemos decir que todas las fuentes variables admiten esta propiedad. Para aquellas fuentes que tienen un eje de variación de tamaño óptico, el tamaño óptico se habilita por defecto.
Sintaxis:
La sintaxis de la propiedad font-optical-sizing es la siguiente.
font-optical-sizing: value;
Valores de propiedad: Esta propiedad acepta los valores de propiedad que se describen a continuación.
- keyword_values: El valor de esta propiedad se refiere a los valores definidos por «auto», «ninguno», etc.
- valores_globales: el valor de esta propiedad se refiere a los valores definidos por «heredar», «inicial», «no establecido».
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la propiedad font-optical-sizing utilizando el valor de propiedad » auto «. La página web se ajusta para mantener la forma de los glifos o caracteres para una visualización óptima.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: green;
padding: 5px;
font-weight: bold;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>Hello GeeksforGeeks!</p>
</body>
</html>
Producción:
configuración automática
Ejemplo 2: a continuación se muestra el ejemplo que ilustra la propiedad font-optical-sizing utilizando el valor » inicial «.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: green;
padding: 6px;
font-weight: bold;
font-style: italic;
font-optical-sizing: initial;
}
</style>
</head>
<body>
<p>Welcome to this Computer Science portal</p>
</body>
</html>
Producción:
ajuste inicial
Publicación traducida automáticamente
Artículo escrito por cyber_psych0 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA