Falha ao decodificar a fonte baixada, erro de análise do OTS: tag de versão inválida + trilhos 4

136

Estou fazendo a pré-compilação dos ativos e executando o aplicativo no modo de produção. Após a compilação, quando carrego a minha página de índice, recebi os seguintes avisos no console do 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

A questão é não carregar ícones, e sim mostrar quadrados .

usamos as fontes personalizadas e o código é:

@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;
}

Não sei o que está faltando no meu fim. Eu pesquisei muito e também tentei a solução, mas não obtive nenhum sucesso. No modo de desenvolvimento, está funcionando bem, mas não sei por que está aparecendo no modo de produção.

Deepti Kakade
fonte
2
Pode haver várias coisas: a codificação de caracteres pode estar incorreta ou a própria fonte pode estar corrompida. Você pode abrir a fonte no Catálogo de Fontes ou similar? Um Google rápido revela um bug na versão 45 do navegador Chromium: code.google.com/p/chromium/issues/detail?id=545924
Craig
você conseguiu resolver o problema?
Codificador
1
No meu caso, preciso limpar o cache do cloudflare e aguardar alguns minutos para que o tempo corrija o problema!
HoseinGhanbari
Eu tive o mesmo problema e descobri que precisava ter a fonte woff2 antes do woff para o chrome.
Jcubic #

Respostas:

138

Eu recebi exatamente o mesmo erro e, no meu caso, acabou por ser um caminho errado para a @font-facedeclaração. O inspetor da Web nunca reclamou do 404, pois o servidor de desenvolvimento que estamos usando (live-server) foi configurado para exibir o index.html padrão em qualquer 404: s. Sem conhecer detalhes sobre sua configuração, isso pode ser um provável culpado.

Fredrik Frodlund
fonte
1
Se esta é a razão de redirecionamento você pode filtrá-la por extensão de arquivo RewriteRule \!. (Js | gif | css | jpg | OTF | EOT | png) $ / redirecionamento [R = 301, L]
fearis
No meu caso, o agrupamento e minificação do ASP.NET MVC alteraram essencialmente a localização do CSS sem alterar os caminhos relativos. Teve que excluir o arquivo já minificado e usar um CssRewriteUrlTransformno BundleConfig.
Sinjai 12/12
22

Se estiver executando no IIS como servidor e .net 4 / 4.5, pode estar faltando definições de extensão mime / file no Web.config - desta forma:

<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>

Squareman88
fonte
16

Eu estava tendo o mesmo 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

Se você recebeu essa mensagem de erro ao tentar confirmar sua fonte, é um problema com .gitattributes "warning: CRLF will be replaced by LF "

A solução para isso é adicionar a fonte com a qual você está tendo problemas em .gitattributes

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

Em seguida, apaguei os arquivos de fonte corrompidos, reapliquei os novos arquivos de fonte e está funcionando muito bem.

stacksonstacksonstacks
fonte
onde fica esse arquivo? o navegador saberá que existe? Quão?
Omar
@Omar Esse arquivo deve estar no diretório raiz e não tem nada a ver com o navegador. Ele descreve como o git gerenciará as terminações de linha em diferentes formatos de arquivo. O Git pode corromper alguns tipos de arquivos tentando alterar as terminações de linha.
elliottregan
5

experimentar

@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;
}

e renomeie seu arquivo para application.css.scss

Yu-Shing Shen
fonte
4

Eu tinha uma fonte corrompida, embora parecesse carregar sem problemas e, em Fontes no Chrome, os devtools pareciam ser exibidos, a contagem de bytes não estava correta, então fiz o download novamente e a solução foi resolvida.

LJT
fonte
Se estiver usando o woff2, tive esse problema depois de usar conversores online. Necessário usar o conversor de linha de comando woff2 (disponível no homebrew)
rob-gordon
4

Basta indicar o formato em @ font-face da seguinte forma:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

Oleksiy Stryzhak
fonte
3

Eu tive o mesmo problema e isso foi por causa do git tratar esses arquivos como texto. Portanto, ao verificar os arquivos nos agentes de construção, o binário não foi mantido.

Adicione isso ao seu .gitattributesarquivo e tente.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
Abhijeet
fonte
2

Ao usar angular-cli, é isso que funciona para mim:

<?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>
Skorunka František
fonte
Seria ótimo se você pode dizer, para qual arquivo você deve adicioná-los?
Saiyaff Farouk
1
Edite o web.config
Skorunka František
Não pude arquivar um arquivo web.config no projeto angular-cli. Usando a versão 1.3.0. Qualquer pista?
Saiyaff Farouk
O Web.config é usado apenas quando você hospeda seu aplicativo cliente no IIS (incluindo Serviços da Web do Azure).
Skorunka František
2

Eu estava recebendo os seguintes erros:

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

que foi corrigido após o download do arquivo bruto diretamente de:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

