{"id":1255,"date":"2024-08-01T17:21:44","date_gmt":"2024-08-01T15:21:44","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1255"},"modified":"2024-08-01T17:21:45","modified_gmt":"2024-08-01T15:21:45","slug":"22-font-style","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/22-font-style\/","title":{"rendered":"22. font-style"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>font-style<\/em><\/strong> se usa principalmente para especificar texto en cursiva. Dicha propiedad puede tener 3 valores:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>normal<\/strong>: el texto es mostrado normal<\/li>\n\n\n\n<li><strong>italic<\/strong>: el texto se muestra en cursiva<\/li>\n\n\n\n<li><strong>oblique<\/strong>: El texto est\u00e1 \u00abinclinado\u00bb (oblicuo es muy similar a cursiva, pero menos compatible)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.normal&nbsp;{\n&nbsp;&nbsp;font-style:&nbsp;normal;\n}\n\np.italic&nbsp;{\n&nbsp;&nbsp;font-style:&nbsp;italic;\n}\n\np.oblique&nbsp;{\n&nbsp; font-style:&nbsp;oblique;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">font-weight<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>font-weight<\/em><\/strong> especifica el peso de una fuente:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.normal&nbsp;{\n&nbsp; font-weight:&nbsp;normal;\n}\n\np.thick&nbsp;{\n&nbsp; font-weight:&nbsp;bold;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">font-variant<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>font-variant<\/em><\/strong> especifica si un texto debe mostrarse o no en letra min\u00fascula. En una fuente <strong><em>small-caps<\/em><\/strong>, todas las letras min\u00fasculas se convierten en letras may\u00fasculas. Sin embargo, las letras may\u00fasculas convertidas aparecen en un tama\u00f1o de fuente m\u00e1s peque\u00f1o que las letras may\u00fasculas originales en el texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.normal&nbsp;{\n&nbsp;&nbsp;font-variant:&nbsp;normal;\n}\n\np.small&nbsp;{\n&nbsp; font-variant:&nbsp;small-caps;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">font-size<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>font-size<\/em><\/strong> establece el <strong>tama\u00f1o del texto<\/strong>. Ser capaz de administrar el tama\u00f1o del texto es importante en el dise\u00f1o web. Sin embargo, no debes usar ajustes de tama\u00f1o de fuente para hacer que los p\u00e1rrafos parezcan encabezados o que los encabezados parezcan p\u00e1rrafos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utiliza siempre las etiquetas HTML adecuadas, como <strong><em>&lt;h1&gt;<\/em><\/strong> &#8211; <strong><em>&lt;h6&gt;<\/em><\/strong> para encabezados y <strong><em>&lt;p&gt;<\/em><\/strong> para p\u00e1rrafos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El valor de <strong><em>font-size<\/em><\/strong> puede ser un tama\u00f1o absoluto o relativo.<\/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 no especificas un tama\u00f1o de fuente, el tama\u00f1o predeterminado para texto normal, como p\u00e1rrafos, es 16px (16px = 1em).<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Tama\u00f1o de fuente con pixeles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ajustar el tama\u00f1o del texto con p\u00edxeles le da un control total sobre el tama\u00f1o del texto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h1&nbsp;{\n&nbsp;&nbsp;font-size:&nbsp;40px;\n}\n\nh2&nbsp;{\n&nbsp;&nbsp;font-size:&nbsp;30px;\n}\n\np&nbsp;{\n&nbsp;&nbsp;font-size:&nbsp;14px;\n}<\/pre>\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>Sugerencia<\/strong>: si usas p\u00edxeles, a\u00fan puedes usar la herramienta de <strong>zoom<\/strong> para cambiar el tama\u00f1o de toda la p\u00e1gina.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliza em<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para permitir a los usuarios cambiar el tama\u00f1o del texto (en el men\u00fa del navegador), muchos desarrolladores usan <strong><em>em<\/em> <\/strong>en lugar de p\u00edxeles. <strong><em>1em<\/em> <\/strong>es igual al tama\u00f1o de fuente actual. El tama\u00f1o de texto predeterminado en los navegadores es <strong><em>16px<\/em><\/strong>. Entonces, el tama\u00f1o predeterminado de <strong><em>1em<\/em><\/strong> es <strong><em>16px<\/em><\/strong>. El tama\u00f1o se puede calcular de p\u00edxeles a em usando esta f\u00f3rmula: <strong><em>pixels\/16=em<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h1&nbsp;{\n&nbsp; font-size:&nbsp;2.5em;&nbsp;\/* 40px\/16=2.5em *\/\n}\n\nh2&nbsp;{\n&nbsp;&nbsp;font-size:&nbsp;1.875em;&nbsp;\/* 30px\/16=1.875em *\/\n}\n\np&nbsp;{\n&nbsp; font-size:&nbsp;0.875em;&nbsp;\/* 14px\/16=0.875em *\/\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo anterior, el tama\u00f1o del texto en <strong><em>em<\/em> <\/strong>es el mismo que el ejemplo anterior en p\u00edxeles. Sin embargo, con el tama\u00f1o <strong><em>em<\/em><\/strong>, es posible ajustar el tama\u00f1o del texto en todos los navegadores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desafortunadamente, todav\u00eda hay un problema con las versiones anteriores de <strong>Internet Explorer<\/strong>. El texto se vuelve m\u00e1s grande de lo que deber\u00eda cuando se hace m\u00e1s grande y m\u00e1s peque\u00f1o de lo que deber\u00eda cuando se hace m\u00e1s peque\u00f1o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Usar una combinaci\u00f3n de porcentaje y em<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La soluci\u00f3n que funciona en todos los navegadores es establecer un tama\u00f1o de fuente predeterminado en porcentaje para el elemento <strong><em>&lt;body&gt;<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">body&nbsp;{\n&nbsp; font-size:&nbsp;100%;\n}\n\nh1&nbsp;{\n&nbsp; font-size:&nbsp;2.5em;\n}\n\nh2&nbsp;{\n&nbsp;&nbsp;font-size:&nbsp;1.875em;\n}\n\np&nbsp;{\n&nbsp; font-size:&nbsp;0.875em;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Nuestro c\u00f3digo ahora funciona muy bien! Muestra el mismo tama\u00f1o de texto en todos los navegadores y permite que todos los navegadores hagan zoom o cambien el tama\u00f1o del texto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tama\u00f1o de fuente Responsive<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El tama\u00f1o del texto se puede configurar con una unidad <strong><em>vw<\/em><\/strong>, lo que significa el <strong>ancho de la ventana gr\u00e1fica<\/strong>. De esa forma, el tama\u00f1o del texto seguir\u00e1 el tama\u00f1o de la ventana del navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;body&gt;\n\n&lt;h1 style=\"font-size:10vw;\"&gt;Responsive Text&lt;\/h1&gt;\n\n&lt;p style=\"font-size:5vw;\"&gt;Resize the browser window to see how the text size scales.&lt;\/p&gt;\n\n&lt;p style=\"font-size:5vw;\"&gt;Use the \"vw\" unit when sizing the text. \n10vw will set the size to 10% of the viewport width.&lt;\/p&gt;\n\n&lt;p&gt;Viewport is the browser window size. 1vw = 1% of viewport width. \nIf the viewport is 50cm wide, 1vw is 0.5cm.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Viewport<\/em> <\/strong>es el tama\u00f1o de la ventana del navegador. 1vw = 1% del ancho de la ventana gr\u00e1fica. Si la ventana gr\u00e1fica tiene 50 cm de ancho, 1vw es 0,5 cm.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La propiedad font-style se usa principalmente para especificar texto en cursiva. Dicha propiedad puede tener 3 valores:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":21,"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-1255","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 propiedad font-style se usa principalmente para especificar texto en cursiva. Dicha propiedad puede tener 3 valores:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1255","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=1255"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1255\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1255\/revisions\/1257"}],"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=1255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}