@ font-face无法处理chrome

Question

我正在使用最新版本的谷歌浏览器,它根本不会渲染字体.

我正在运行Debian Linux,而所有其他浏览器(包括Chromium)都会正确显示包含的字体.

我正在使用的字体表面声明是:

@font-face {
    font-family: Dejaweb;
    src: url('DejaWeb.ttf');
}

@font-face {
    font-weight: bold;
    font-family: Dejaweb;
    src: url('DejaWeb-Bold.ttf');
}

Answer 1

每当@ font-face莫名其妙地在我认为兼容的浏览器中对我不起作用时,我将其放在我的.htaccess文件中.据推测,一些浏览器不会加载托管在其他域上的字体,而这些代码会对此进行故障排除,但有时它也是强制加载托管在同一域上的字体的唯一补救措施.一般来说,Firefox的问题多于Chrome的问题,但我现在用它来强制Chrome中的字体,而Firefox运行正常.去搞清楚.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

我使用@ font-face语法发生的另一个令人费解的奇怪事情是,它不会在名称中使用大写字母正确加载字体文件.这只是一个问题,经过反复敲击桌面故障排除@ font-face之后的一系列不同方式,作为最后的手段,我将所有字体文件和字体系列名称更改为小写字符,并且工作正常(我认为这是一个在挑剔的IE浏览器中的问题,我只做过一个网站,在另一个网站上完全相同的语法与大写和小写字符配合得很好).

Answer 2

如果您将字体文件放在名为"fonts"的文件夹中,并将CSS文件放在名为"style"的文件夹中,那么您应该像这样编写URL

@font-face {
 font-weight: bold;
 font-family: Dejaweb;
 src: url('../fonts/DejaWeb-Bold.ttf'); }

我刚才纠正了同样的错误.

Answer 3

试试这个

   src:url('DejaWeb-Bold.ttf') format('truetype'), 

此外,如果字体以其他不同格式提供,那么我建议以下列方式兼容地编写所有跨浏览器

    @font-face {
     font-family: "Dejaweb";
     src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */
     url('DejaWeb-Bol.woff') format('woff'), /* Modern Browsers */
     url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
     url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
     font-weight:bold;
    font-style:normal;
  }