@font-face 不工作，字体似乎没有加载

Question

我正在使用以下 css 来移植我自己的字体（在我的本地机器上）：

@font-face {
font-family: 'byekan';
src: url('~/Content/fonts/BYekan.eot');
src: url('~/Content/fonts/BYekan.eot?#iefix') format('embedded-opentype'),
   url('~/Content/fonts/BYekan.woff') format('woff'),
   url('~/Content/fonts/BYekan.ttf')  format('truetype'), 
   url('~/Content/fonts/BYekan.svg#svgFontName') format('svg'); 
}
* {
    font-family: 'byekan';
}

但它不起作用，我注意到的一件事是字体没有加载到资源选项卡中。这些元素将其字体系列设置为 byekan，但似乎由于某种原因未加载字体。有什么想法吗？

编辑：我尝试使用我的浏览器访问该路径，它给出了以下 http 错误：

HTTP Error 403.14 - Forbidden

Answer 1

您遇到的问题是因为您使用 ~ 来选择您的主目录。

尝试将字体上传到其他地方并使用绝对 URL 路径引用文件：

url ('http://www.anywebsite.com/Content/fonts/BYekan.eot');

或以相对路径为例：

url ('Content/fonts/BYekan.eot');

在您的情况下，问题是因为您无法访问包含字体文件的目录，因为 CSS 不理解符号 ~ 来引用您的主目录。