Jump to content
  • 0

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

k0d

Asked by k0d,

 Share

Question

k0d Explorer

k0d

Posted
Posted (edited)

Здравствуйте. Верстаю сайт, на котором используется шрифт "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 by k0d
Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
cyklop77 Explorer

cyklop77

Posted
Posted

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

Link to comment
Share on other sites
  • 0
k0d Explorer

k0d

Posted
  • Author
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
k0d Explorer

k0d

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

 

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

Link to comment
Share on other sites
  • 0
k0d Explorer

k0d

Posted
  • Author
Posted

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

 

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

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

 

Это потому, что у него в системе не установлен шрифт семейства 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;}

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

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

Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Вы бредите)

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

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

 

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

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

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

Link to comment
Share on other sites
  • 0
k0d Explorer

k0d

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

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

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

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

 

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

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

Link to comment
Share on other sites
  • 0
k0d Explorer

k0d

Posted
  • Author
Posted

2Softlink

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

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

 

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

 

2sigma77

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


логично

 

——-VS———

 

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

 

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

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

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

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

Раз уж у тебя установлены в системе эти шрифты, какой отобразит шрифт ФФ, если отключить внешний шрифт при той же записи 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.

Link to comment
Share on other sites
  • 0
Zverushka Explorer

Zverushka

Posted
Posted (edited)

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

Edited by Zverushka
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept