Блог

Главная - Вопросы по программированию - Что такое правило за @font-face?

Что такое правило за @font-face?

#html #css #fonts #font-face

#HTML #css #шрифты #font-face

Вопрос:

Я изучаю CSS, и у меня есть одна путаница с @font-face.

Я видел много веб-сайтов, использующих @font-face три-четыре раза в своем CSS-файле с разницей в весе шрифта.

как и в приведенном ниже примере, создайте три @font-face с одинаковыми именами. Итак, какое из них будет применяться, если я его создам

отметьте и используйте в нем семейство шрифтов: ‘Test’.

 @font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Test';
  src: url('path') format('woff2'),
  url('path') format('woff'),
  font-weight: 600;
  font-style: normal;
}

Приведенный ниже экзамен взят из w3schools. Здесь они дважды определили @font-face с одним и тем же именем семейства шрифтов. Мой вопрос, как решается, какое семейство шрифтов применяется к какому элементу?

 <!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

div {
  font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.</div>

</body>
</html>
Метки: