Question

我想要来自this网站的字体open_sansregular，因此我下载了不同编码字体的本地副本（svg和iefix除外）），将它们放在与我的CSS文件相同的文件夹中，并复制组织的@font-face定义

@font-face {
  font-family: 'open_sansregular';
  src: url('/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.eot');
  src: url('/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.woff') format('woff'), url('/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.ttf') format('truetype'), url('/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansregular';
  src: url('/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot');
  src: url('/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.woff') format('woff'), url('/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.ttf') format('truetype'), url('/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

但在适当的时候改变了他们到当地的路径：

@font-face {
  font-family: 'open_sansregular';
  src: url('OpenSans-Bold-webfont.eot');
  src: url('http://www.catholicdos.org/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('http://www.catholicdos.org/resources/fonts/opensans/web fonts/opensans_bold_macroman/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'open_sansregular';
  src: url('OpenSans-Regular-webfont.eot');
  src: url('http://www.catholicdos.org/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Regular-webfont.woff') format('woff'), url('OpenSans-Regular-webfont.ttf') format('truetype'), url('http://www.catholicdos.org/resources/fonts/opensans/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

字体在Chrome中呈现，但不在Firefox中呈现。我知道Firefox会读取ttf个文件而我不知道为什么它们没有被渲染。我有时会遇到这个问题，有时则不会，所以我不知道为什么会发生这种情况。有人能给我一份我应该寻找的潜在问题清单吗？

Answer 1

您的路径在web fonts目录中包含空格字符，您需要对其进行编码。用%20替换空格，最终看起来像这样...

src: url('http://www.catholicdos.org/resources/fonts/opensans/web%20fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),

（或者更好的是，如果您确定不会破坏任何内容，请重命名目录web-fonts）

Firefox无法渲染字体：问题的根本通常是什么？

1 个答案: