Question

当我将计算机与Firefox或IE一起使用时，只有在使用Chrome时，该字体才起作用。此外，当我使用我的手机时，即使使用镀铬，字体也不起作用。

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

＆＃13;

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

＆＃13;

Answer 1

你的错误很少。 1）最好将所有字体系列命名为一个。 2）你需要声明它各自的重量和风格。 3）个人 - ＆gt;永远把家庭放在第一位

希望这有帮助

＆＃13;

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

＆＃13;

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

＆＃13;

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期）

2 个答案: