La propiedad fontFamily establece/devuelve una lista de nombres de familias de fuentes y nombres de familias genéricas para el texto de un elemento. El navegador web implementará el primer valor que reconozca.
Sintaxis:
- Devuelve la propiedad fontFamily.
object.style.fontFamily
- Establece la propiedad fontFamily.
object.style.fontFamily = "font1, font2, etc.|initial|inherit"
Valores de propiedad:
| Valor | Descripción |
|---|---|
| fuente1, fuente2, etc. | Lista de nombres de familias tipográficas y nombres de familias genéricas separados por una coma. |
| inicial | Establece la propiedad en el valor predeterminado. |
| heredar | Hereda del elemento principal. |
Valor devuelto: Devuelve el número de nombres de familias tipográficas y/o nombres de familias genéricas.
Ejemplo-1: Nombre de la familia de fuentes “Impact” .
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontFamily Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;
font-weight: bold;"
id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontFamily Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set font-family 'impact'.
document.getElementById(
"Geek1").style.fontFamily = "Impact";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Nombre de la familia de fuentes «sans-serif» .
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontFamily Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;
font-weight: bold;" id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontFamily Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set font-family 'sans-serif'.
document.getElementById(
"Geek1").style.fontFamily = "sans-serif";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-3: Nombres de familia de fuentes «Comic Sans MS, cursive, sans-serif» .
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontFamily Property </title>
</head>
<body>
<center>
<p style="color: green;
width: 100%;
font-size: 30px;
font-weight: bold;" id="Geek1">
GeeksForGeeks
</p>
<h2>DOM Style fontFamily Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set font-family 'Comic Sans MS, cursive
// and sans-serif'
document.getElementById(
"Geek1").style.fontFamily =
'Comic Sans MS, cursive, sans-serif';
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: El navegador compatible con HTML | DOM Style fontFamily Property se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 3 y superior
- Mozilla Firefox 1 y superior
- Ópera 3.5 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA