Question

我正在使用font squirrel中的两种字体为这种练习设置一些我的wordpress小部件区域：Gothic和Playfair Display。但出于某种原因，只有Playfair被应用，Gothic被忽略了。因为它的wordpress小部件区域我实际上不能显示html但基本上以下是CSS代码，它仅适用于一种类型的字体：

CSS：

@font-face{
  font-family: 'Playdisplay';
  src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
     url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
     url('PlayfairDisplay-Regular.ttf') format('ttf'),
     url('font/PlayfairDisplay-black.ttf') format('ttf');
 font-weight: normal;
 font-style: normal;     
}
@font-face{
   font-family: 'Goth';
   src: url('font/GOTHIC.ttf') format('ttf'),
      url('font/GOTHICB.ttf') format('ttf'),
      url('font/GOTHICBI.ttf') format('ttf'),
      url('font/GOTHICI.ttf') format('ttf');
  font-weight: normal;
  font-style: normal; 
}

.mainfooter h3{
  font-family: Goth, GOTHIC; 
}

footer h1,
footer h2,
footer h3{
  font-family: Playdisplay, PlayfairDisplay-Bold;
}

如何使用这两种字体并在网站的任何位置应用？

Answer 1

尝试将字体名称放在单引号中

.mainfooter h3{
  font-family: 'Goth'; 
}

footer h1,
footer h2,
footer h3{
  font-family: 'Playdisplay';
}

此外，您正在使用字体文件的相对路径，请检查这些是否正确！

CSS字体松鼠没有正确应用

1 个答案: