css google fonts cyrillic - some letters are cut off

问题

I've got a problem with using google fonts on website, The problems shows only if even font-size is used, Some of the letters are smaller or cut off on the top. There is no problem on google fonts website, though, if i try to use it on my server, i see it.

On the screenshot, you can see that letters П and Г are smaller, then other. Line-height doesn't help.

Here is my code:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,700&amp;subset=latin,cyrillic-ext,cyrillic" media="screen">

and:

<span style='font-family:"Open Sans", sans-serif; font-size:16px; font-weight:300; font-style:normal;'>ПРОГРАММА глАнаяГа</span>

I've uploaded simple sample code on the web: http://tochka.cz/fontstest/

No problems with linux|osx, but only on all windows browsers, font-size:16px is a problem, though font-size:17px isn't.

Thanks in advance, i really appreciate your help.

回答1:

This is a design flaw in the font used: it has not been designed to work with different font rendering techniques in all sizes. Such problems appear with some Google fonts in some sizes (the previous case I observed was the Sansation font in 17px size), and they may relate specifically to font rendering on Windows.

I don’t think there’s any quick solution. Google fonts should be tested in different environments (especially on Windows), and if some font face and font size combination turns out to be problematic, just avoid it—using 1px smaller or larger size should help. This emphasizes the need for testing with texts that cover a rich enough character repertoire (including capital letters).

Update: The Google Web Fonts site uses a different font file, and testing with the following (extracted from the CSS of the site), the problem does not appear:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
  url(http://themes.googleusercontent.com/licensed/font?kit=DXI1ORHCpsQm3Vp6mXoaTb7uYOTH0fqwR2fK3MMTyiuruusgsetRaCmkKU2Of3BmMh8Htnga2sTO__4Bgy4aRUbOfyIL9KspCxN8ekvQQBzoq8GLqcC6GrPYOPNC3QDT) format('woff');
}

I’m afraid such an approach is not robust.

回答2:

The Google Web Fonts site uses a different font file in their system and the one you download, so if something goes wrong with downloaded font from GWF but is ok in Google Web Fonts site, you can download font directly from Google Web Fonts page (use Chrome Developer Tool or Firebug to get the link).

For example I used:

http://themes.googleusercontent.com/licensed/font?kit=DXI1ORHCpsQm3Vp6mXoaTb7uYOTH0fqwR2fK3MMTyiuruusgsetRaCmkKU2Of3BmMh8Htnga2sTO__4Bgy4aRUbOfyIL9KspCxN8ekvQQBzoq8GLqcC6GrPYOPNC3QDT) format('woff')

回答3:

The only difference I see between the image and what I see in Chrome in Windows 7 is the alignment.

And that's a OS issue that can be solved as proposed here, http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

来源：https://stackoverflow.com/questions/12246024/css-google-fonts-cyrillic-some-letters-are-cut-off

标签

css

webfonts

letters