{"id":1249,"date":"2024-08-01T17:17:22","date_gmt":"2024-08-01T15:17:22","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1249"},"modified":"2024-08-01T17:17:22","modified_gmt":"2024-08-01T15:17:22","slug":"20-fuentes-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/20-fuentes-css\/","title":{"rendered":"20. Fuentes CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">La selecci\u00f3n de la fuente es importante<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Elegir la fuente correcta tiene un gran impacto en c\u00f3mo los lectores experimentan un sitio web. La fuente correcta puede crear una fuerte identidad para tu marca. Es importante usar una fuente que sea f\u00e1cil de leer. La fuente agrega valor a tu texto. Tambi\u00e9n es importante elegir el color y el tama\u00f1o de texto correctos para la fuente.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Familias de fuentes gen\u00e9ricas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En CSS hay cinco familias de fuentes gen\u00e9ricas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las fuentes <strong>Serif<\/strong> tienen un peque\u00f1o trazo en los bordes de cada letra. Crean una sensaci\u00f3n de formalidad y elegancia.<\/li>\n\n\n\n<li>Las fuentes <strong>sans-serif<\/strong> tienen l\u00edneas limpias (sin peque\u00f1os trazos adjuntos). Crean un aspecto moderno y minimalista.<\/li>\n\n\n\n<li>Las Fuentes <strong>monospace<\/strong>: aqu\u00ed todas las letras tienen el mismo ancho fijo. Crean un aspecto mec\u00e1nico.<\/li>\n\n\n\n<li>Las fuentes<strong> cursive <\/strong>imitan la escritura humana.<\/li>\n\n\n\n<li>Las fuentes <strong>fantasy<\/strong> son fuentes decorativas\/divertidas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">La propiedad CSS font-family<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En CSS, usamos la propiedad <strong><em>font-family<\/em><\/strong> para especificar la fuente de un texto.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: si el nombre de la fuente es m\u00e1s de una palabra, debe estar entre comillas, como: \u00abTimes New Roman\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sugerencia<\/strong>: la propiedad <strong><em>font-family<\/em><\/strong> debe contener varios nombres de fuente como un sistema de \u00abalternativa\u00bb, para garantizar la m\u00e1xima compatibilidad entre navegadores\/sistemas operativos. Comienza con la fuente que desees y termina con una familia gen\u00e9rica (para permitir que el navegador elija una fuente similar en la familia gen\u00e9rica, si no hay otras fuentes disponibles). Los nombres de las fuentes deben estar separados por comas.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.p1&nbsp;{\n&nbsp; font-family:&nbsp;\"Times New Roman\", Times, serif;\n}\n\n.p2&nbsp;{\n&nbsp; font-family:&nbsp;Arial, Helvetica, sans-serif;\n}\n\n.p3&nbsp;{\n&nbsp; font-family:&nbsp;\"Lucida Console\", \"Courier New\", monospace;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Fuentes web seguras CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las <strong>fuentes web seguras<\/strong> son fuentes que se instalan universalmente en todos los navegadores y dispositivos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fuentes alternativas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sin embargo, no hay fuentes 100% completamente seguras para la web. Siempre existe la posibilidad de que no se encuentre una fuente o no se instale correctamente. Por lo tanto, es muy importante utilizar siempre fuentes alternativas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto significa que debes agregar una lista de \u00abfuentes de respaldo\u00bb similares en la propiedad <strong><em>font-family<\/em><\/strong>. Si la primera fuente no funciona, el navegador probar\u00e1 con la siguiente, y con la siguiente, y as\u00ed sucesivamente. Siempre finaliza la lista con un nombre de familia de fuente gen\u00e9rico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p&nbsp;{\nfont-family:&nbsp;Tahoma, Verdana, sans-serif;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Las mejores fuentes web seguras para HTML y CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La siguiente lista son las mejores fuentes web seguras para HTML y CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arial (sans-serif)<\/li>\n\n\n\n<li>Verdana (sans-serif)<\/li>\n\n\n\n<li>Helvetica (sans-serif)<\/li>\n\n\n\n<li>Tahoma (sans-serif)<\/li>\n\n\n\n<li>Trebuchet MS (sans-serif)<\/li>\n\n\n\n<li>Times New Roman (serif)<\/li>\n\n\n\n<li>Georgia (serif)<\/li>\n\n\n\n<li>Garamond (serif)<\/li>\n\n\n\n<li>Courier New (monospace)<\/li>\n\n\n\n<li>Brush Script MT (cursive)<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: antes de publicar tu sitio web, siempre verifica c\u00f3mo aparecen tus fuentes en diferentes navegadores y dispositivos, \u00a1y siempre usa fuentes alternativas!<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>La selecci\u00f3n de la fuente es importante Elegir la fuente correcta tiene un gran impacto en c\u00f3mo los lectores experimentan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":19,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1249","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La selecci\u00f3n de la fuente es importante Elegir la fuente correcta tiene un gran impacto en c\u00f3mo los lectores experimentan [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1249"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1249\/revisions"}],"predecessor-version":[{"id":1251,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1249\/revisions\/1251"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}