css - solucionar - no se ha podido generar el código que habilita una o más fuentes web en la página error 500

Error al decodificar la fuente descargada, error de análisis OTS: etiqueta de versión no válida+rieles 4

Question

Estoy haciendo una compilación previa de activos y ejecuto la aplicación en modo de producción. Después de la compilación cuando cargo mi página de índice, recibí las siguientes advertencias en la consola de Chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

El problema es que no está cargando iconos en lugar de mostrar cuadrados .

Utilizamos las fuentes personalizadas y el código es:

@font-face {
  font-family: ''icomoon'';
  src: font-url(''icomoon.eot'');
  src: font-url(''icomoon.eot?#iefix'') format(''embedded-opentype''),
       font-url(''icomoon.ttf'') format(''truetype''),
       font-url(''icomoon.woff'') format(''woff''),
       font-url(''icomoon.svg#icomoon'') format(''svg'');
  font-weight: normal;
  font-style: normal;
}

No sé lo que falta de mi parte. Busqué mucho y también probé la solución, pero no obtuve ningún éxito. En modo de desarrollo funciona bien, pero no sé por qué se muestra cuadrado en el modo de producción.

Answer 1

Cuando utilizo angular-cli , esto es lo que funciona para mí:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Answer 2

Después de probar muchos otros enfoques, y muchas reinstalaciones y comprobaciones, acabo de solucionar el problema borrando los datos de navegación de Chrome (imágenes y archivos en caché) y luego actualizando la página.

Answer 3

Estaba teniendo el mismo problema, esto funcionó para mí https://github.com/webpack/webpack/issues/1468

Answer 4

Estoy usando ASP.NET con IIS y resulta que solo necesitaba agregar el tipo MIME a IIS: ''.woff2'' / ''application / font-woff''

Answer 5

He tenido el mismo problema.

Agregar la versión de fuente (p ?v=1.101 Ej. ?v=1.101 ) a la fuente URLS debería ser el truco;)

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Hacer clic (clic con el botón derecho del mouse) en la versión TTF de la fuente y seleccionar "Obtener información" (Mac OSX) "Propiedades" (Windows) en el menú contextual debería ser suficiente para acceder a la versión de la fuente.

Answer 6

Mi problema fue que estaba declarando dos fuentes, y scss parece esperar que declares el nombre de la fuente.

después de su @font-face{} debe declarar $my-font: "OpenSans3.0 or whatever";

y esto para cada fuente.

:-)

Answer 7

Obtuve exactamente el mismo error, y en mi caso resultó debido a una ruta incorrecta para la declaración @font-face . El inspector web nunca se quejó con un 404 ya que el servidor de desarrollo que estamos usando (servidor en vivo) se configuró para servir el index.html predeterminado en cualquier 404: s. Sin conocer ningún detalle sobre su configuración, esto podría ser un culpable probable.

Answer 8

Para los usuarios de angular-cli y webpack sospeché que hay algún problema al importar las fuentes en el archivo css, así que también proporcione la ubicación de la URL codificada con comillas simples de la siguiente manera:

@font-face {
font-family: ''some_family'';
src: url(''./assets/fonts/folder/some_family-regular-webfont.woff2'') format(''woff2''),
     url(''./assets/fonts/folder/some_family-regular-webfont.woff'') format(''woff'');
font-weight: normal;
font-style: normal;
}

Esta publicación puede ser antigua, pero esta es la solución que funcionó para mí.

Answer 9

Recibía los siguientes errores:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

que se solucionó después de descargar el archivo sin procesar directamente desde:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

El problema era que había un error de proxy al descargar el archivo (contenía el mensaje de error HTML).

Answer 10

Si está usando Chrome, intente agregar una versión de tipo fuente (OTF) como se muestra a continuación:

    ...
     url(''icomoon.otf'') format(''opentype''),
    ...

¡Salud!

Answer 11

Si otras respuestas no funcionaron, intente:

1. compruebe el archivo .htaccess

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. borrar el caché del servidor

3. borrar el caché del navegador y recargar

Answer 12

Si se ejecuta en IIS como el servidor y .net 4 / 4.5, es posible que falten definiciones de extensión mime / file en Web.config, como esta:

<system.webServer>
 <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Answer 13

Si usa bootstrap, actualice el archivo bootstrap css ( bootstrap.min.css ) y los archivos de fuentes. Solucioné mi problema con esta solución.

Answer 14

Simplemente indique el formato en @ font-face de la siguiente manera:

