-1

I have a requirement to load different CSS based on Browser Language Preferences.

Suppose if the language preference would be Chinese then the style FontFamily should be: Microsoft Chinese otherwise FontFamily would be: Calibri.

Any guess.

Thanks.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
fmourtaza
  • 179
  • 1
  • 16
  • So based on this answer about [localization in JavaScript](http://stackoverflow.com/a/4079798/3753055), you may perform it with the usage of JavaScript. Since CSS is only an interpreted code, you can't access the browser information through CSS. – Anwar Sep 15 '15 at 08:27

1 Answers1

2

Wanting to use different fonts is distinct from "wanting to load different CSS". You could easily have one CSS file which contains different rules for different languages. Here is one approach:

[lang=zh-cn] { font-family: "Microsoft Yahei","微软雅黑", STXihei, "华文细黑"; }
[lang=en-us] { font-family: Calibri; }

Which option is chosen will depend on the lang setting for the element it is being applied to, or more precisely, the lang attribute of the closest ancestor which has one (this latter behavior being particular to the lang attribute). So

<html lang='zh-cn'>

Would apply the Chinese fonts to everything in the document, all else being equal.

What is required is for the server to set the lang attribute on the html element properly. There are a number of ways to do this. For instance, it could be based on a user preference. Or, the server could fill it in based on the Accept-Language header. Or based on geo-detection. If the user changes his language setting through the UI, the client could reset the lang attribute on the html element itself.

For something like English, you could also write the rule as

[lang|=en] { font-family: Calibri; }

(note the vertical bar), which would match en but also en-us, etc. Then provide another rule for en-uk if you want to override for British English.

However, be aware that you may not want to default completely to the Chinese fonts. That will cause even Roman characters to be displayed using that font, and often the Roman character glyphs in such fonts are notably ugly. You may end up needing to combine fonts into "font stacks", normally with Western-character fonts coming first, in order to render Roman characters using fonts like Calibri and then fall back to the Chinese fonts for glyphs only found there.

Another common use of the lang attributed-based CSS selectors is to choose different types of quotation marks based on language, using the CSS quotes property.

  • U rocking man ! That's exactly what I want. Implementing that now. Thanks – fmourtaza Sep 15 '15 at 08:38
  • By any chance do you know the syntax of how to add "Accept-Language" in a MasterPages (asp.net) ? In meanwhile, I had added this line to the Html Root (before Head) but it seems bugging - some JS pages scroll or ribbon gets disabled... – fmourtaza Sep 15 '15 at 10:29