So problem which I can't solve for a while is that in Internet Explorer utf-8 characters are bold. Here is code example:
.section.about-houses .tabs-block .tab-content p {
margin: 0 0 30px 0;
line-height: 2.2;
font-family: "Open Sans", sans-serif;
font-weight: 300;
color: #373737;
}
and this is a result:
All characters are UTF-8. The problem is on your fonts: it seems that your main font doesn't have full support of accented characters, so your browser will use an alternate font for the missing characters. To me, it seems that it is still a non bold font, but with more weight compared to your very light default font.
So I would recommend you to look for a font which includes all Latin characters. A complete Unicode font will be too large (and so slow), but you know better what script you need, so you can select only a good font (e.g. for Latin script). On Web fonts (CSS), you can specify the code points (and intervals).
Related
I've imported the (in)famous open sans to my CSS. Everything was fine at first.
However, today I noticed that some of the characters (şğü) are not being displayed properly in Firefox. They work fine in Internet Explorer and Chrome, but they're being replaced by the default font in Firefox.
I was thinking, this should be a quick-to-solve issue. Any ideas?
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
p {
font-family: "Open Sans";
font-size: 4em;
}
<p>Example şğü.</p>
By default, many Google fonts support Basic Latin repertoire only (effectively Windows Latin 1 set); this covers e.g. ü but not the Turkish letters you are using. The repertoire can be selected with checkboxes in the UI of Google Fonts, but this is rather unnoticeable. In this case, you need to add the parameter subset=latin,latin-ext:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext);
p {
font-family: "Open Sans";
font-size: 4em;
}
<p>Example şğü.</p>
There's a bug, or something, on my client's site where if you switch the language to any of the Asian options (CJK) then open the language selector again, "Russian" (in Russian), "Greek" (in Greek), and "Serbian" (in Serbian) have extra spaces between the letters. If you choose any other language, these words are fine in the language option list. The following style is on html element -
font: 200 100%/1.5 sans-serif;
I read that on Macs, sans-serif will pull in Helvetica as its first choice, and on Windows, it will be Arial. In the my dev tools, if I change sans-serif to Helvetica, it changes the font and fixes the problem, rather than the font looking exactly the same, which is what I expected. (I do have Helvetica on my Mac. I haven't checked this in Windows yet.) Below is a sample screenshot.
Actually, now that I've played with it a bit more, I found that when I select Korean, the non-Korean words are rendered in Apple Gothic, for Chinese the non-Chinese words are in Century Gothic, and for Japanese the non-Japanese words are in Avant Garde. Any thoughts on why? I could just create a rule set that assigns Helvetica, Arial, sans-serif as the font stack for these languages, but any explanation on what's going would be a great learning experience.
Edit: When I mentioned Apple Gothic, Century Gothic, and Avant Garde, what I meant was that for each of the Asian languages, I changed 'sans-serif' to some other font name in my dev tools to see if I could determine what sans-serif font was being defaulted to in CJK for the non-Asian words on the page. I find it weird that Chinese, Japanese and Korean each used a different sans-serif font.
Sample code of the language option list -
<ul>
/* other LIs here */
<li>Ελληνικά</li>
/* other LIs here */
</ul>
/* CSS for the LIs */
li {
font-size: .857em; /* computes to 16px */
list-style: none;
padding: .786em .714em .643em .714em;
transition: all 0.25s ease-in-out;
background-color: #fafafa;
border-top: 1px solid #d0d0d0;
color: #333;
margin: 0;
text-align: left;
}
This was tested in Chrome 37.0.2062.120 and FF 32 on a Mac (10.6.8). Incidentally, Safari 5.1.8 on the same computer did not repro the issue.
According to https://hsivonen.fi/hiragino/ (my emphasis added), "Mac OS X comes with new a family of high-quality Japanese fonts called Hiragino. The fonts also contain high-quality glyphs for the Western European subset of the Latin script. The glyphs for basic Greek and the Russian subset of the Cyrillic script look fine in isolation but are kerned to match the width of Kanji blocks. This makes the fonts ill-suited for Greek or Russian text."
My options at this point are to test other fonts that come with Mac OS to see if they do not apply the widths to Greek and Russian characters. If they all do, I'll resort to using my aforementioned font stack. Also, when I check this in Windows, I don't see this issue.
Is there any way in CSS to specify a different font to be used just for Chinese characters?
Specifically, I have some user inputted text which can contain either standard English, Han characters or a mix of both. I'd like to use Myriad Pro for non-Han characters, and Kaiti Std for all Han characters.
I realize this can be done by running over the content with JavaScript, adding span tags around the Chinese characters and then applying styles to them, but is there any more standard/efficient way?
I don't care about old browsers, although it should work in the latest version of Chrome/Firefox/Safari/IE.
You can specify a unicode-range for font-faces so that that each font only applies to a subset of unicode characters.
http://dev.w3.org/csswg/css-fonts/#composite-fonts
A very basic implementation would look something like (adjust for font files and formats as needed):
#font-face {
font-family: 'MyFonts';
src: local('Kaiti Std');
unicode-range: U+4E00-9FFF;
}
#font-face {
font-family: 'MyFonts';
src: local('Myriad Pro');
}
body {
font-family: 'MyFonts', sans-serif;
}
Some interesting browser quirks/work-arounds documented at http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/
I'm using a webfont that only supports most of the latin characters. However, the website is multilingual, russian is one of the languages. As you probably know, russian consists of cyrillic characters, which are then displayed in the secondary font-family. I found Verdana + font-weight:bold to be a good alternative.
However, font-weight bold needs to be related to Verdana only, so I can't just write it into the normal CSS, as the webfont should not be displayed bold. Here some tries that did not work:
CSS:
#font-face {
font-family: "some Webfont";
src:url('xyz.eot')
}
/* The font-weight won't work here */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana');
font-weight:bold;
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
.container {
font-family:"some Webfont", "Verdana-Bld";
}
So font-face is probably not the solution here, Verdana Bold seems to be a good way, however, it's not working when using it in normal CSS like this:
.container {
font-family:"some Webfont", "Verdana Bold";
}
I don't get it, when using #font-face, it finds and renders that font, but not when using as font-family?
Verdana Bold is really just a typeface of the Verdana font family, and it should be used by setting font-family: Verdana; font-weight: bold. In some cases, it is possible to use a typeface as if it were a font family, by declaring its name as the value of font-family, but this is browser-dependent and depends on the font, too; for Verdana Bold, the trick does not appear to work. The more complicated trick of using #font-face works for some browsers but not all, as you have seen; this even depends on the font name you use (e.g., the “full font name” Verdana Bold vs. the PostScript font name Verdana-Bold).
So a different approach is needed: try and find a font that covers all the characters needed. E.g., at Google web fonts, you can set “Script” to “Cyrillic” to find fonts that support Russian letters. Such fonts generally support Latin letters, too.
So The font-weight in font-face doesn't set the font-weight but is kind of a filter for browsers to decide if it is the right font to use. So when the browser looks which font to display it will choose the font-face where you set font-weight: bold just if your current text is bold and will take the other one in any other situation.
I think that it is actually possible to make one font bold and the other one regular just if you can call this in font-face directly. (so if you could have something like local('Verdana Bold'). Then just get rid of font-face:bold and it should work fine.
We are creating a site that uses both Japanese and English. We want to get away from the default Japanese fonts which can't use ClearType. Is there a way to tell the browser to use a different Japanese font JUST for Japanese characters (Like Meiryo) and another font just for latin characters (Like Helvetica) on the same page? We don't want any English words to use the Meiryo font.
We actually used a tip to specify English fonts first in the CSS from this article: http://www.lukew.com/ff/entry.asp?118
However, this doesn't work in IE. Even if we specify Helvetica, Verdana, or any other widely available font first and then the Japanese font in the CSS, IE will still use the Japanese font for English words. Firefox, Chrome, etc. work as expected.
(If possible we hope not to resort to something like wrapping each English word in a span)
I've solved my problem using 'unicode-range' CSS property.
You can find the details here:
https://developer.mozilla.org/en/docs/Web/CSS/#font-face/unicode-range
Example:
/* bengali */
#font-face {
font-family: 'Atma';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
unicode-range: u+0980-09FF;
}
body {
font-family: 'Atma', arial, sans-serif;
font-size: 18px;
}
<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>
You cannot get around marking every language section with a class and font if you want this to work cross-browser. It cannot be done with only CSS.
You can apply a language class manually or automatically. Manually might be a lot of work to support and maintain, but is robust. Dynamically it can be done using a back-end script or Javascript, by scanning a string for characters that fall within certain unicode character blocks, and applying a language class accordingly.
You can find the block definitions here (Japanese is Hiragana and Katakana): http://www.fileformat.info/info/unicode/block/index.htm
I'd recommend the back-end way of doing this, because changing a font on the page might cause flickering or shifting of elements during page load.
Create css class for English and Japanese text.
.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }
If entire page is in Japanese, add class="ja" to body tag, if there's mixed content, add class="ja" to the html element that contains Japanese text, for example:
<td class="ja">日本語</td>
How are you telling the page what language to print to screen?
If you are getting a variable can you not use this variable as a class which you use for a div of body.
<body class="english">
or
<body class="japanese">