@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');
}

- Bojan Savic

---

请尝试使用以下代码： src: url('DejaWeb.ttf') format('truetype'); 和 src: url('DejaWeb-Bold.ttf') format('truetype'); - AMayer

@tybro0103 正在本地主机上发生，现在无法提供链接。 - Bojan Savic

使用http://www.fontsquirrel.com/fontface/generator生成你的字体，它将为你提供一切准备好的东西，你只需将其放在正确的位置即可。 - The Alpha

或者这可能只是一个损坏的字体。我曾经使用过一些提供错误字体的免费网站。 - Joseph Lust

@BojanSavic：你找到解决方案了吗？ - Hugolpz

Answer 1

试一试

   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;
  }

- jmishra

---

它在Firefox上运行得很好。我不得不像你建议的那样添加'src：'关键字才能让它在Chrome上工作。谢谢。 - Cedric

使用' truetype '而不是' ttf '的格式对我有用，谢谢（在Ubuntu 18.04上的Chrome）。 - ericgithinji

Answer 2

每当所谓符合标准的浏览器中@font-face无法正常工作时，我就会将这段代码放入我的.htaccess文件中。据说有些浏览器不会加载托管在其他域上的字体，这段代码可以解决这个问题，但有时候它也是强制加载托管在同一域上的字体的唯一方法。通常情况下，这更多是Firefox的问题而不是Chrome的问题，但我现在刚刚使用了这个代码来强制在Firefox正常工作的同时在Chrome中加载字体。算了吧。

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

我曾经在@font-face语法中遇到了另一个莫名其妙的问题，就是带有大写字母的字体文件无法正常加载。这只发生了一次，在尝试了多种不同的方式排除@font-face故障后，最后我将所有字体文件和字体名称改为小写字符，它就正常工作了（我认为这可能是问题出现在颇具挑剔的IE浏览器上，而在其他网站上使用相同的语法并结合大小写字母不会有问题）。

- thelindsaybutler

Answer 3

如果您把字体文件放在名为“fonts”的文件夹中，将CSS文件放在名为“style”的文件夹中，则应该像这样编写URL。

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

我刚刚纠正了同样的错误，方法如下。

- Lenville

Answer 4

@font-face {    
font-family: 'FONT-NAME';
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT');
}

div {
    font-family: 'FONT-NAME';
    font-weight: normal;
    font-style: normal;
}

将字体的 font-weight 和 font-style 属性设置为 normal 值对我有效。

- Mayank Gupta