{"id":82005,"date":"2022-10-20T03:36:34","date_gmt":"2022-10-20T01:36:34","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/utilice-tipografia-avanzada-con-fuentes-locales\/"},"modified":"2020-09-16T14:55:58","modified_gmt":"2020-09-16T17:55:58","slug":"utilice-tipografia-avanzada-con-fuentes-locales","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/","title":{"rendered":"Verwenden Sie erweiterte Typografie mit lokalen Schriftarten"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Fuentes-seguras-para-la-web\" >Fuentes seguras para la web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Fuentes-web\" >Fuentes web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Fuentes-locales-como-vector-de-huella-digital\" >Fuentes locales como vector de huella digital<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#La-API-de-acceso-a-fuentes-locales\" >La API de acceso a fuentes locales<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#%C2%BFPor-que-necesitamos-la-API-de-acceso-a-fuentes-locales-cuando-hay-fuentes-web\" >\u00bfPor qu\u00e9 necesitamos la API de acceso a fuentes locales cuando hay fuentes web?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Estado-actual\" >Estado actual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Como-utilizar-la-API-de-acceso-a-fuentes-locales\" >C\u00f3mo utilizar la API de acceso a fuentes locales<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Habilitacion-a-traves-de-chrome-flags\" >Habilitaci\u00f3n a trav\u00e9s de chrome: \/\/ flags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Deteccion-de-caracteristicas\" >Detecci\u00f3n de caracter\u00edsticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Pidiendo-permiso\" >Pidiendo permiso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Enumeracion-de-fuentes-locales\" >Enumeraci\u00f3n de fuentes locales<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Accediendo-a-datos-SFNT\" >Accediendo a datos SFNT<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Manifestacion\" >Manifestaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Consideraciones-de-privacidad\" >Consideraciones de privacidad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Seguridad-y-permisos\" >Seguridad y permisos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Control-de-usuario\" >Control de usuario<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Transparencia\" >Transparencia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Persistencia-de-permisos\" >Persistencia de permisos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Realimentacion\" >Realimentaci\u00f3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Cuentanos-sobre-el-diseno-de-la-API\" >Cu\u00e9ntanos sobre el dise\u00f1o de la API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Informar-un-problema-con-la-implementacion\" >Informar un problema con la implementaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Mostrar-apoyo-a-la-API\" >Mostrar apoyo a la API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Enlaces-Utiles\" >Enlaces \u00datiles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#Agradecimientos\" >Agradecimientos<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Descubra c\u00f3mo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del usuario y obtener detalles de bajo nivel sobre ellas.<\/p>\n<p>\n          <time>24 de agosto de 2020<\/time><\/p>\n<\/header>\n<div class=\"w-aside w-aside--note\">\n<p>La API de acceso a fuentes locales es parte de<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/capabilities\">proyecto de capacidades<\/a><br \/>\ny actualmente est\u00e1 en desarrollo.  Esta publicaci\u00f3n se actualizar\u00e1 a medida que avance la implementaci\u00f3n.<\/p>\n<\/div>\n<h2 id=\"web-safe-fonts\"><span class=\"ez-toc-section\" id=\"Fuentes-seguras-para-la-web\"><\/span>Fuentes seguras para la web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si ha estado haciendo desarrollo web el tiempo suficiente, puede recordar el llamado <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Styling_text\/Fundamentals#Web_safe_fonts\">fuentes web seguras<\/a>.  Se sabe que estas fuentes est\u00e1n disponibles en casi todas las instancias de los sistemas operativos m\u00e1s utilizados (a saber, Windows, macOS, las distribuciones de Linux m\u00e1s comunes, Android e iOS).  A principios de la d\u00e9cada de 2000, Microsoft incluso encabez\u00f3 un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/web.archive.org\/web\/20020124085641\/http:\/\/www.microsoft.com\/typography\/fontpack\/default.htm\">iniciativa<\/a> llamado <em>Fuentes principales TrueType para la Web<\/em> que proporcion\u00f3 estas fuentes para su descarga gratuita con el objetivo de que <em>\u00absiempre que visite un sitio web que los especifique, ver\u00e1 las p\u00e1ginas exactamente como las concibi\u00f3 el dise\u00f1ador del sitio\u00bb<\/em>.  S\u00ed, esto incluy\u00f3 los sitios establecidos en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/typography\/font-list\/comic-sans-ms\">Comic Sans MS<\/a>.  Aqu\u00ed hay una pila cl\u00e1sica de fuentes seguras para la web (con el \u00faltimo recurso de<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family#%3Cgeneric-name%3E:~:text=sans%2Dserif,-Glyphs\"><code>sans-serif<\/code><\/a><\/p>\n<p>fuente) podr\u00eda verse as\u00ed:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> Helvetica<span class=\"token punctuation\">,<\/span> Arial<span class=\"token punctuation\">,<\/span> sans-serif<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"web-fonts\"><span class=\"ez-toc-section\" id=\"Fuentes-web\"><\/span>Fuentes web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Los d\u00edas en los que las fuentes web seguras realmente importaban han quedado atr\u00e1s.  Hoy tenemos <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Styling_text\/Web_fonts\">fuentes web<\/a>, algunas de las cuales son incluso fuentes variables que podemos modificar a\u00fan m\u00e1s cambiando los valores de los distintos ejes expuestos.  Puede utilizar fuentes web declarando un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\"><code>@font-face<\/code><\/a><\/p>\n<p>bloque al comienzo del CSS, que especifica el archivo o archivos de fuentes que se descargar\u00e1n:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@font-face<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"FlamboyantSansSerif\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">src<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string url\">\"flamboyant.woff2\"<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Despu\u00e9s de esto, puede usar la fuente web personalizada especificando el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family\"><code>font-family<\/code><\/a>, como normal:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"FlamboyantSansSerif\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"local-fonts-as-fingerprint-vector\"><span class=\"ez-toc-section\" id=\"Fuentes-locales-como-vector-de-huella-digital\"><\/span>Fuentes locales como vector de huella digital <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La mayor\u00eda de las fuentes web provienen, bueno, de la web.  Un hecho interesante, sin embargo, es que el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/src\"><code>src<\/code><\/a><\/p>\n<p>propiedad en el <code>@font-face<\/code> declaraci\u00f3n, aparte de la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/src#Values:~:text=%3Curl%3E%20%5B%20format(%20%3Cstring%3E%23%20)%20%5D%3F,-Specifies\"><code>url()<\/code><\/a><\/p>\n<p>funci\u00f3n, tambi\u00e9n acepta una<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/src#format():~:text=downloaded.-,%3Cfont%2Dface%2Dname%3E\"><code>local()<\/code><\/a><\/p>\n<p>funci\u00f3n.  Esto permite que las fuentes personalizadas se carguen (\u00a1sorpresa!) Localmente.  Si el usuario tiene <em>FlamboyantSansSerif<\/em> instalado en su sistema operativo, se utilizar\u00e1 la copia local en lugar de descargarla:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@font-face<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"FlamboyantSansSerif\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">src<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">local<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"FlamboyantSansSerif\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token url\"><span class=\"token function\">url<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string url\">\"flamboyant.woff2\"<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Este enfoque proporciona un buen mecanismo de respaldo que potencialmente ahorra ancho de banda.  En Internet, lamentablemente, no podemos tener cosas bonitas.  El problema con el <code>local()<\/code> La funci\u00f3n es que se puede abusar de \u00e9l para la toma de huellas digitales del navegador.  Resulta que la lista de fuentes que ha instalado un usuario puede resultar bastante identificable.  Muchas empresas tienen sus propias fuentes corporativas que se instalan en las computadoras port\u00e1tiles de los empleados.  Por ejemplo, Google tiene una fuente corporativa llamada <em>Google Sans<\/em>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='google-sans-8646559' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/google-sans-8646559.png' alt=\"La aplicaci\u00f3n macOS Font Book que muestra una vista previa de la fuente Google Sans.\"><figcaption class=\"w-figcaption\">\n<p>    La fuente Google Sans instalada en la computadora port\u00e1til de un empleado de Google.<br \/>\n  <\/figcaption><\/figure>\n<p>Un atacante puede intentar determinar para qu\u00e9 empresa trabaja alguien probando la existencia de una gran cantidad de fuentes corporativas conocidas como <em>Google Sans<\/em>.  El atacante intentar\u00eda representar el texto establecido en estas fuentes en un lienzo y medir los glifos.  Si los glifos coinciden con la forma conocida de la fuente corporativa, el atacante tiene \u00e9xito.  Si los glifos no coinciden, el atacante sabe que se utiliz\u00f3 una fuente de reemplazo predeterminada ya que la fuente corporativa no se instal\u00f3.  Para obtener detalles completos sobre este y otros ataques de huellas dactilares del navegador, lea el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www-sop.inria.fr\/members\/Nataliia.Bielova\/papers\/Lape-etal-20-TWEB.pdf\">papel de encuesta<\/a> por Laperdix <em>et al.<\/em><\/p>\n<p>Aparte de las fuentes de la empresa, incluso solo la lista de fuentes instaladas puede identificarse.  La situaci\u00f3n con este vector de ataque se ha vuelto tan mala que recientemente el equipo de WebKit <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webkit.org\/tracking-prevention\/#table-of-contents-toggle:~:text=Changed%20font%20availability%20to%20web%20content,but%20not%20locally%20user%2Dinstalled%20fonts\">decidido<\/a> a <em>\u00absolo incluye [in the list available fonts] fuentes web y fuentes que vienen con el sistema operativo, pero no fuentes instaladas por el usuario localmente \u00ab<\/em>.  (Y aqu\u00ed estoy, con un art\u00edculo sobre c\u00f3mo otorgar acceso a fuentes locales).<\/p>\n<h2 id=\"the-local-font-access-api\"><span class=\"ez-toc-section\" id=\"La-API-de-acceso-a-fuentes-locales\"><\/span>La API de acceso a fuentes locales <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es posible que el comienzo de este art\u00edculo te haya puesto de mal humor.  \u00bfRealmente no podemos tener cosas bonitas?  No temas.  Creemos que podemos, y tal vez <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/hyperboleandahalf.blogspot.com\/2013\/05\/depression-part-two.html#Blog1:~:text=like-,hopeless\">no todo es desesperado<\/a>.  Pero primero, d\u00e9jame responder una pregunta que quiz\u00e1s te est\u00e9s preguntando.<\/p>\n<h3 id=\"why-do-we-need-the-local-font-access-api-when-there-are-web-fonts\"><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-necesitamos-la-API-de-acceso-a-fuentes-locales-cuando-hay-fuentes-web\"><\/span>\u00bfPor qu\u00e9 necesitamos la API de acceso a fuentes locales cuando hay fuentes web? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hist\u00f3ricamente, las herramientas de dise\u00f1o y gr\u00e1ficos de calidad profesional han sido dif\u00edciles de ofrecer en la web.  Un obst\u00e1culo ha sido la imposibilidad de acceder y utilizar la variedad completa de fuentes sugeridas y construidas por profesionales que los dise\u00f1adores han instalado localmente.  Las fuentes web habilitan algunos casos de uso de publicaci\u00f3n, pero no habilitan el acceso mediante programaci\u00f3n a las formas de glifos vectoriales y las tablas de fuentes utilizadas por los rasterizadores para representar los contornos de glifos.  Asimismo, no hay forma de acceder a los datos binarios de una fuente web.<\/p>\n<ul>\n<li>Las herramientas de dise\u00f1o necesitan acceso a bytes de fuente para realizar su propia implementaci\u00f3n de dise\u00f1o OpenType y permitir que las herramientas de dise\u00f1o se conecten en niveles inferiores, para acciones como realizar filtros vectoriales o transformaciones en las formas de glifos.<\/li>\n<li>Los desarrolladores pueden tener pilas de fuentes heredadas para sus aplicaciones que est\u00e1n trayendo a la web.  Para usar estas pilas, generalmente requieren acceso directo a los datos de fuentes, algo que las fuentes web no proporcionan.<\/li>\n<li>Es posible que algunas fuentes no tengan licencia para su distribuci\u00f3n a trav\u00e9s de la web.  Por ejemplo, Linotype tiene una licencia para algunas fuentes que solo incluye <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linotype.com\/25\/font-licensing.html\">uso de escritorio<\/a>.<\/li>\n<\/ul>\n<p>La API de acceso a fuentes locales es un intento de resolver estos desaf\u00edos.  Est\u00e1 formado por dos partes:<\/p>\n<ul>\n<li>UNA <strong>API de enumeraci\u00f3n de fuentes<\/strong>, que permite a los usuarios otorgar acceso al conjunto completo de fuentes del sistema disponibles.<\/li>\n<li>A partir de cada resultado de enumeraci\u00f3n, la capacidad de solicitar un nivel bajo (orientado a bytes) <strong>Acceso al contenedor SFNT<\/strong> que incluye los datos completos de la fuente.<\/li>\n<\/ul>\n<h3 id=\"status\"><span class=\"ez-toc-section\" id=\"Estado-actual\"><\/span>Estado actual <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w-table-wrapper\">\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Paso<\/th>\n<th>Estado<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1. Crea un explicador<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/local-font-access\">Completar<\/a><\/td>\n<\/tr>\n<tr>\n<td>2. Crear borrador inicial de especificaci\u00f3n<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/local-font-access\/\">En progreso<\/a><\/td>\n<\/tr>\n<tr>\n<td>3. Recopile comentarios y repita el dise\u00f1o<\/td>\n<td>En progreso<\/td>\n<\/tr>\n<tr>\n<td>4. Prueba de origen<\/td>\n<td>No empezado<\/td>\n<\/tr>\n<tr>\n<td>5. Lanzamiento<\/td>\n<td>No empezado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3 id=\"how-to-use-the-local-font-access-api\"><span class=\"ez-toc-section\" id=\"Como-utilizar-la-API-de-acceso-a-fuentes-locales\"><\/span>C\u00f3mo utilizar la API de acceso a fuentes locales <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"enabling-via-chrome:flags\"><span class=\"ez-toc-section\" id=\"Habilitacion-a-traves-de-chrome-flags\"><\/span>Habilitaci\u00f3n a trav\u00e9s de chrome: \/\/ flags <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Para experimentar localmente con la API de acceso a fuentes locales, habilite <code>#font-access<\/code> bandera en <code>chrome:\/\/flags<\/code>.<\/p>\n<h4 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Deteccion-de-caracteristicas\"><\/span>Detecci\u00f3n de caracter\u00edsticas <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Para comprobar si la API de acceso a fuentes locales es compatible, utilice:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'fonts'<\/span> <span class=\"token keyword\">in<\/span> navigator<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"asking-for-permission\"><span class=\"ez-toc-section\" id=\"Pidiendo-permiso\"><\/span>Pidiendo permiso <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>El acceso a las fuentes locales de un usuario se bloquea detr\u00e1s del <code>\"local-fonts\"<\/code> permiso, que puede solicitar con<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/permissions\/#requesting-more-permission\"><code>navigator.permissions.request()<\/code><\/a>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> status <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span><span class=\"token function\">request<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>name<span class=\"token operator\">:<\/span> <span class=\"token string\">'local-fonts'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>status<span class=\"token punctuation\">.<\/span>state <span class=\"token operator\">!==<\/span> <span class=\"token string\">'granted'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Permission to access local fonts not granted.'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">!==<\/span> <span class=\"token string\">'TypeError'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">throw<\/span> err<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--warning\">\n<p><strong>Advertencia:<\/strong><br \/>\nEn esta fase inicial de desarrollo de la API de acceso a fuentes locales, el permiso mencionado anteriormente a\u00fan no est\u00e1 implementado.  Mientras tanto, aparecer\u00e1 un mensaje de permiso en el momento en que comience la enumeraci\u00f3n de fuentes.  Este comportamiento se implement\u00f3 en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/1112552\">crbug.com\/1112552<\/a>.<\/p>\n<\/div>\n<h4 id=\"enumerating-local-fonts\"><span class=\"ez-toc-section\" id=\"Enumeracion-de-fuentes-locales\"><\/span>Enumeraci\u00f3n de fuentes locales <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Una vez concedido el permiso, puede, desde el <code>FontManager<\/code> interfaz que se expone en <code>navigator.fonts<\/code>, llamada <code>query()<\/code> para solicitar al navegador las fuentes instaladas localmente.  Esto da como resultado un iterador asincr\u00f3nico que puede recorrer en un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/for-await...of\"><code>for await...of<\/code><\/a><\/p>\n<p>declaraci\u00f3n.  Cada fuente se representa como <code>FontMetadata<\/code> objeto con las propiedades<br \/>\n<code>family<\/code> (por ejemplo, <code>\"Comic Sans MS\"<\/code>), <code>fullName<\/code> (por ejemplo, <code>\"Comic Sans MS\"<\/code>), y <code>postscriptName<\/code> (por ejemplo, <code>\"ComicSansMS\"<\/code>).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> fonts <span class=\"token operator\">=<\/span> navigator<span class=\"token punctuation\">.<\/span>fonts<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> metadata <span class=\"token keyword\">of<\/span> fonts<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>metadata<span class=\"token punctuation\">.<\/span>postscriptName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>metadata<span class=\"token punctuation\">.<\/span>fullName<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>metadata<span class=\"token punctuation\">.<\/span>family<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> err<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"accessing-sfnt-data\"><span class=\"ez-toc-section\" id=\"Accediendo-a-datos-SFNT\"><\/span>Accediendo a datos SFNT <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Completo <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/SFNT\">SFNT<\/a><br \/>\nel acceso est\u00e1 disponible a trav\u00e9s del <code>blob()<\/code> m\u00e9todo del <code>FontMetadata<\/code> objeto.  SFNT es un formato de archivo de fuente que puede contener otras fuentes, como fuentes PostScript, TrueType, OpenType, Web Open Font Format (WOFF) y otras.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> fonts <span class=\"token operator\">=<\/span> navigator<span class=\"token punctuation\">.<\/span>fonts<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> metadata <span class=\"token keyword\">of<\/span> fonts<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>metadata<span class=\"token punctuation\">.<\/span>family <span class=\"token operator\">!==<\/span> <span class=\"token string\">'Comic Sans MS'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">continue<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">const<\/span> sfnt <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> metadata<span class=\"token punctuation\">.<\/span><span class=\"token function\">blob<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> sfntVersion <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token keyword\">await<\/span> sfnt<span class=\"token punctuation\">.<\/span><span class=\"token function\">slice<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">arrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">let<\/span> outlineFormat <span class=\"token operator\">=<\/span> <span class=\"token string\">'UNKNOWN'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">switch<\/span> <span class=\"token punctuation\">(<\/span>sfntVersion<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">'x00x01x00x00'<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">'true'<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">'typ1'<\/span><span class=\"token operator\">:<\/span><br>outlineFormat <span class=\"token operator\">=<\/span> <span class=\"token string\">'truetype'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">'OTTO'<\/span><span class=\"token operator\">:<\/span><br>outlineFormat <span class=\"token operator\">=<\/span> <span class=\"token string\">'cff'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Outline format:'<\/span><span class=\"token punctuation\">,<\/span> outlineFormat<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> err<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"demo\"><span class=\"ez-toc-section\" id=\"Manifestacion\"><\/span>Manifestaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Puede ver la API de acceso a fuentes locales en acci\u00f3n en el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/local-font-access.glitch.me\/demo\/\">manifestaci\u00f3n<\/a> abajo.  Aseg\u00farese de consultar tambi\u00e9n el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/local-font-access?path=README.md%3A1%3A0\">c\u00f3digo fuente<\/a>.  La demostraci\u00f3n muestra un elemento personalizado llamado <code>&lt;font-select&gt;<\/code> que implementa un selector de fuentes local.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/local-font-access?path=index.html&amp;previewSize=100\" title=\"local-font-access on Glitch\" allow=\"local-fonts\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h2 id=\"privacy-considerations\"><span class=\"ez-toc-section\" id=\"Consideraciones-de-privacidad\"><\/span>Consideraciones de privacidad <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>los <code>\"local-fonts\"<\/code> el permiso parece proporcionar una superficie altamente imprimible.  Sin embargo, los navegadores pueden devolver lo que quieran.  Por ejemplo, los navegadores centrados en el anonimato pueden optar por proporcionar solo un conjunto de fuentes predeterminadas integradas en el navegador.  De manera similar, los navegadores no est\u00e1n obligados a proporcionar datos de tabla exactamente como aparecen en el disco.<\/p>\n<p>Siempre que sea posible, la API de acceso a fuentes locales est\u00e1 dise\u00f1ada para exponer exactamente la informaci\u00f3n necesaria para habilitar los casos de uso mencionados.  Las API del sistema pueden producir una lista de fuentes instaladas no en un orden aleatorio o ordenado, sino en el orden de instalaci\u00f3n de fuentes.  Devolver exactamente la lista de fuentes instaladas proporcionada por dicha API del sistema puede exponer datos adicionales que pueden usarse para la toma de huellas digitales, y los casos de uso que queremos habilitar no son asistidos por retener este orden.  Como resultado, esta API requiere que los datos devueltos se ordenen antes de ser devueltos.<\/p>\n<h2 id=\"security-and-permissions\"><span class=\"ez-toc-section\" id=\"Seguridad-y-permisos\"><\/span>Seguridad y permisos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Chrome ha dise\u00f1ado e implementado la API de acceso a fuentes locales utilizando los principios b\u00e1sicos definidos en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/lkgr\/docs\/security\/permissions-for-powerful-web-platform-features.md\">Controlar el acceso a las potentes funciones de la plataforma web<\/a>, incluido el control del usuario, la transparencia y la ergonom\u00eda.<\/p>\n<h3 id=\"user-control\"><span class=\"ez-toc-section\" id=\"Control-de-usuario\"><\/span>Control de usuario <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El acceso a las fuentes de un usuario est\u00e1 totalmente bajo su control y no se permitir\u00e1 a menos que el <code>\"local-fonts\"<\/code> permiso, como se indica en el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/permissions\/#permission-registry\">registro de permisos<\/a>, se concede.<\/p>\n<h3 id=\"transparency\"><span class=\"ez-toc-section\" id=\"Transparencia\"><\/span>Transparencia <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si a un sitio se le ha otorgado acceso a las fuentes locales del usuario, ser\u00e1 visible en el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/chrome\/answer\/114662?hl=en&amp;co=GENIE.Platform=Desktop\">hoja de informaci\u00f3n del sitio<\/a>.<\/p>\n<h3 id=\"permission-persistence\"><span class=\"ez-toc-section\" id=\"Persistencia-de-permisos\"><\/span>Persistencia de permisos <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <code>\"local-fonts\"<\/code> el permiso se mantendr\u00e1 entre recargas de p\u00e1gina.  Se puede revocar a trav\u00e9s del <em>Informaci\u00f3n del sitio<\/em> s\u00e1bana.<\/p>\n<h2 id=\"feedback\"><span class=\"ez-toc-section\" id=\"Realimentacion\"><\/span>Realimentaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Chrome desea conocer sus experiencias con la API de acceso a fuentes locales.<\/p>\n<h3 id=\"tell-us-about-the-api-design\"><span class=\"ez-toc-section\" id=\"Cuentanos-sobre-el-diseno-de-la-API\"><\/span>Cu\u00e9ntanos sobre el dise\u00f1o de la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfHay algo en la API que no funciona como esperaba?  \u00bfO faltan m\u00e9todos o propiedades que necesita para implementar su idea?  \u00bfTiene alguna pregunta o comentario sobre el modelo de seguridad?  Presentar un problema de especificaciones en el correspondiente <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/local-font-access\/issues\">Repositorio de GitHub<\/a>o agregue sus pensamientos a un problema existente.<\/p>\n<h3 id=\"report-a-problem-with-the-implementation\"><span class=\"ez-toc-section\" id=\"Informar-un-problema-con-la-implementacion\"><\/span>Informar un problema con la implementaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEncontraste un error con la implementaci\u00f3n de Chrome?  \u00bfO la implementaci\u00f3n es diferente de la especificaci\u00f3n?  Presentar un error en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/new.crbug.com\">new.crbug.com<\/a>.  Aseg\u00farese de incluir todos los detalles que pueda, instrucciones simples para reproducir e ingrese <code>Blink&gt;Fonts<\/code> en el <strong>Componentes<\/strong> caja. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/\">Falla<\/a> funciona muy bien para compartir repros r\u00e1pidos y f\u00e1ciles.<\/p>\n<h3 id=\"show-support-for-the-api\"><span class=\"ez-toc-section\" id=\"Mostrar-apoyo-a-la-API\"><\/span>Mostrar apoyo a la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEst\u00e1 pensando en utilizar la API de acceso a fuentes locales?  Su soporte p\u00fablico ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.<\/p>\n<p>Enviar un tweet a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/ChromiumDev\">@Cromodev<\/a> con el <code>#LocalFontAccess<\/code> hashtag y h\u00e1ganos saber d\u00f3nde y c\u00f3mo lo est\u00e1 usando.<\/p>\n<h2 id=\"helpful-links\"><span class=\"ez-toc-section\" id=\"Enlaces-Utiles\"><\/span>Enlaces \u00datiles <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Agradecimientos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La especificaci\u00f3n de la API de acceso a fuentes locales fue editada por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/emilaeklund\/\">Emil A. Eklund<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/infrequently.org\/\">Alex Russell<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/joshuaseanbell\/\">Joshua Bell<\/a>y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/oyiptong\/\">Olivier Yiptong<\/a>.  Este art\u00edculo fue revisado por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/jpmedley\">Joe Medley<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/fi.linkedin.com\/in\/dominik-r%C3%B6ttsches-7323684\">Dominik R\u00f6ttsches<\/a>y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/oyiptong\/\">Olivier Yiptong<\/a>.  Imagen de h\u00e9roe de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@brett_jordan\">Brett Jordan<\/a> en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/qrjvkj-oS-M\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Finden Sie heraus, wie Sie mit der Local Font Access API auf die lokal installierten Schriftarten des Benutzers zugreifen und Details auf niedriger Ebene abrufen k\u00f6nnen. 24. August\u2026<\/p>","protected":false},"author":1,"featured_media":82006,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82005","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Utilice tipograf\u00eda avanzada con fuentes locales - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Descubra c\u00f3mo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del usuario y obtener detalles de bajo nivel sobre\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilice tipograf\u00eda avanzada con fuentes locales\" \/>\n<meta property=\"og:description\" content=\"Descubra c\u00f3mo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del usuario y obtener detalles de bajo nivel sobre\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-20T01:36:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Utilice tipograf\u00eda avanzada con fuentes locales\",\"datePublished\":\"2022-10-20T01:36:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/\"},\"wordCount\":1866,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1850606.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/\",\"name\":\"Utilice tipograf\u00eda avanzada con fuentes locales - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1850606.jpg\",\"datePublished\":\"2022-10-20T01:36:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Descubra c\u00f3mo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del usuario y obtener detalles de bajo nivel sobre\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/utilice-tipografia-avanzada-con-fuentes-locales\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1850606.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1850606.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-1850606-1594206-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Utilice tipograf\u00eda avanzada con fuentes locales - R Marketing Digital","description":"Erfahren Sie, wie Sie mit der API f\u00fcr den Zugriff auf lokale Schriftarten auf die lokal installierten Schriftarten des Benutzers zugreifen und Details auf niedriger Ebene abrufen k\u00f6nnen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/","og_locale":"de_DE","og_type":"article","og_title":"Utilice tipograf\u00eda avanzada con fuentes locales","og_description":"Descubra c\u00f3mo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del usuario y obtener detalles de bajo nivel sobre","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-20T01:36:34+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Utilice tipograf\u00eda avanzada con fuentes locales","datePublished":"2022-10-20T01:36:34+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/"},"wordCount":1866,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/","url":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/","name":"Utilice tipograf\u00eda avanzada con fuentes locales - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg","datePublished":"2022-10-20T01:36:34+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Erfahren Sie, wie Sie mit der API f\u00fcr den Zugriff auf lokale Schriftarten auf die lokal installierten Schriftarten des Benutzers zugreifen und Details auf niedriger Ebene abrufen k\u00f6nnen","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/utilice-tipografia-avanzada-con-fuentes-locales\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1850606.jpg","width":1200,"height":360,"caption":"hero-1850606-1594206-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=82005"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82006"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=82005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=82005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=82005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}