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>

Answer 2

使用分号例如：-

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/signika-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Signika Regular'), local('Signika-Regular'),
       url('../fonts/signika-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/signika-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/signika-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/signika-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/signika-v8-latin-regular.svg#Signika') format('svg'); /* Legacy iOS */
}

CSS @font-face 无法正常工作（第 2 期）

CSS @font-face is not working properly (2nd Issue)

html

css

fonts

font-face

webfonts