I'm developing my website with Umbraco, and I need it to be multilingual with both english and chinese. To make my website multilingual with Umbraco I basically have the website cloned and then changing the contents, but keeping all the html and css templates.
But for the chinese version I will need to use a different font type, how can I do this? Is it possible to specify which font to use in the CSS? Or any other solution?
Thank you very much!
Can't you add a class to the body based on the language? For example en for English and cn for Chinese? Then you can target body.en and body.cn and add different fonts based on those.
Example:
body.cn {
font-family: 'chinese font';
}
body.en {
font-family: 'english font';
}
body,
button,
input,
select,
textarea {
color: #2b2b2b;
font: 12px/1.5 "Hiragino Sans GB", Tahoma, Arial, Microsoft YaHei, "微软雅黑", "Helvetica Neue", sans-serif;
*font-family: "Hiragino Sans GB", Microsoft YaHei, "微软雅黑", Tahoma, Arial, "Helvetica Neue", sans-serif;
}
Put your english font-family before chinese, so chinese computer only recongnize the chinese font-family and ignore the english font-family.
I am a web developer form China, Chinese font-family is very little:
1. 微软雅黑(microsoft yahei)
2. 宋体(simsun)
3. 黑体
Use the Culture to add the "lang"-attribute to the HTML-tag, then in the CSS, select it by using html[lang="CULTURE"]. So for English, you use e.g. "en-GB", producing the following:
Razor (layout page):
<html lang="#Culture">
</html>
CSS:
html[lang="en-GB"] { font-family: 'WhatEverFont', sans-serif; }
Or, you can achieve this by adding the Culture as a class to your body, e.g.:
Razor (layout page):
<html lang="#Culture">
<body class="#Culture.ToLower()">
</body>
</html>
CSS:
body.en-gb { font-family: 'WhatEverFont', sans-serif }
Related
I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.
My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.
So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue");
}
However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style
element.style {
font-family: helvetica, arial, verdana, sans-serif;
}
Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Impact");
}
then the changes apply (in a very ugly way). My question is thus:
What do I specify as the argument to local(...) in order to actually use my local fonts?
Additional information:
I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
The same file in the font view gets displayed as Helvetica Neue Standard
If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
I've tried to use Museo fonts in my sites. But i don't know how to use this in a site.
If it is any google fonts like 'Roboto', then i can use by below code:
font-family: 'Roboto', sans-serif;
Now how to use museo fonts?
May i use just 'Museo Slap' or need to use 'Museo Slap', sans-serif;
Either this process can be used to use text in a php file without having to put it in the css
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
This is valid only for TFF or WOFF formats of font. replace src with the url of the font on your server. replace "My custom font" and "customfont" with the name of the font you want.
Or you can alternatively add the font to style.css with the code:
.font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
You can omit sans-serif if you wish, however I would recommend keeping it as it provides fallback support if 'Museo Slap' is not available.
For what it's worth, I think Museo Slap is actually known as Museo Slab.
I have been googlying around now about this matter and I find few ways to do it. But what is the best way to do it.
I have website that has +10 different languages. Some languages need own font (chinese, japanese for example). Normal english and most western versions will use Google's Open Sans. But what about japanese etc. How should I do font-family declaration?
Like this putting all fonts in same declaration?
body {
font-family: 'Open Sans', Arial, Helvetica, 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', 'MS PGothic', sans-serif;
}
'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑' are MS Gothic is japanese windows font.
Or separate them?
Of course this would mean lot of more css than just body (h1, h2, p...)
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body.chines {
font-family: 'Open Sans', 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', sans-serif;
}
body.japanese {
font-family: 'Open Sans', 'MS PGothic', sans-serif;
}
I'm using Compass/sass btw
Best way to deal different languages is to have different css file for different language, which reduces page load time and resources.
Secondly, the asterisk implies all elements.
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
There is something called unicode-range you could use.
It is used to display a certain font for a range of specific characters.
This might help you to find the range of characters you want to include.
Ideally you have to setup all the fonts you need once.
And through unicode-range the browser uses the font that contains that character, and nothing is unnecessarily downloaded.
I have designed a template in wordpress and now I'm writing it in css/html but it seems the browser isn't using my font.
Photoshop:
Browser:
This is my css
h1 { font-size: 34px; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-weight: 100; }
The font in photoshop is Lucida Grande regular.
Never use platform-specific fonts ( Mac-only / Windows-only fonts ) in website; it's quite different in representation between browser & the operating system itself. If a visitor of your website does not have the font, it will fallback to next font specified in your font-family font stack.
It's suggested to use web fonts in website. You can find similar font in Google Fonts as alternative.
Yet, the above does not apply to most of the non-Unicode languages, especially CJK (Chinese, Japanese and Korean. Take Chinese as example, since Chinese has a wide range of characters, it is not feasible to make a web font for Chinese, as the file size of the font will be very large. (there are some Chinese web fonts, but most of them are >10MB; no visitors have patience to wait a font to load for a minute before they can read a pretty font)
Thanks to all answers.
I fixed it using the "Lucida Sans Unicode" font and the "letter-spacing" css property.
For everyone that have my same problem, here's my solution.
h1 { font-family: 'Lucida Sans Unicode', sans-serif; font-size: 34.14px; text-align: center; font-weight: 100; letter-spacing: 0.6px; }
I know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;