@font-face {
    font-family: ''FontAwesome'';
    src: url(''../fonts/fontawesome-webfont.eot-v=4.6.3.htm'');
    src: url(''../fonts/fontawesome-webfont.eot#iefix-v=4.6.3'') format(''embedded-opentype''), url(''../fonts/fontawesome-webfont.woff2-v=4.6.3.htm'') format(''woff2''), url(''../fonts/fontawesome-webfont.woff-v=4.6.3.htm'') format(''woff''), url(''../fonts/fontawesome-webfont.ttf-v=4.6.3.htm'') format(''truetype''), url(''../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular'') format(''svg'');
    font-weight: normal;
    font-style: normal
}

Answer 15

Tenía una fuente dañada, aunque parecía estar cargando sin problemas y, según las fuentes en Chrome Devtools, el recuento de bytes no era correcto, así que lo descargué nuevamente y lo resolvió.

Answer 16

Tuve el mismo problema cuando abrí y .woff y. woff2 archivos a través de Sublime Text con la opción EditorConfig end_of_line = lf . Acabo de copiar archivos a la carpeta de fuentes sin abrirlos en Sublime y el problema se resolvió.

Answer 17

Tuve el mismo problema y eso se debió a que git trataba estos archivos como texto. Entonces, al retirar los archivos en los agentes de compilación, no se mantuvo el binario.

Agregue esto a su archivo .gitattributes e intente.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Answer 18

Vaya a la dirección a continuación en GitHub y descargue cada uno de los archivos FontAwesome.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... pero en lugar de hacer clic derecho y guardar el enlace como, haga clic en cada uno de los archivos y use el botón ''Descargar'' para guardarlos.

Descubrí que guardar el enlace como descargado una página HTML y no el archivo binario FontAwesome en sí.

Una vez que tuve todos los binarios, funcionó para mí.

Answer 19

Verifique el archivo CSS de su fuente. (fontawesome.css / fontawesome.min.css) , verá así:

@font-face {
    font-family: ''Open Sans'';
    font-style: normal;
    font-weight: 600;
    src: url(''../fonts/open-sans-v15-latin-600.eot?v=1.101''); /* IE9 Compat Modes */
    src: local(''Open Sans SemiBold''), local(''OpenSans-SemiBold''),
    url(''../fonts/open-sans-v15-latin-600.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
    url(''../fonts/open-sans-v15-latin-600.woff2?v=1.101'') format(''woff2''), /* Super Modern Browsers */
    url(''../fonts/open-sans-v15-latin-600.woff?v=1.101'') format(''woff''), /* Modern Browsers */
    url(''../fonts/open-sans-v15-latin-600.ttf'') format(''truetype''), /* Safari, Android, iOS */
    url(''../fonts/open-sans-v15-latin-600.svg#OpenSans'') format(''svg''); /* Legacy iOS */
}

verá la etiqueta de versión después del nombre de la extensión de archivo de su fuente . Me gusta:

-v = 4.6.3

Solo necesita eliminar esta etiqueta de su archivo CSS. Después de eliminar esto, debe ir a su carpeta de fuentes, y verá:

Y, forme estos archivos de fuente, solo necesita eliminar la etiqueta de versión -v = 4.6.3 del nombre del archivo.

Entonces, el problema será descuidado.

Answer 20

Yo estaba teniendo el mismo problema. , OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Si recibió este mensaje de error al intentar confirmar su fuente, entonces es un problema con .gitattributes " warning: CRLF will be replaced by LF "

La solución para esto es agregar cualquier fuente con la que tenga el problema en .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Luego eliminé los archivos de fuentes corruptos y volví a aplicar los nuevos archivos de fuentes y está funcionando muy bien.

Answer 21

tratar

@font-face {
  font-family: ''icomoon'';
  src: asset-url(''icomoon.eot'');
  src: asset-url(''icomoon.eot?#iefix'') format(''embedded-opentype''),
       asset-url(''icomoon.ttf'') format(''truetype''),
       asset-url(''icomoon.woff'') format(''woff''),
       asset-url(''icomoon.svg#icomoon'') format(''svg'');
  font-weight: normal;
  font-style: normal;
}

y cambie el nombre de su archivo a application.css.scss

Answer 22

For it is fixed by using below statement in app.web.scss $fa-font-path: "../../node_modules/font-awesome/fonts/" !default; @import "../../node_modules/font-awesome/scss/font-awesome";