导航器之间的显示字体问题答案

【问题标题】：Issue of display font beetween navigators导航器之间的显示字体问题
【发布时间】：2020-10-18 10:54:49
【问题描述】：

我是 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>

感谢您的帮助

【问题讨论】：

标签： html css fonts font-face

【解决方案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;
}

【讨论】：

感谢您的回答！！我用相同的@fontface 名称重命名了每个字体系列，现在它似乎适用于我计算机上的所有导航器（chrome、opera、mozilla），但是当我尝试在另一台计算机的导航器上打开网站时，它仍然显示基本字体与警长。
好的，我知道它有什么问题。您应该将其更改为 @font-face {font-family: Montserrat-Light;} 您不应该在字体系列名称中包含 ''。