Question

我曾经将我的字体直接链接到Google的API，这很好用。现在我看到我的字体在某些浏览器和操作系统上无法正常显示。我下载了字体并使用fontsquirrel将其转换为Web使用。将转换后的文件复制到我的网站目录并将@ font-face CSS粘贴到我的样式表后，字体不会显示在任何浏览器中。请帮忙。

CSS就像这样：

@font-face {
font-family: 'titillium_webregular';
src: url('titilliumweb-regular-webfont.eot');
src: url('titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('titilliumweb-regular-webfont.woff') format('woff'),
     url('titilliumweb-regular-webfont.ttf') format('truetype'),
     url('titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'ralewaybold';
src: url('raleway-bold-webfont.eot');
src: url('raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('raleway-bold-webfont.woff') format('woff'),
     url('raleway-bold-webfont.ttf') format('truetype'),
     url('raleway-bold-webfont.svg#ralewaybold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'ralewayregular';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('raleway-regular-webfont.woff') format('woff'),
     url('raleway-regular-webfont.ttf') format('truetype'),
     url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: normal;
font-style: normal;

}

我的字体在主站点目录中，但我的样式表是主目录中的一个单独的文件夹（我不知道这是否重要）。

Answer 1

了解＆＃34;网络＆＃34;选项卡和＆＃34;控制台＆＃34; tab在您的开发者工具（Chrome和Firefox）中说明。

尝试使用绝对路径加载。你可以稍微改变一下面部，如下所示：

@font-face {
  font-family: 'titillium';
  src: url('/titilliumweb-regular-webfont.eot');
  src: url('/titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/titilliumweb-regular-webfont.woff') format('woff'),
       url('/titilliumweb-regular-webfont.ttf') format('truetype'),
       url('/titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'raleway';
  src: url('/raleway-bold-webfont.eot');
  src: url('/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/raleway-bold-webfont.woff') format('woff'),
       url('/raleway-bold-webfont.ttf') format('truetype'),
       url('/raleway-bold-webfont.svg#ralewaybold') format('svg');
  font-weight: bold; /* SEE HERE. SAME NAME, BUT WE JUST CHANGED THE WEIGHT TYPE */
  font-style: normal;
}

@font-face {
  font-family: 'raleway';
  src: url('/raleway-regular-webfont.eot');
  src: url('/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/raleway-regular-webfont.woff') format('woff'),
       url('/raleway-regular-webfont.ttf') format('truetype'),
       url('/raleway-regular-webfont.svg#ralewayregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

并使用它们：

.RalewayBoldTest {
  font-family: raleway;
  font-weight : bold;
}
.RalewayRegularTest {
  font-family: raleway;
}
.TitilliumRegularTest {
  font-family: titillium;
}

Answer 2

对我来说看起来像文件路径错误。 url（）;应该相对到样式表 - 所以你会想要上升到某个级别，具体取决于样式表的位置。要达到一个水平，只需使用2个点：

url('../font.woff');
/* will take you up one level from the stylesheet and select the file called 'font.woff'. */

希望这有帮助。

Answer 3

重要！你需要在结构中找到一个文件夹：

src: url('../titilliumweb-regular-webfont.eot');

Answer 4

这确实是文件路径问题。此外，我没有将Google Font默认值（Titillium Web）中的名称更改为转换后的名称（titillium-webregular）。感谢您的帮助。

本地托管的Google Web Fonts无法正常运行

4 个答案: