本地托管的 Google Web 字体不起作用答案

【问题标题】：Locally hosted Google Web Fonts not working本地托管的 Google Web 字体不起作用
【发布时间】：2014-06-26 05:21:15
【问题描述】：

我曾经将我的字体直接链接到 Google 的 API，效果很好。现在我发现我的字体在某些浏览器和操作系统上无法正常显示。我下载了字体并用 fontsquirrel 转换它们以供网络使用。将转换后的文件复制到我的站点目录并将@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;

}

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

【问题讨论】：

您的浏览器控制台是否有任何错误？我会检查字体源的 URL。正如你现在所拥有的，意味着你的 CSS 和所有文件都在同一个文件夹中。
@Teknotica 我只是将字体文件放入我的 css 文件夹中，但它仍然无法正常工作。
您能粘贴一个使用该字体的 CSS 示例吗？你的控制台有什么错误吗？
@Teknotica 没有错误，但我刚刚解决了这个问题（请参阅我自己的答案）。

标签： css fonts font-face webfonts google-font-api

【解决方案1】：

查看开发者工具（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;
}

【讨论】：

【解决方案2】：

对我来说似乎是文件路径错误。网址（）；应该是 relative 到样式表 - 所以你会想要上升一些级别，这取决于你的样式表在哪里。要上一级，只需使用 2 个点：

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

这很重要！您需要在结构中上一个文件夹：

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

【讨论】：

【解决方案4】：

这确实是文件路径问题。此外，我没有将名称从 Google 字体默认值 (Titillium Web) 更改为转换后的名称 (titillium-webregular)。感谢大家的帮助。

【讨论】：