Question

有人可以帮助我，我正努力让@ font-face工作。我已经尝试了一切，我知道我可能会遗漏一些愚蠢的东西。

有人能告诉我我做错了吗？

  @font-face {
  font-family: "Asbah";
  src: url('http://www.dafont.com/asbah.font.ttf') format ('truetype'),
  url('http://www.dafont.com/asbah.font.woff2') format('woff2'),
  url('http://www.dafont.com/asbah.font.woff') format('woff'),
  p {
    font-family: 'Asbah';
    font-size: 12px;
  }

<p>
  Hallo this is font Asbah...which is noooot workingggg
<p>

Answer 1

使用此：

@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 */
}

不同的浏览器使用不同的字体格式。如果您在此网站上没有格式，则可以生成全部：https://transfonter.org/

请看一下技术见解：https://css-tricks.com/snippets/css/using-font-face/

Answer 2

确保字体网址正确无误。或者从CDN或本地

提供服务

Answer 3

您是否正确添加了mime types？我想你可以在这个链接看看： http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/

Answer 4

@font-face仅适用于服务器上托管的字体。

否则您需要使用@import。

就像你想使用谷歌字体 -

@import url(//fonts.googleapis.com/css?family=Open+Sans);

@ font-face无法在任何浏览器上运行

4 个答案: