Montserrat Google Проблема шрифта, показывающая различные визуализированные шрифты, несмотря на то же самое CSS и @Impor ⇐ CSS

[Anonymous]

Я работаю на веб -сайте Hubspot, на котором есть две версии одной и той же пользовательской темы. Тема версия 1 (v1) находится на старых страницах, и мы обновляем сайт для версии 2 (V2), поэтому новые страницы имеют очень похожие файлы CSS, шаблоны, шаблоны, модули и контент. Обновленная версия 2 была недавно оптимизирована для размеров файлов и нескольких других вещей, которые не должны влиять на эту проблему, который у меня есть. Мы загружали размеры 300, 500 и 700. То же самое на V1 и V2, и все работало отлично. Визуализированные страницы сопоставлены с шрифтом и размерами.

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

@import url('https://fonts.googleapis.com/css2?family=Merriwether:ital,wght@300,500,700&display=swap');< /code> < /p>
Изменил шрифт на Монтсеррат и теперь у вас есть проблемы.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@300,500,700&display=swap');

Мне интересно, является ли это, в частности, это шрифт, я упускаю что -то, что должно быть очевидным, но его похоронен где -то в CSS, хотя под проверкой CSS Font идентичен для отдельных элементов. Например, линия H1 в разделе героя. CSS для H1 выглядит следующим образом как для V1, так и для V2. В этом элементе нет других деклараций семьи шрифтов. < /P>
.billboard h1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: Montserrat;
font-size: 20px;
font-weight: 700;
height: 45px;
line-height: 30px;
}
< /code>
Установить v1 и v2 для загрузки с использованием @import и специально 300, 500, 700. По сути, только что изменило имя шрифта на @import.
Первое, что было 300, как 100. 500 как 500 и 700 как 500. < /p>
Таким образом, изменил @import на все определения.@import url('https://fonts.googleapis.com/css2?famil ... splay=swap'); < /code> < /p>
v1 будет транслировать 100, 400 и 700 (все еще 500).
v2 теперь будет отображать 100, 300, 400, 500 и 600.
, но не что -либо еще, даже если в Google есть шрифты, хотя и в том же случае, что и тот же элемент (хотя и все, что и то же самое, все, что и тот же элемент (хотя все, хотя и все, что -то вроде, в то же самое (хотя и все, что и то же самое, все, что и тем же элементы (хотя все, хотя и все, что -то же самое, я и тот же элемент (хотя и все же. вкладки конечно. Инкогнито в Chrome на Macos Ventura 13.7.4. Но выпуск также появляется и на новом Mac коллег. В окне Safari < /p>
on v1, in hrome inspect -> element -> Computed Tab написано, что визуализированные шрифты:

Family Название: Montserat

Thin Postscript name: network> gly gly gly gly (46 gly gly (46 gly (46 gly (46 gly (46 gly < /strong>

font resource: gly (46 gly (46 gly (46 gly (46 gly (46 gly (46 gl />On V1 in Safari Inspect -> Elements -> Font tab -> Identity

Font Name: Montserat Thin
On V2, in Chrome inspect -> Element -> Computed Tab it says the Rendered Fonts :

Family Name: Montserat Medium

Thin Postscript name: montserat -medium < /strong>

Происхождение шрифта: сетевой ресурс (46 глифов) < /p>
on v2 в Safari escest -> elements -> Tab -> Identity

font name: montserat < /press> < /p>
. «Монтсеррат тонкий» в качестве семейства шрифтов, выведенных в нижней части проверки, что V1 делает семейство шрифтов как «Монтсеррат тонкую», а постскриптум - «Монтсеррат обычный», в то время как V2 (правая сторона) только как «среда Монтсеррат». Никогда «Монтсеррат тонкий» на v2. < /P>
Я проверил вкладку «Сеть», чтобы увидеть, что я загружаю один и тот же файл CSS из Google. Я даже попытался удалить веса шрифта на @Import. < /P>
@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');
< /code>
Я тяну свои волосы, пытаясь придумать что -либо еще, что можно вызвать, чтобы вызвать это расхождение с этой семьей шрифтов. И если где -либо шрифт обозначается как использование Montserat Thin vs, регулярно? Если я изменю его с @Import на ссылку, я получу ту же проблему.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ame-css-an