Fuentes seguras para la web: las fuentes seguras para la web son aquellas fuentes que generalmente se instalan en todos los navegadores y sistemas operativos. Algunos ejemplos de fuentes que se pueden usar como fuentes seguras para la Web son los siguientes.
- verdana
- Georgia
- Arial
- Serif
- sans-serif
- Times New Roman
- Cándara
- Calibri
- óptimo
- Lucida brillante
Fuentes alternativas: ninguna fuente es 100% segura para la web. Siempre existe la posibilidad de que la fuente que trata como una fuente Web Safe no esté instalada correctamente. En tal situación, usamos algunas fuentes para la copia de seguridad y esas fuentes se denominan fuentes de respaldo.
A continuación, se muestran algunos ejemplos de fuentes que se suelen utilizar como fuentes alternativas.
- Cursivo
- Fantasía
- monoespaciado
- Qahiri
Nota: Todas las fuentes que se usan como fuentes seguras para la web también se pueden usar como fuentes alternativas.
Sintaxis:
Selector {
font-family: font-1, font-2, font-3;
}
- font-1 será nuestra fuente segura para la web.
- font-2 y font-3 serán nuestra fuente alternativa.
Puede agregar tantas fuentes alternativas como desee.
Explicación: Se mostrará la fuente-1, pero debido a alguna razón, la fuente-1 no está disponible en ningún navegador o sistema operativo, en ese caso se utilizará la fuente-2. Si la fuente 2 tampoco está disponible, se utilizará la fuente 3 y así sucesivamente.
Ejemplo 1: el siguiente código muestra una fuente web segura para el elemento «p».
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Google Fonts -->
<!--We used Google font. You can also download
any font and then use it --->
<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin>
<link href=
"https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
<style>
p{
font-family: Roboto, sans-serif;
}
/* When the font name is more than one word,
it must be in quotation marks like: "Lucida Console" */
</style>
</head>
<body>
<p>Welcome to Geeks for Geeks</p>
</body>
</html>
Producción:
Ejemplo 2: cuando una fuente segura para la web no está disponible, se utilizará la fuente alternativa.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Google Fonts -->
<!-- You can also download any font and then use it -->
<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com" crossorigin>
<link href=
"https://fonts.googleapis.com/css2?family=Qahiri&display=swap"
rel="stylesheet">
<title>Web Safe font and fallback font</title>
<style>
p{
font-family: sans-serif,'Qahiri';
}
/* Qahiri will be implemented when web safe font
i.e sans-serif is not available */
/* When the font name is more than one word,
it must be in quotation marks, like: "Lucida Console" */
</style>
</head>
<body>
<p>Welcome to Geeks for Geeks</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por satwiksuman y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA