La propiedad de tamaño de fuente en CSS se usa para establecer el tamaño de fuente del texto en un documento HTML.
Sintaxis:
font-size: medium|xx-small|x-small|small|large|x-large
|xx-large|smaller|larger|length|initial|inherit;
Valor por defecto:
- medio
Valores de propiedad:
- tamaño absoluto: el tamaño absoluto se utiliza para establecer el tamaño de fuente de forma absoluta. El valor predeterminado de tamaño absoluto es medio. La lista de propiedades de tamaño absoluto son xx-pequeño, x-pequeño, pequeño, mediano, grande, x-grande, xx-grande .
Sintaxis:
font-size: medium|xx-small|x-small|small|large|x-large|xx-large;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size property
</title>
<!-- CSS style to set font-size property -->
<style>
.xxsmall {
color:green;
font-size:xx-small;
}
.xsmall {
color:green;
font-size:x-small;
}
.small {
color:green;
font-size:small;
}
.medium {
color:green;
font-size:medium;
}
.large {
color:green;
font-size:large;
}
.xlarge {
color:green;
font-size:x-large;
}
.xxlarge {
color:green;
font-size:xx-large;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class = "xxsmall">font-size: xx-small;</div>
<div class = "xsmall">font-size: x-small;</div>
<div class = "small">font-size: small;</div>
<div class = "medium">font-size: medium;</div>
<div class = "large">font-size: large;</div>
<div class = "xlarge">font-size: x-large;</div>
<div class = "xxlarge">font-size: xx-large;</div>
</body>
</html>
Producción:
- tamaño relativo: contiene dos valores más pequeños y más grandes. El tamaño de fuente es más pequeño o más grande depende del elemento principal.
Sintaxis:
font-size: smaller|larger;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size Property
</title>
<!-- CSS property to set font-size -->
<style>
.smaller {
color:green;
font-size:smaller;
}
.larger {
color:green;
font-size:larger;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class = "smaller">font-size: smaller;</div>
<div class = "larger">font-size: larger;</div>
</body>
</html>
Producción:
- longitud: esta propiedad se utiliza para establecer el tamaño de fuente en longitud. La longitud puede ser en forma de px, cm, etc.
Sintaxis:
font-size: length;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size Property
</title>
<!-- CSS property to set font-size -->
<style>
.length {
color:green;
font-size: 40px;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class = "length">font-size: length;</div>
</body>
</html>
Producción:
- global: esta propiedad contiene tres tipos de valores como initial | heredar | desarmado
Sintaxis:
font-size: initial|inherit|unset;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size Property
</title>
<!-- CSS property to set font-size -->
<style>
.length {
color:green;
font-size: initial;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class = "length">font-size: initial;</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de tamaño de fuente se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Safari 1.0
- Ópera 7.0
Publicación traducida automáticamente
Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA