Изменилось расположение шрифта в мобильной «версии» сайта, как поправить?

Question

[TitNIk]

Всем привет. Прикрепил шрифт Calibri через font face, на ПК все ок, но на моб "версии" (сайт адаптивный) в стандартном браузере и гугл хром шрифт слетел немного вверх, на пиксель-два, на всех элементах. В мозиле на мобильном все ок.
В чем может быть проблема и как это поправить? Заранее спасибо!



Вот скрин.

upd. P.S Совет тем, кто попадет на данный пост, не дурите себе голову и используйте нормальные бесплатные шрифты, коих туева куча на том же гугл фонтс (Open Sans, Roboto и т.д.) )

Comments

[TitNIk]

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

[Ivan Bogachev]

А у вас сам шрифт купленный официально или нет? Это я к тому, что если разные форматы шрифта делались на коленке - могут возникать проблемы прыгания по высоте (в одном формате буквы выше, в другом ниже, иногда даже в пределах одного все неравномерно), т.е. проблема не в стилях, а в самом шрифте.

[TitNIk]

Ivan Bogachev: Нет, качал с открытого источника. Может подскажите бесплатный шрифт для мобильных устройств? Похожий на Calibri. Легкий и простой )

[Ivan Bogachev]

TitNIk: Никогда не задавался этим вопросом, но Fira Sans в общих чертах вроде похож на Calibri https://fonts.google.com/specimen/Fira+Sans

[TitNIk]

Ivan Bogachev: Благодарю. Собственно, проблема решилась. Скачал калибри с другого ресурса, все встало. Вот он www.onlinewebfonts.com, не реклама. Там куча разных шрифтов, можно выбрать разные форматы + еще какая-то бесплатная лицензия.

Answer 1

[dom1n1k]

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

P.S. Calibri - это платный коммерческий шрифт.

Comments

[TitNIk]

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

Answer 2

[Залим Лампежев]

Примерно так:

@media only screen and (max-width: 767px){
	.myText{
		padding-top: 4px;
	}
}

Но может и не нужен паддинг, есть масса вариантов и причин. Нужно смотреть по ситуации

Comments

[TitNIk]

Подобная проблема только на мобильном и только после того, как подключил свой шрифт через font-face. Думаю, тут должно быть решение без padding и margin ))

[Залим Лампежев]

TitNIk: ну да, я предложил вариант, исходя из информации, которую Вы дали. Я ранее не встречался с такой проблемой из-за подключенного шрифта

Answer 3

[TitNIk]

Еще момент. Такой баг только на мобильном, если смотреть моб "версию" через браузер (хром и мозилу) на ПК, то бага нету.

Comments

[Максим]

вы разобрались с проблемой ?

[TitNIk]

. Shadow: Привет ) С этой? Да, скачал с другого ресурса шрифты, отлично встали. Проверил на трех браузерах на моб (мозила, хром, стандартный), везде отображение одинаковое.

[Максим]

TitNIk: ты не понял ! про ту что в тем вивере делал я! только я там не так сделал - по другому надо было

[TitNIk]

. Shadow: ну, ты про меню? Да, сделал )) Я же тебе в чат писал, что все ок, разобрался ) Только сделал на JS. А jQuery не работал у меня по другой причине. Библиотека подключалось, но, вместо $ нужно было использовать jQuery, там на WP отключено что-то по умолчанию )