Falha ao decodificar a fonte baixada, erro de análise do OTS: tag de versão inválida + trilhos 4
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
A questão é não carregar ícones, e sim mostrar quadrados .
usamos as fontes personalizadas e o código é:
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');
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.
css asset-pipeline ruby-on-rails-4.1 custom-font
— Deepti Kakade
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
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 #
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
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
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:
— Squareman88
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
Em seguida, apaguei os arquivos de fonte corrompidos, reapliquei os novos arquivos de fonte e está funcionando muito bem.
— stacksonstacksonstacks
onde fica esse arquivo? o navegador saberá que existe? Quão?
@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.
src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
asset-url('icomoon.svg#icomoon') format('svg');
e renomeie seu arquivo para application.css.scss
— Yu-Shing Shen
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.
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)
Basta indicar o formato em @ font-face da seguinte forma:
font-family: 'Some Family';
src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
— Oleksiy Stryzhak
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.
*.woff2 binary
Ao usar angular-cli, é isso que funciona para mim:
<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)).*$" />
— Skorunka František
Seria ótimo se você pode dizer, para qual arquivo você deve adicioná-los?
— Saiyaff Farouk
Edite o web.config
Não pude arquivar um arquivo web.config no projeto angular-cli. Usando a versão 1.3.0. Qualquer pista?
O Web.config é usado apenas quando você hospeda seu aplicativo cliente no IIS (incluindo Serviços da Web do Azure).
Eu estava recebendo os seguintes erros:
Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
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).
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
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
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.
Você está falando sobre família de fontes?
— Nada # B
Não me lembro agora, desculpe :-)
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-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');
Este post pode ser antigo, mas esta é a solução que funcionou para mim.
— ip_x
Adicionar a versão da fonte (por exemplo ?v=1.101) aos URLs da fonte deve ser suficiente;)
src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
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
Se você estiver usando o Chrome, tente adicionar uma versão opentype (OTF) da sua fonte, como mostrado abaixo:
url('icomoon.otf') format('opentype'),
— Buitregool
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
Estou usando o ASP.NET com o IIS e só preciso adicionar o tipo MIME ao IIS: '.woff2' / 'application / font-woff'
— Jawid Hassim
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.
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
Se outras respostas não funcionarem, tente:
verifique o arquivo .htaccess
limpar cache do navegador e recarregar
— Andrea Zangheri
Verifique o arquivo css da sua fonte. (fontawesome.css / fontawesome.min.css) , você verá assim:
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');
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á:
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
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
entendeu exatamente qual é o problema?
— Nelles 29/01
codeFalha ao decodificar a fonte baixada: localhost: 52963 / css /…
— x-de Rezbach em
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:
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');
E é foi:
src:  url('assets/fonts/icomoon.eot?9h1pxj');
For it is fixed by using below statement in app.web.scss
$fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
— 18716 Andreas
Eu estava tendo o mesmo problema, isso funcionou para mim https://github.com/webpack/webpack/issues/1468
não basta postar links ... poste a resposta com a solução, pois os links poderão ficar inativos no futuro.