Блог

Главная - Вопросы по программированию - Проблема отображения шрифта между навигаторами

Проблема отображения шрифта между навигаторами

#html #css #fonts #font-face

#HTML #css #шрифты #шрифт-лицо

Вопрос:

Я новичок в html css! У меня проблема со шрифтами, которые не отображаются в Chrome и Mozilla. Я пробовал на разных ноутбуках, но шрифт работает только на моем ноутбуке.

Я знаю, что делаю что-то не так, но не могу найти, где.. Мои шрифты находятся в локальной папке. Вот мой код css:

 @font-face {
font-family: 'Montserrat Light';
font-style: normal;
font-weight: normal;
src: local('Fonts/montserrat/Montserrat Light'), url('Montserrat-Light.woff') format('woff');
}

@font-face {
font-family: 'Montserrat Medium';
font-style: normal;
font-weight: normal;
src: local('Fonts/montserrat/Montserrat Medium'), url('Montserrat-Medium.woff') format('woff');
}


@font-face {
font-family: 'Montserrat SemiBold';
font-style: normal;
font-weight: normal;
src: local('Fonts/montserrat/Montserrat SemiBold'), url('Montserrat-SemiBold.woff') format('woff');
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #F9F9FD;
  overflow: hidden;
}

.moi{
  display: block;
  position: relative;
  font-family: Montserrat-Light;
  font-size: 32px;
  letter-spacing: 1px;
  color: white;
  right: 150px;
  top: 20px;
  width: 280px;
  padding: 10px;
  background-color: #2E2E2E;
  letter-spacing: 1px;
}

.texte{
  display: block;
  position: relative;
  font-family: Montserrat-light;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 24px;
  width: 650px;
  height: 168px;
  right: 150px;
  top: 50px;
}  

 <!DOCTYPE html>
<html lang="fr">
<head>
      <meta charset="utf-8" />
      <link rel="icon" type="image/png" href="Assets/img/favcon.png"/>
      <link rel="stylesheet" href="SCSS/styleP5.css">
      <link rel="stylesheet" href="SCSS/Mediaqueries/MediaQueries-P5.css">

      <title>bla bla </title>
    </head>

Спасибо за помощь

Ответ №1:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

 @font-face {
    font-family: 'Montserrat-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Fonts/montserrat/Montserrat Light'), url('Montserrat-Light.woff') format('woff');
}

.example {
    /* You need to have the same name in the @font-face font-family as in the font-family */
    /*           /            /*/
    font-family: Montserrat-Light;
}

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

1. Спасибо за ваш ответ!! Я переименовал каждое семейство шрифтов с тем же именем @fontface, и теперь оно, похоже, работает на всех навигаторах на моем компьютере (Chrome, opera, Mozilla), но когда я пытаюсь открыть веб-сайт на навигаторах другого компьютера, он по-прежнему отображает базовый шрифт с sherif.

2. хорошо, я вижу, что с этим не так. Вы должны изменить его на @font-face {семейство шрифтов: Montserrat-Light;} У вас не должно быть » в имени семейства шрифтов.