Есть такое замечательное и мощное свежее свойство для шрифтов,
font-size-adjust. Оно позволяет задавать отношение некоторого размера из свойств шрифта к самому размеру шрифта.Попробую объяснить на примере:
• Допустим, у вас есть шрифт Roboto.
• Его прописные буквы по высоте составляют 0.713 от размера шрифта.
• Его строчные буквы по высоте составляют 0.531 от размера шрифта.
• Получается, если размер шрифта — 72px, то
cap-height будет 51.336px, а ex-height — 38.232px.Теперь, если вам нужно на момент загрузки шрифта Roboto показать фолбек системным шрифтом, вы можете написать
font-size-adjust: ex-height 0.531 — и строчки после загрузки прыгать не будут. Или если в одной строке нужно показать два разных шрифта зачем-то, то тоже можно сделать красиво.Откуда я взял числа для вычислений? По ссылке ниже. Простая страничка, работает сугубо на клиенте. Загрузили шрифт — получили метрики. Удобно. Вот бы ещё PWA из неё собрать — вообще счастье было бы.
https://clagnut.com/sandbox/font-size-adjust.html