Блог

Главная - Вопросы по программированию - CSS: шрифт остался как Arial после изменения семейства шрифтов на -apple-системные шрифты

CSS: шрифт остался как Arial после изменения семейства шрифтов на -apple-системные шрифты

#css #font-family

#css #семейство шрифтов

Вопрос:

Я хочу использовать семейство шрифтов, используемое Airbnb для их веб-сайта на моем веб-сайте. Он «Круговой, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, без засечек». Однако после того, как я установил это семейство шрифтов для элементов моего веб-сайта, шрифт остался как Arial по умолчанию. Я также пробовал другие семейства шрифтов Apple-system без «Circular» в начале, и это все равно не сработало. Я искал учебные пособия в Интернете и не видел никаких упоминаний о загрузке какой-либо зависимости в проект. Мне интересно, что я пропустил. Спасибо!

Ответ №1:

Некоторые элементы, такие как buttons , по умолчанию имеют другой браузер font-family . Вам нужно специально inherit font-family для них.

Смотрите ниже:

 @import url('https://fonts.googleapis.com/css2?family=Bangersamp;display=swap');

html {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  line-height: 1.5;
}

button.example {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}  
 <p>
On <u>paragraphs</u> for example the <i>font-family</i>amp;nbspamp;nbspis inherited on default unlike on <u>buttons</u>
</p>
<button>
  Not inherited
</button>
<button class="example">
   inherited
</button>

Комментарии:

1. Спасибо за ответ! Требуется ли оператор импорта? Я установил для атрибута семейства шрифтов html значение «Circular, -apple-system …» (тот, который я привел в вопросе), а для семейства шрифтов желаемых элементов значение «inherit», и это все равно не сработало. Не могли бы вы взглянуть на это конкретное семейство шрифтов?

2. Вы используете, font-stack которому предшествует font , это не system-font в вашем случае Circular . Ваш браузер будет перебирать этот font-stack список и будет использовать первый font , который он распознает, остальные будут либо пропущены (если перед этим определенным шрифтом), либо проигнорированы (если за этим определенным шрифтом), но для распознавания font ему нужны ресурсы, на моем компьютере с Windows он будет отображаться Helvetica Neue , поскольку он первый font , для которого моя система предоставляет ресурсы. Так что да, для none-system-font вам нужно предоставить ресурсы либо через @import , либо через download .

Ответ №2:

На вашем компьютере не установлен круговой шрифт. На Airbnb он загружается с предоставленного в CSS URL. Если вы хотите использовать какой-либо нестандартный шрифт, вам необходимо указать URL-адреса для них. Вы можете проверить, напримерfonts.google.com