O problema era que havia um erro de proxy ao baixar o arquivo (ele continha a mensagem de erro HTML).

DJDaveMark
fonte
Não pensei em verificar o arquivo propriamente dito. Certifique-se também de não baixar esse link diretamente ("salvar link como"), mas insira-o e use o botão "baixar".
omadawn
2

Vá para o endereço abaixo no GitHub e faça o download de cada um dos arquivos FontAwesome.

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

... mas, em vez de clicar com o botão direito e salvar o link como, clique em cada um dos arquivos e use o botão 'Download' para salvá-los.

Eu descobri que salvar o link como baixado uma página HTML e não o próprio arquivo binário do FontAwesome.

Uma vez que eu tinha todos os binários, funcionou para mim.

Robert Bolton
fonte
1

Meu problema foi que eu estava declarando duas fontes, e o scss parece esperar que você declare o nome da fonte.

após o seu, @font-face{} você deve declarar $my-font: "OpenSans3.0 or whatever";

e isso para cada fonte.

:-)

Antoine
fonte
Você está falando sobre família de fontes?
Nada # B
Não me lembro agora, desculpe :-)
Antoine
1

Para angular-cli usuários de e webpack , suspeitei de algum problema ao importar as fontes no arquivo css. Por isso, forneça também o local da URL codificado com aspas simples, como a seguir -

@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;
}

Este post pode ser antigo, mas esta é a solução que funcionou para mim.

ip_x
fonte
1

Eu tive o mesmo problema.

Adicionar a versão da fonte (por exemplo ?v=1.101) aos URLs da fonte deve ser suficiente;)

@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 */
}

Clicar (clicar com o botão direito do mouse) na versão TTF da fonte e selecionar "Obter informações" (Mac OSX) "Propriedades" (Windows) no menu de contexto deve ser suficiente para acessar a versão da fonte.

Lefan
fonte
0

Se você estiver usando o Chrome, tente adicionar uma versão opentype (OTF) da sua fonte, como mostrado abaixo:

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

Felicidades!

Buitregool
fonte
0

Se você usar o bootstrap, atualize o bootstrap.min.cssarquivo bootstrap css ( ) e os arquivos de fontes. Corrigi o meu problema com esta solução.

FRabbi
fonte
0

Estou usando o ASP.NET com o IIS e só preciso adicionar o tipo MIME ao IIS: '.woff2' / 'application / font-woff'

Jawid Hassim
fonte
0

Depois de tentar muitas outras abordagens, e muitas reinstalações e verificações, corrigi o problema limpando os dados de navegação do Chrome (imagens e arquivos em cache) e atualizando a página.

Andy Lorenz
fonte
0

Eu tive o mesmo problema quando abri e salvei .woffe. woff2arquivos através de texto sublime com EditorConfigopção end_of_line = lf. Acabei de copiar os arquivos para a pasta da fonte sem abri-los no Sublime e o problema foi resolvido.

user3125779
fonte
0

Se outras respostas não funcionarem, tente:

  1. verifique o arquivo .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. limpar cache do servidor

  3. limpar cache do navegador e recarregar
Andrea Zangheri
fonte
0

Verifique o arquivo css da sua fonte. (fontawesome.css / fontawesome.min.css) , você verá assim:

@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
}

você verá a tag de versão após o nome da extensão do arquivo da fonte . Gostar:

-v = 4.6.3

Você só precisa remover essa tag do seu arquivo css. Depois de remover isso, você precisará ir para a pasta de fontes e verá: insira a descrição da imagem aqui

E, do formulário desses arquivos de fonte, você só precisa remover a tag da versão -v = 4.6.3 do nome do arquivo.

Então, o problema será alterado.

Prince Ahmed
fonte
0

caso isso seja relevante para alguém. Eu recebi exatamente o mesmo erro usando o ASP.NET e C # no Visual studio. Quando iniciei o aplicativo no estúdio visual, ele funcionou, mas eu consegui esse problema. Enquanto isso, o caminho para o meu projeto continha o caractere "#" (c: \ C # \ testapplication). Isso parece confundir o IIS Express (talvez também o IIS) e causa esse problema. Eu acho que "#" é um caractere reservado em algum lugar no ASP.NET ou abaixo. Mudar o caminho ajudou e agora funciona como esperado.

Cumprimentos Christof

x-de Rezbach
fonte
entendeu exatamente qual é o problema?
Nelles 29/01
codeFalha ao decodificar a fonte baixada: localhost: 52963 / css /…
x-de Rezbach em
0

O que me ajudou foi que mudei a ordem. O .eot get é carregado primeiro, mas meu erro foi carregar o .eot. Então, abandonei o .eot como o primeiro src do woff2 e o erro desapareceu.

Então, o código é agora:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

E é foi:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
JosFabre
fonte
-1
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";
Gampesh
fonte
7
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
18716 Andreas