html - CSS @font-face 无法正常工作(第 2 期)

Question

当我在我的电脑上使用 Firefox 或 IE 时，字体不起作用，只有在使用 Chrome 时才会出现。另外，当我使用我的手机时，即使有 chrome，字体也不起作用。

在 Gerardo BLANCO 的大力帮助下，请考虑下面我的代码。

@font-face {
  font-family: Signika;
  src: url('cllean-directory/fonts/Signika-Regular.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Regular.woff') format('woff'), url('cllean-directory/fonts/Signika-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Signika;
  src: url('cllean-directory/fonts/Signika-Bold.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Bold.woff') format('woff'), url('cllean-directory/fonts/Signika-Bold.woff2') format('woff2');
  font-weight: bolder;
  font-style: normal;
}

@font-face {
  font-family: Signika;
  src: url('cllean-directory/fonts/Signika-Light.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Light.woff') format('woff'), url('cllean-directory/fonts/Signika-Light.woff2') format('woff2');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: Signika;
  src: url('cllean-directory/fonts/Signika-Semibold.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Semibold.woff') format('woff'), url('cllean-directory/fonts/Signika-Semibold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
  font-family: SignikaS;
}

Answer 1

你的错误很少。 1) 最好将所有字体系列命名为一个。 2)您需要声明其各自的重量和样式。 3)个人->永远把家庭放在第一位

希望对你有帮助

@font-face {
  font-family: Signika;
  src: url('fonts/Signika-Regular.ttf') format('truetype'), url('fonts/Signika-Regular.woff') format('woff'), url('fonts/Signika-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Signika;
  src: url('fonts/Signika-Bold.ttf') format('truetype'), url('fonts/Signika-Bold.woff') format('woff'), url('fonts/Signika-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

p {
  font-family: Signika;
}

<p>Hi</p>
<p style="font-weight:bold">Hi</p>