CSS-шрифт не работает на Mozilla Firefox, Microsoft Edge и Opera - PullRequest
Новая
       6

CSS-шрифт не работает на Mozilla Firefox, Microsoft Edge и Opera

0 голосов
/ 23 декабря 2018

Я использую семейства шрифтов DinRoundWeb и DINRoundComp для веб-сайта.Объявление в таблице стилей CSS выполняется следующим образом: 

 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb.eot"), url("fonts/DINRoundWeb.woff")              format("woff"), url("fonts/DINRoundComp.ttf") format("truetype");
 font-weight: 400;
 }
 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb-Medium.eot"), url("fonts/DINRoundWeb-  Medium.woff") format("woff"), url("fonts/DINRoundComp-Medium.ttf")    format("truetype");
 font-weight: 600;

}

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

   body{
   font-family: Din ,sans;
   color: #444;
   line-height: 1.5rem;
   font-size: 1rem;
   background-color: #f3f3f3;
   }

Стиль не применяется на странице, более того, он появляется не только в Инструментах для веб-разработчиков -> Шрифты-> Все шрифты.

Буду признателен за любые указания!Стиль я

1 Ответ

0 голосов
/ 23 декабря 2018

Попробуйте относительный путь с точки зрения вашего файла CSS.Вам нужно дополнительно font-family для каждого веса, например: 

@font-face {
  font-family: 'DNRM';
  src: url('../fonts/DINRoundWeb-Medium.eot');
  src: url('../fonts/DINRoundWeb-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb-Medium.woff') format('woff');
}

@font-face {
  font-family: 'DNRR';
  src: url('../fonts/DINRoundWeb.eot');
  src: url('../fonts/DINRoundWeb.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb.woff') format('woff');
}
...