可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am doing assets pre-compile, and running the application in production mode. After compilation when I load the my index page I got followings warnings in the chrome console:
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
The issue is its not loading icons instead of that its showing squares.
we used the custom fonts and the code is:
@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; }
I don't know what is missing from my end . I searched a lot and also tried solution but not got any success.In development mode its working fine but don't know why its showing square in the production mode.
回答1:
I got the exact same error, and in my case it turned out to be because of a wrong path for the @font-face declaration. The web inspector never complained with a 404 since the dev server we're using (live-server) was configured to serve up the default index.html on any 404:s. Without knowing any details about your setup, this could be a likely culprit.
回答2:
If running on IIS as the server and .net 4/4.5 it might be missing mime / file extension definitions in Web.config - like this:
回答3:
I was having the same issue., 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
If you got this error message while trying to commit your font then it is an issue with .gitattributes "warning: CRLF will be replaced by LF"
The solution for this is adding whichever font you are getting the issue with in .gitattributes
*.ttf -text diff *.eot -text diff *.woff -text diff *.woff2 -text diff
Then I deleted corrupt font files and reapplied the new font files and is working great.
I hope it helps.
回答4:
My issue was that I was declaring two fonts, and scss seems to expect that you declare the name of the font.
after your @font-face{} you must declare $my-font: "OpenSans3.0 or whatever";
and this for each font-face.
:-)
回答5:
I had a corrupted font, although it appeared to be loading without problem and under Sources in Chrome devtools appeared to display, the byte count wasn't correct, so I downloaded again and it resolved it.
回答6:
When using angular-cli, this is what works for me:
回答7:
Go to the address below on GitHub and download each of the FontAwesome files.
https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome
...but instead of right-clicking and saving the link as, click on each of the files and use the 'Download' button to save them.
I found that saving the link as downloaded an HTML page and not the FontAwesome file binary itself.
Once I had all of the binaries it worked for me.
回答8:
try
@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; }
and rename your file to application.css.scss
回答9:
I had the same issue and that was because of the git treating these files as text. So while checking out the files in build agents, binary was not maintained.
Add this to your .gitattributes file and try.
*.eot binary *.ttf binary *.woff binary *.woff2 binary
回答10:
If your are using Chrome, try adding an opentype (OTF) version of your font as shown below:
... url('icomoon.otf') format('opentype'), ...
Cheers!
回答11:
If you use bootstrap then Update bootstrap css(bootstrap.min.css) file and fonts files. I fixed my problem with this solution.
回答12:
I am using ASP.NET with IIS and it turns out I just needed to add the MIME-type to IIS: '.woff2' / 'application/font-woff'
回答13:
After trying lots of other approaches, and lots of re-installs and checks, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page.
回答14:
I had same problem when I opened and saved .woff and .woff2 files through Sublime Text with EditorConfig option end_of_line = lf. I just copied files to font folder without opening them into Sublime and problem was solved.
回答15:
I was getting the following errors:
Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2 OTS parsing error: invalid version tag
which was fixed after downloading the raw file directly from:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2
The problem was that there was a proxy error when downloading the file (it contained the HTML error message).
回答16:
For angular-cli and webpack users I suspected that there is some issue while importing the fonts in css file , so please also provide url location encoded with single quotes as following -
@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; }
This post might be old , but this is the solution which worked for me .
回答17:
I was having the same issue, this worked for me https://github.com/webpack/webpack/issues/1468
回答18:
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";
翻译