Questo sito potrebbe offrire funzionalità limitate durante le operazioni di manutenzione per migliorare l'esperienza utente. Se un articolo non risolve il tuo problema e vuoi richiedere supporto, la nostra comunità di supporto è pronta ad aiutarti tramite @FirefoxSupport su Twitter e /r/firefox su Reddit.

Cerca nel supporto

Attenzione alle mail truffa. Mozilla non chiederà mai di chiamare o mandare messaggi a un numero di telefono o di inviare dati personali. Segnalare qualsiasi attività sospetta utilizzando l'opzione “Segnala abuso”.

Ulteriori informazioni

Questa discussione è archiviata. Inserire una nuova richiesta se occorre aiuto.

FF5 error parsing CSS font-face with url inline base64 data

  • 4 risposte
  • 8 hanno questo problema
  • 1 visualizzazione
  • Ultima risposta di wildclaw

more options

Firefox 5 refuses to parse CSS @font-face with url inline base64 data.

I use the declaration:

<style type="text/css"> @font-face {

 font-family: 'MyFont';
 src: url(data:font/truetype;charset=utf-8;base64,[base64data]);

} </style>

then used this way:

<div style="font-family:'MyFont'; font-size:12.0pt">Test text</div>


But Firefox is not using the font and in the error console, there is always the message:

Error parsing the "src" value. Skipped to next declaration.

(more or less, I actually have this message in Czech)

Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications:

<style type="text/css"> @font-face {

 font-family: 'MyFont';
 src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype);

} </style>

(tried also with opentype format, etc.)

<style type="text/css"> @font-face {

 font-family: 'MyFont';
 src: url('myfont-webfont.eot?');
 src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]);

} </style>


If I provide the font path:

<style type="text/css"> @font-face {

 font-family: 'MyFont';
 src: url('Arial.ttf');

} </style>

(the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).

Firefox 5 refuses to parse CSS @font-face with url inline base64 data. I use the declaration: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]); } &lt;/style&gt; then used this way: &lt;div style="font-family:'MyFont'; font-size:12.0pt"&gt;Test text&lt;/div&gt; But Firefox is not using the font and in the error console, there is always the message: ''Error parsing the "src" value. Skipped to next declaration.'' (more or less, I actually have this message in Czech) Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype); } &lt;/style&gt; (tried also with opentype format, etc.) &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url('myfont-webfont.eot?'); src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]); } &lt;/style&gt; If I provide the font path: &lt;style type="text/css"&gt; @font-face { font-family: 'MyFont'; src: url('Arial.ttf'); } &lt;/style&gt; (the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).

Modificato da wildclaw il

Tutte le risposte (4)

more options

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.

more options

Thanks, I will try.

more options

It is possible that the base64 data is corrupted.

Can you download and save the file if you paste the data URI in the location bar?

more options

Finally I got it work! Thanks, cor-el, you pointed me the right way to solve this problem.

There was problem with the encoding too (there was part of the font missing at the end, because of the bug in the program - I forgot to flush the buffered output stream), after then I was able to download the same copy of the TTF. - I didn't know about the possibility to put the entire url data to the location bar and try to download it, thanks cor-el.

But it still didn't solve the problem ... the problem was, that the base64 stream was divided to multiple lines, like

data:font/truetype;charset=utf-8;base64, AAEAAAAYAQAABACARFNJRwMaCRYAC8m8AAAXfEdERUaJ+Y1JAAr/JAAAAsJHUE9T e1arnwALAegAAKwaR1NVQt5CYFEAC64EAAAbmEpTVEZtKmkGAAvJnAAAAB5MVFNI RExjrAAAN8wAAA1dT1MvMhAyXXMAAAIIAAAAYFBDTFT9ez5DAAr+7AAAADZWRE1Y ...


After I removed the line breaks, it works now! (the line is quite long then, because the base64 string is about 1MB, but it works)

Strange that I do the same for images (jpeg, png) and there is no problem with base64 string divided to multiple lines.

But anyway, I'm fine with that.