Разная отрисовка шрифта из google fonts.

[k0d]

Здравствуйте. Верстаю сайт, на котором используется шрифт "PT Sans".

Загрузил его из гугло-шрифтов. Как мне всегда казалось, этот сервис автоматические определяет какой формат шрифта нужно отдавать... То есть он детектит браузер и ротатор выдает нужный тип шрифта.

И тут случилась проблема... Вот я прошу отдать мне файл

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic&subset=cyrillic' rel='stylesheet' type='text/css'>

Подключаю его в стилях

.product-params-short .buy-block  {	font-family:'PT Sans', sans-serif;	font-size:18px;}

Имеем. Firefox:

http://rghost.ru/51191900.view

 

Chrome:

http://rghost.ru/51191905.view

 

Надеюсь, проблема ясна - шрифт в Хроме отрисован жирным. Даже в IE все хорошо прошло... а вот разработка авторов сервиса работает не так...

У меня пока одна мысль - скачать гарнитуру самому и загружать ее самостоятельно (еще не пробовал, не знаю может и не поможет).

 

Для желающих поковыряться в верстке приложу ссылку на макет - http://lmediagroup.ru/test/prodcart.html.

Edited December 25, 2013 by k0d

[cyklop77]

полную идентичность внешнего вида шрифта в разных браузерах получить невозможно. так как у каждого браузера свои взгляды на отрисовку шрифта. к примеру разные браузеры могут различными способами округлять дробные значения

[k0d]

Нет... меня это не устраивает, абсолютно...

Шрифт должен быть таким, как хочу я (в данном случае это хочет дизайнер).

Должны быть способы как-то решить этот вопрос...

Если найду, то отпишу тут...

[cyklop77]

способ есть - использовать картинки

[k0d]

способ есть - использовать картинки

 

Это имело бы смысл, если специфичный шрифт был бы элементом дизайна. В моем случае пользователь будет заполнять товары сам... В общем, вы понимаете...

[Softlink]

У меня идентично отображается в хроме и фф.

[npofopr]

Отсюда попробуйте подключить http://webfont.ru/

+ cufon может поможет

 

А вообще, такое сильно отличие. Вы явно где то со стилями напортачили.

[k0d]

Хотите знать в чем дело? Не переключайтесь.

 

Дело в приоритетах. Вот товарищ пишет:

У меня идентично отображается в хроме и фф.

 

Это потому, что у него в системе не установлен шрифт семейства PT Sans, а у меня он был установлен.

http://rghost.ru/51193433.view - вот как это выглядит.

 

Что происходит дальше. А дальше мы загружаем наш шрифт. Если глянуть на то, что выдает гуглофонт, то выглядит это так

@font-face {  font-family: 'PT Sans';  font-style: normal;  font-weight: 400;  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/yrzXiAvgeQQdopyG8QSg8Q.woff) format('woff');}@font-face {  font-family: 'PT Sans';  font-style: italic;  font-weight: 400;  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/7dSh6BcuqDLzS2qAASIeuj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

И потом в css мы говорим:

font-family: 'PT Sans';

И у браузера возникает вопрос, а какую гарнитуру рендерить? Ту которую мы получили или ту которая в системе уже есть, ведь font-familly то одинаковый?

Хром решил, что надо ту которая в системе, а FF решил, что надо ту которая получена, в общем как всегда....

Что решил IE я не проверил.

Как быть? Как гарантированно отрисовать, то что получено из сети?

Юзать кастомный font-family.

font-family: 'my_super_family';

То есть нам придется отказаться от услуг сервиса и записать код примерно так

@font-face {    font-family: 'pt_sansregular_custom_epta';    src: url('yrzxiavgeqqdopyg8qsg8q.eot');    src: url('yrzxiavgeqqdopyg8qsg8q.eot?#iefix') format('embedded-opentype'),         url('yrzxiavgeqqdopyg8qsg8q.woff') format('woff'),         url('yrzxiavgeqqdopyg8qsg8q.ttf') format('truetype'),         url('yrzxiavgeqqdopyg8qsg8q.svg#pt_sansregular_custom_epta') format('svg');    font-weight: normal;    font-style: normal;}

И в элементах использовать это "семейство".

Еще наблюдение. При установке нового шрифта в систему Хром подгрузит этот шрифт только после перезапуска, кэш чистить не стоит, а то я запарился на этом немного...

[npofopr]

Вы бредите)

