html - CSS 导入字体

Question

我有 4 种字体需要在网站上使用，我的网站文件夹中有这些文件

Baskerville.ttc
BellGothicstd-Black.otf
BellGothicstd-Bold.otf
JennaSue.ttf

我已经尝试使用@Import 进行导入，但我使用的字体仍然不起作用:

@import url(../fonts/BellGothicStd-Black.otf);
@import url(../fonts/BellGothicStd-Bold.otf);
@import url(../fonts/Baskerville.ttc);
@import url(../fonts/JennaSue.ttf);

我还尝试使用@font-face 规则，这是我使用的规则:

@font-face {
  font-family: 'BellGothicBlack';
  src:  url('../fonts/BellGothic-Black.otf') format('OpenType'),
}
@font-face {
  font-family: 'BellGothicBold';
  src:  url('../fonts/BellGothicStd-Bold.otf') format('OpenType'),
}
@font-face {
  font-family: 'Baskerville';
  src:  url('../fonts/Baskerville.ttc') format('OpenType'),
}
@font-face {
  font-family: 'JennaSue';
  src:  url('../fonts/JennaSue.ttf') format('TrueType'),
}

有人可以告诉我我做错了什么吗？我想我可能会遗漏一些我不太确定的代码。

提前致谢汤姆

Answer 1

您需要将字体转换为所有浏览器的正确格式才能显示它们。(在执行此操作之前检查权限)

http://www.fontsquirrel.com/tools/webfont-generator

您的@font-face 规则还需要包括所有字体类型...

例子:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}