css google fonts cyrillic - обрезаны некоторые буквы

У меня проблема с использованием шрифтов Google на веб-сайте. Проблемы проявляются только в том случае, если используется даже размер шрифта. Некоторые буквы меньше или обрезаны сверху. Однако на веб-сайте шрифтов Google нет проблем, если я попытаюсь использовать его на своем сервере, я это увижу.

На скриншоте видно, что буквы П и Г меньше, чем остальные. Высота строки не помогает.

Вот мой код:

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

а также:

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

Я загрузил в Интернет простой пример кода: http://tochka.cz/fontstest/.

Никаких проблем с linux | osx, но только во всех браузерах Windows, размер шрифта: 16px является проблемой, а размер шрифта: 17px - нет.

Заранее спасибо, я очень ценю вашу помощь.


css webfonts letters
person Lisunov Ilia    schedule 03.09.2012    source источник
comment
Выглядит отлично на моей машине, Windows 7 в Chrome. Какой браузер вы используете?   -  person Liam    schedule 03.09.2012
comment
@Liam Также хорошо выглядит при тестировании Firefox 15.0, работающего под Windows 7.   -  person Chris    schedule 03.09.2012
comment
Любой браузер windows: chrome 21, ff 14.0.1, safari 5.1.1, т.е. 9   -  person Lisunov Ilia    schedule 03.09.2012

Ответы (3)


arrow_upward
2
arrow_downward

Это конструктивный недостаток используемого шрифта: он не был разработан для работы с различными методами рендеринга шрифтов всех размеров. Такие проблемы возникают с некоторыми шрифтами Google в некоторых размерах (предыдущий случай, который я наблюдал, был шрифтом Sansation размером 17 пикселей), и они могут быть связаны конкретно с отрисовкой шрифта в Windows.

Я не думаю, что есть какое-то быстрое решение. Шрифты Google следует тестировать в разных средах (особенно в Windows), и если какая-то комбинация начертания и размера шрифта окажется проблематичной, просто избегайте ее — использование размера на 1 пиксель меньше или больше должно помочь. Это подчеркивает необходимость тестирования текстов, охватывающих достаточно богатый репертуар символов (включая заглавные буквы).

Обновление: на сайте Google Web Fonts используется другой файл шрифта, и при тестировании со следующим (извлеченным из CSS сайта) проблема не возникает:

@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');
}

Боюсь, такой подход не является надежным.

person Jukka K. Korpela    schedule 03.09.2012
comment
Спасибо за ваш ответ, я понимаю, что использование другого размера решит проблему, и я думаю, что мне придется это сделать, но меня останавливает то, что этот шрифт (и этот текст, конечно) выглядит совершенно нормально e на сайте Google WebFonts (в том же браузере, на том же ПК). Это странно, единственное, что я могу себе представить, это то, что гугл использует другой файл шрифта, что не имеет смысла. - person Lisunov Ilia; 03.09.2012
comment
Большое спасибо, я также пытался загрузить шрифт (ttf, а не woff) и использовать его вместо того, чтобы использовать их непосредственно с веб-сайта Google, и это также решает проблему. - person Lisunov Ilia; 03.09.2012

arrow_upward
2
arrow_downward

Сайт Google Web Fonts использует другой файл шрифта в своей системе и тот, который вы загружаете, поэтому, если что-то пойдет не так с загруженным шрифтом из GWF, но все в порядке на сайте Google Web Fonts, вы можете загрузить шрифт непосредственно со страницы Google Web Fonts (используйте Инструмент разработчика Chrome или Firebug, чтобы получить ссылку).

Например, я использовал:

http://themes.googleusercontent.com/licensed/font?kit=DXI1ORHCpsQm3Vp6mXoaTb7uYOTH0fqwR2fK3MMTyiuruusgsetRaCmkKU2Of3BmMh8Htnga2sTO__4Bgy4aRUbOfyIL9KspCxN8ekvQQBzoq8GLqcC6GrPYOPNC3QDT) format('woff')
person Lisunov Ilia    schedule 30.10.2012
comment
Но зачем они это делают?! Выглядит действительно смешно, почему я должен взломать каждый шрифт, чтобы он работал правильно? - person Dmitri Pisarev; 30.10.2013

arrow_upward
0
arrow_downward

Единственная разница, которую я вижу между изображением и тем, что я вижу в Chrome в Windows 7, — это выравнивание.

И это проблема ОС, которую можно решить, как предлагается здесь, http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

person Henrik Ammer    schedule 03.09.2012
comment
Спасибо, выравнивание не проблема, проблема в том, что первый и четвертый символы меньше, чем остальные, что неправильно :) - person Lisunov Ilia; 03.09.2012