时间戳

首页 > 解决方案 > 导航器之间的显示字体问题

html - 导航器之间的显示字体问题

问题描述

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

感谢您的帮助

标签： htmlcssfontsfont-face

解决方案

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;
}

推荐阅读