Las fuentes web<\/strong> permiten a los dise\u00f1adores usar fuentes que no est\u00e1n instaladas en la computadora del usuario. Cuando hayas encontrado\/comprado la fuente que deseas usar, simplemente incluye el archivo de fuente en tu servidor web y se descargar\u00e1 autom\u00e1ticamente al usuario cuando lo necesite.<\/p>\n\n\n\n\n\n\n\n Tus propias fuentes son definidas en la regla CSS @font-face<\/em><\/strong>.<\/p>\n\n\n\n TrueType<\/strong> es un est\u00e1ndar de fuente desarrollado a fines de la d\u00e9cada de 1980 por Apple<\/strong> y Microsoft<\/strong>. TrueType<\/strong> es el formato de fuente m\u00e1s com\u00fan para los sistemas operativos Mac OS<\/strong> y Microsoft Windows<\/strong>.<\/p>\n\n\n\n OpenType<\/strong> es un formato para fuentes de computadora escalables. Fue construido en TrueType<\/strong> y es una marca registrada de Microsoft<\/strong>. Las fuentes OpenType<\/strong> se usan com\u00fanmente hoy en d\u00eda en las principales plataformas inform\u00e1ticas.<\/p>\n\n\n\n WOFF<\/strong> es un formato de fuente para usar en p\u00e1ginas web. Fue desarrollado en 2009 y ahora es una recomendaci\u00f3n del W3C<\/strong>. WOFF<\/strong> es esencialmente OpenType<\/strong> o TrueType<\/strong> con compresi\u00f3n y metadatos adicionales. El objetivo es admitir la distribuci\u00f3n de fuentes desde un servidor a un cliente a trav\u00e9s de una red con restricciones de ancho de banda.<\/p>\n\n\n\n Fuente TrueType<\/strong>\/OpenType<\/strong> que proporciona una mejor compresi\u00f3n que WOFF 1.0.<\/strong><\/p>\n\n\n\n Las fuentes SVG<\/strong> permiten usar SVG<\/strong> como glifos<\/strong> al mostrar texto. La especificaci\u00f3n SVG 1.1<\/strong> define un m\u00f3dulo de fuente que permite la creaci\u00f3n de fuentes dentro de un documento SVG<\/strong>. Tambi\u00e9n puede aplicar CSS<\/strong> a documentos SVG<\/strong> y la regla @font-face<\/em><\/strong> se puede aplicar al texto en documentos SVG<\/strong>.<\/p>\n\n\n\n Las fuentes EOT<\/strong> son una forma compacta de fuentes OpenType<\/strong> dise\u00f1adas por Microsoft<\/strong> para su uso como fuentes incrustadas en p\u00e1ginas web.<\/p>\n\n\n\n En la regla @font-face;<\/em><\/strong> primero define un nombre para la fuente (por ejemplo, myFirstFont<\/em><\/strong>) y luego apunta al archivo de fuente.<\/p>\n\n\n\n Sugerencia<\/strong>: utiliza siempre letras min\u00fasculas para la URL de la fuente. Las letras may\u00fasculas pueden dar resultados inesperados en IE.<\/p>\n<\/blockquote>\n\n\n\n Para usar la fuente para un elemento HTML, consulta el nombre de la fuente (myFirstFont<\/em><\/strong>) a trav\u00e9s de la propiedad font-family.<\/em><\/strong><\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Debe agregar otra regla @font-face<\/em><\/strong> que contenga descriptores para texto en negrita.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n El archivo \u00absansation_bold.woff<\/em>\u00bb es otro archivo de fuente que contiene los caracteres en negrita para la fuente Sansation. Los navegadores usar\u00e1n esto siempre que un fragmento de texto con la familia de fuentes \u00abmyFirstFont\u00bb deba mostrarse en negrita. De esta manera, puedes tener muchas reglas @font-face<\/em><\/strong> para la misma fuente.<\/p>\n\n\n\n La regla CSS @font-face Las fuentes web permiten a los dise\u00f1adores usar fuentes que no est\u00e1n instaladas en la computadora […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":8,"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-1402","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 regla CSS @font-face Las fuentes web permiten a los dise\u00f1adores usar fuentes que no est\u00e1n instaladas en la computadora […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1402","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=1402"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1402\/revisions"}],"predecessor-version":[{"id":1405,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1402\/revisions\/1405"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Diferentes formatos de fuentes<\/h2>\n\n\n\n
Fuentes TrueType (TTF)<\/h3>\n\n\n\n
Fuentes Opentype (OTF)<\/h3>\n\n\n\n
El formato Web Open Font (WOFF)<\/h3>\n\n\n\n
WOFF 2.0.<\/h3>\n\n\n\n
SVG<\/h3>\n\n\n\n
Fuentes Embedded OpenType (EOT)<\/h3>\n\n\n\n
Usar la fuente que deseas<\/h2>\n\n\n\n
\n
<!DOCTYPE html>
<html lang=\"es\">
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
<\/style>
<\/head>
<body>
<h2>La regla @font-face<\/h2>
<div>
Con CSS, los sitios web pueden usar fuentes distintas a las fuentes
\"seguras para la web\" preseleccionadas.
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nUsando texto en negrita<\/h2>\n\n\n\n
@font-face {\n font-family: myFirstFont;\n src: url(sansation_bold.woff);\n font-weight: bold;\n}<\/pre>\n\n\n\nResumen<\/h2>\n\n\n\n
Descriptor<\/th> Valores<\/th> Descripci\u00f3n<\/th><\/tr> font-family<\/em><\/strong><\/td> nombre<\/em><\/td> Requerido. Define un nombre para la fuente<\/td><\/tr> src<\/em><\/strong><\/td> URL<\/em><\/td> Requerido. Define la URL de la fuente<\/td><\/tr> font-stretch<\/em><\/strong><\/td> normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded<\/td> Opcional. Define c\u00f3mo se debe estirar la fuente. El valor predeterminado es \u00abnormal\u00bb<\/td><\/tr> font-style<\/em><\/strong><\/td> normalitalicoblique<\/td> Opcional. Define c\u00f3mo se debe dise\u00f1ar la fuente. El valor predeterminado es \u00abnormal\u00bb<\/td><\/tr> font-weight<\/em><\/strong><\/td> normalbold100200300400500600700800900<\/td> Opcional. Define la negrita de la fuente. El valor predeterminado es \u00abnormal\u00bb<\/td><\/tr> unicode-range<\/em><\/strong><\/td> unicode-range<\/em><\/td> Opcional. Define el rango de caracteres UNICODE que admite la fuente. El valor predeterminado es \u00abU+0-10FFFF\u00bb<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"