Am 04.05.2012 01:23 schrieb Philippe Wittenbergh:
Le May 4, 2012 à 12:26 AM, Markus Ernst a écrit :
I used web fonts from Fonts.com for the first time, in a website that is both
in German and Russian. As Fonts.com serves not only bold and italic variants,
but also the latin-1 and cyrillic language options with different family names,
I had to write my own @font-face declarations, that basically look like the
following:
/* Condensed Latin */
@font-face {
font-family:"HelveticaNeue-Cn";
font-weight:normal;
src:[latin-1 font files];
}
/* Condensed Cyrillic */
@font-face {
font-family:"HelveticaNeue-Cn";
font-weight:normal;
unicode-range: U+400-4ff;
src:[cyrillic font files];
}
The complete stylesheet is at http://www.memorynight.ch/css_js/fontfacelokal.css
Now this works well except in Firefox and Opera, as can be seen if you look at
the ä, ö and ü characters in this page:
http://www.memorynight.ch/de/spiel/charity.html
- Firefox shows these characters in the fallback font of the stylesheet (Arial)
- Opera shows these characters and the rest of the word in the browser default
font.
The characters affected are the only ones not present in the cyrillic font files. Thus I
assume that FF and Opera do not correctly interpret the unicode-range property, but
rather override the first declaration. Opera then does not seem to be able to
"correctly" apply the fallback font to single characters.
Does somebody know a workaround for this issue? Or am I even wrong, and
somebody can point me to a mistake in my stylesheet?
Gecko and Presto (Firefox and Opera) don't support unicode-range (yet). Thus
they don't find the correct characters in the Latin font, and fall back to the
next font specified (Gecko) or look for anything on the user machine that might
have those characters (Opera, quite poop).
One way around (I think, not tested but that is more or less what Typekit does)
/* Condensed Latin */
@font-face {
font-family:"HelveticaNeue-Cn";
...
}
/* Condensed Cyrillic */
@font-face {
font-family:"HelveticaNeue-Cn2"; /* <----------- different name */
...
}
E { font-family: HelveticaNeue-Cn, HelveticaNeue-Cn2, 'fallback font'; }
Philippe, thanks very much for this helpful answer! (It took me 3 months
to respond because this special project was actually finished and the
german umlauts working in Firefox and Opera looked at as a nice-to-have
only.)
It turned out that your suggestion works great in Firefox, and totally
breaks in Opera at the russian pages. I was able to fix that by changing
the order in the font-family property:
E { font-family: HelveticaNeue-Cn2, HelveticaNeue-Cn, 'fallback font'; }
Like this, Opera does the same as in my original approach, which is not
worse at least. I hope they will fix that soon in Opera - "quite poop"
looks like a rather friendly qualification of this behaviour to me...
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
