【问题标题】:why Gotham font in CSS is not working on firefox?为什么 CSS 中的 Gotham 字体在 Firefox 上不起作用?
【发布时间】:2025-12-11 10:10:01
【问题描述】:

我在css中使用的是@font-face,如下所示

   @font-face {
    font-family: 'Gotham';

    src: url('../assets/fonts/Gotham Book.otf')format("opentype");
}

body {
background:transparent;
min-height:100%;    
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
line-height: 1.5em;
font-size:14px;
font-family: Gotham;
color:#fff;
color:rgba(255,255,255,.8); 
font-weight: normal;

} 它在 chrome 中完美运行,但在 fire fox 显示为 times new roman 时失败。字体 gotham 已安装在文件夹中,链接与给出的一样。

【问题讨论】:

  • 你能在代码 sn-p 中复制你的问题吗?
  • 浏览器控制台说什么?查找 404 或 CORS 错误。
  • 它只是显示时间新罗马字体
  • Arivind S 对不起,先生,我不能!但如果你指导我,我肯定会的

标签: css font-face font-family


【解决方案1】:

我认为解决方案是应用.eot.woff.woff2,就像你所做的那样

请参考以下示例。

@font-face {
   font-family: 'co-text';
   src: url('CoText-Light.eot');
   src: url('CoText-Light.eot?#iefix') format('embedded-opentype'),
       url('CoText-Light.woff2') format('woff2'),
       url('CoText-Light.woff') format('woff'),
       url('CoText-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
}

如果有任何问题,请告诉我。

【讨论】:

  • 一次添加所有字体格式,然后重试。不仅.woff。如需进一步检查,请显示您的代码和根结构。
  • 谢谢各位 问题解决了