css - @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 不理解符号 ~ 来引用您的主目录。