Как избежать смещения макета с заменой шрифта? ⇐ CSS

[Anonymous]

Я пытаюсь решить проблему со сдвигом макета, вызванную заменой шрифта.
Проблема:

• В основном касается мобильного/адаптивного макета.
• Шрифт приводит к изменению размеров отрисовки, вызывая проблему CLS (0,222) в соответствии с маяком.
• Когда шрифт загружает некоторые текстовые переносы в дополнительная строка, я думаю, что это вызывает большую часть CLS.
• Попытка решить проблему CLS без значительного увеличения FCP или LCP.

Реализация:

• В настоящее время просто подключите шрифт в заголовке, используя значение swap.
• Если я предварительно подключаюсь к URL-адресу, а затем предварительно загружаю семейство шрифтов, это решает проблему CLS. (пример кода ниже)
• Теперь я беру увеличение LCP на 0,3 (опять по маяку)
  

  Код: Выделить всё

Вопросы:

• Есть ли какой-нибудь способ разрешить замену шрифта при максимальной возможности, чтобы это не влияло на FCP или LCP при решении проблемы CLS?
• Кажется, я столкнулся с проблемой выбора: либо увеличить LCP, CLS, либо удалить шрифт целиком?
• Есть ли преимущество в загрузке всего семейства шрифтов, а не только необходимой толщины? (Возможно ли, что пользователь имеет кэшированное семейство шрифтов?) Я загружаю family=Open+Sans:300,400,500,700. Будет ли мне полезно просто загрузить family=Open+Sans

Трассировка производительности. Первое изображение — это рабочий сайт, обратите внимание на проблему CLS. Второе изображение решает проблему CLS, но я увеличиваю LCP и FCP.




Подробнее здесь: https://stackoverflow.com/questions/654 ... eplacement