Как применять «средний» системный шрифт ОС по умолчанию в CSS

Question

Я пытаюсь иметь систему по умолчанию «средний» (или «полужирный», если вы предпочитаете) шрифт отображается на различных ОС с помощью CSS, например:

• на окне: Segoe UI SemiBold
• на Android: Roboto Medium
• на прошивке: ... есть один?

Я попытался с помощью:

font-family: Segoe UI, -apple-system, sans-serif; 
font-weight: 600; 

, но я получаю более жирный шрифт, чем Roboto среды на Android.

Если я использую вместо этого:

font-family: Segoe UI, -apple-system, sans-serif-medium, sans-serif; 
font-weight: 600; 

Я получаю смелее, чем обычно Roboto Medium шрифт на Android.

Что было бы лучшим решением для перекрестных ОС? Обратите внимание, что если «средний» шрифт недоступен, я хочу вернуться к более смелым, чем обычный шрифт (например, font-weight: 600). Решение должно работать на Windows, iOS и Android, по крайней мере, и любезно возвращаться в другом месте.

Answer 1

Рассматривали ли вы использование бесплатного шрифта Roboto со средним весом от Google Fonts? Это отличная поддержка, и вы можете установить ее глобальный вес до 600, заставляя ее постоянно смотреть на огромные масштабы устройств.

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

Answer 2

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

Я бы порекомендовал вам использовать этот JS-код:

var doc = document.documentElement; 
doc.setAttribute('data-useragent', navigator.userAgent); 

Тогда в вашем CSS вы бы что-то вроде этого:

html[data-useragent*='Mac OS X'] { 
    font-family: "Segoe UI", sans-serif; 
    font-weight: 600; 
} 

html[data-useragent*='Android'] { 
    font-family: "Roboto Medium", sans-serif; 
    font-weight: 600; 
} 

Я бы сказал, что шрифт по умолчанию прошивки будет: Лусида Гранде. Но я не уверен, поэтому, возможно, вы можете найти это