Разные цвета в Ie11 и браузерах на chromium. Есть ли решение?

Question

[Alex Clear]

Прошу опытных фронт-енд разработчиков помочь с такими странностями:
1. Можно ли оставлять цвета такие, какие по макету(они же видны с левой стороны изображения в google). Справа находится ie11. Они сильно разные, и я не понимаю, норма ли это.


2. Я уже месяц не могу найти ответ по поводу различия шрифтов в фотошопе и браузерах. Как видите ниже на картинке(скрин фотошопа), шрифт намного толще, чем на верхней картине(браузер). Я слышал, что толщина отлчиается в зависимости от операционной системы, да и фотошоп по своему отображает. В общем, мне стоит просто забить и заливать шрифт с толщиной, которую дизайнер указал в фотошопе? Или же на глаз подбирать шрифт с похожим font-weight?


3. Видите на первом изображении иконки в ie11 находятся сверху(вторая картинка) , когда на первом изображении они снизу. Это потому, что я задал 100vh контейнеру и родительскому блоку этих иконок margin-top: auto. В Ie11 они не падают вниз, уже запарился. Много попробовал, включая height 100% - единственное, что сработало. Но прикол в том, что у меня эта менюшка fixed, то есть 100% нельзя давать, иначе будет тянуться аж до footer'а. Пожалуйста, ответьте хоть на 1 из этих вопросов, великие Гуру верстки. Спасибо за внимание.

Comments

[Alex Clear]

BD_ l3ftoverZ!, у меня вопросы особо не зависят от кода) Тут, скорее, дело опыта и понимания кроссбраузерности

[Lynn «Кофеман»]

1. Как заданы цвета
Вообще такую базовую вещь браузеры обычно показывают одинаково. Либо вы как-то криво написали, либо ц вас в браузере какой-нибудь плагин, например

[Alex Clear]

Алексей Тен, сомневаюсь, что цвета можно задать криво. Тут дело в самом браузере, этого уже не изменить. Ie11 и chrome с стандартными настройками показывают разные цвета. Если в гугле зайти во флаги и найти Force color profile, то можно поставить sRBG, тогда цвета станут одинаковыми.

[Alex Clear]

BD_ l3ftoverZ!, код с подключением шрифтов https://jsfiddle.net/g64Lb25s/

Не знаю, вроде все правильно подключаю. Я даже глянул толщину шрифта в GoogleFonts, такая же. Видать все же фотошоп утолщает.

Answer 1

[tyzberd]

1. не вижу большой разницы, справа IE https://habrastorage.org/webt/nx/ug/x_/nxugx_okufv...
2. Как то не так подключаете, или нет кириллицы
3. если задано position: fixed; привязка идет к окну, как на тостере посмотрите сайдбар слева. Можно использовать top: 0; bottom: 0; тоже растянет на всю высоту

Comments

[Alex Clear]

1. Если поменять в chrome://flags цвета, то они будут точно такие же как в Ie11. Это видать особенность браузера. Да и вряд ли можно ошибиться в выборе цвета, тыкая пипеткой)

2. Использую шрифт Montserrat, он, вроде как, поддерживает кириллицу.

Подключил вот так:
https://jsfiddle.net/g64Lb25s/

3. Спасибо большее, чего то затупил. Помогло.

[tyzberd]

Использую шрифт Montserrat, он, вроде как, поддерживает кириллицу.

если вы взяли шрифт с кириллицой
https://habrastorage.org/webt/09/x_/u9/09x_u9z5r0i...
https://jsbin.com/yixahebizi/1/edit?html,output
пробуйте взять шрифт тут https://google-webfonts-helper.herokuapp.com/fonts...

[Alex Clear]

tyzberd, спасибо большое за помощь. Потыкав всякое и везде, я пришел в выводу, что шрифт нормально подключен. Благодарю также за ссылку на google-webfots. Очень удобно по сравнению с другими сайтами.

Answer 2

[archelon]

Вопросы 1 и 3: покажите код.
По 2-му вопросу:
Ваш шрифт, судя по всему, не поддерживает кириллицу, поэтому русский текст отображается дефолтным.
Кроме того:
https://bureau.ru/bb/soviet/20100623/

Comments

[Alex Clear]

Шрифт montserrat. Он, вроде. поддерживает кириллицу. .

[Alex Clear]

3 вопрос решен, первый тоже. С шрифтами до сих пор думаю, норма это или нет.

[archelon]

Alex Clear,
Фотошоп и браузеры по-разному рендерят шрифты. В целом, это норма (более того, шрифты могут сильно отличаться в разных браузерах на разных осях).
Но на вашем скриншоте совершенно точно не montserrat.
Либо он криво подключился (см. консоль на предмет ошибок), либо неправильно сконвертирован (например, подключена только латиница).

[Alex Clear]

archelon, хорошо, проверю

[Alex Clear]

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