У меня тоже установлен шрифт и все ровно.

PT Sans вообще вроде по умолчанию в винде идет.

 

У вас проблема или в стилях или в локальных шрифтах. Или подключаете что то не так.

[Softlink]

Очень странная ситуация. На скрине отчетливо видно, что у вас установлен PT Sans Bold. Интересно почему Хром использовал его для рендеринга regular, в то время, как фф логично не стал ничего загружать, Может это какой-то баг локальный произошел в браузере.

[npofopr]

На сайте и вовсе не нашел, чтобы вы где то шрифт подключили.

закомментированную вижу) расскаментили бы, чтобы посмотреть

[k0d]

Я вас не убедил? Что ж...

http://rghost.ru/51194181.view - без

http://rghost.ru/51194191.view - с

вроде

 

Прежде чем говорить, проверьте инфу.

[k0d]

Проверил на соседнем компе. Ситуация повторилась.

Вот вам список шрифтов - http://en.wikipedia.org/wiki/List_of_Microsoft_Windows_fonts, которые устанавливаются по умолчанию. PT Sans там нет.

У меня он появился, скорее всего из-за фотошопа...

[sigma77]

Я вас не убедил? Что ж...

http://rghost.ru/51194181.view - без

http://rghost.ru/51194191.view - с

Т.е. regular у вас не установлен? Тогда логично, что при обращении к системным шрифтам хром взял жирный. Видимо хром ищет только по семейству, а ФФ еще учитывает и начертание.

А если написать font-family: 'PT Sans Regular', 'PT Sans', Arial, Helvetica, sans-serif;?

[Softlink]

Я вас не убедил? Что ж...

http://rghost.ru/51194181.view - без

http://rghost.ru/51194191.view - с

 

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

upd фф делает то же самое.

[k0d]

2Softlink

Я думаю, там предусмотрено это... Во всяком случае проверка форматов точно. Поэтому инъекцию кода вы не сделаете. Хотя, если поизвращаться....

Но это не суть...

 

Да, некоторая неоднозначность присутствует в этом деле. Браузеры в общем-то в своем репертуаре...

 

2sigma77

Попробовал... не получилось... Просто шрифт дефолтным становится.

логично

 

——-VS———

 

в то время, как фф логично не стал ничего загружать,

 

Кто же логичнее?

[sigma77]

Кто же логичнее?

Обе логики правильные Что не отрицает бага(?) хрома.

Раз уж у тебя установлены в системе эти шрифты, какой отобразит шрифт ФФ, если отключить внешний шрифт при той же записи font-family: 'PT Sans'?

Таки бага хрома, если я правильно перевела этот фрагмент

http://www.w3.org/TR/css3-fonts/#font-style-matching

3. For other family names, the user agent attempts to find the family name among fonts defined via @font-face rules and then among available system fonts, matching names with a case-insensitive comparison as outlined in the section above. On systems containing fonts with multiple localized font family names, user agents must match any of these names independent of the underlying system locale or platform API used. If the font resources defined for a given face in an@font-face rule are either not available or contain invalid font data, then the face should be treated as not present in the family. If no faces are present for a family defined via @font-face rules, the family should be treated as missing; matching a platform font with the same name must not occur in this case.

[k0d]

http://rghost.ru/51195194.view (это если подключить шрифты). Ну тут как всегда.

А если отключить и просто написать PT Sans, то все браузеры грузят жирный.

[Zverushka]

Попробуй при подключении прописать src: local('PT Sans Regular'), иначе если просто PT Sans - обращается к семейству. Каждый шрифт из семейства имеет свою приставку, по крайней мере в моей винде. Вообще такая проблема может возникнуть даже не знаю, наверное у 1го пользователя на тысячу, кто установит себе жирное начертание, а остальные нет...

Edited December 25, 2013 by Zverushka