“Gotham Book”字体系列在 Safari 浏览器和 iPhone 设备中不起作用答案

【问题标题】：'Gotham Book' font-family not working in Safari browser and IPhone devices“Gotham Book”字体系列在 Safari 浏览器和 iPhone 设备中不起作用
【发布时间】：2018-08-28 21:35:11
【问题描述】：

在我的项目中，我需要使用 Gotham Book font-family，并且我正在使用以下代码：

@font-face {
            font-family: 'Gotham Book';
            src: 
                url('assets/fonts/Gotham-Book.eot'),
                url('assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
                url('assets/fonts/Gotham-Book.woff2') format('woff2'),
                url('assets/fonts/Gotham-Book.woff') format('woff'),
                url('assets/fonts/Gotham-Book.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

如果在 android 设备和除 safari 浏览器之外的其他浏览器中完美运行。请提出我的代码有什么问题。

是什么导致了这个问题？

我也尝试过 Gotham Book svg import，但对我不起作用。

提前谢谢你！

【问题讨论】：

你能添加一个字体在 Safari 和 iphone 中的截图吗？
字体未加载。它什么也没显示。如果我检查代码并更改字体系列名称，它在 safari 上工作正常。
如果您在实时站点中将字体添加为 HTTPS，则添加字体资源 URL 的完整路径。

标签： css fonts safari font-face

【解决方案1】：

尝试添加字体资源的整个 URL。

CSS：-

@font-face {
            font-family: 'Gotham Book';
            src: 
                url('https://www.example.com/assets/fonts/Gotham-Book.eot'),
                url('https://www.example.com/assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
                url('https://www.example.com/assets/fonts/Gotham-Book.woff2') format('woff2'),
                url('https://www.example.com/assets/fonts/Gotham-Book.woff') format('woff'),
                url('https://www.example.com/assets/fonts/Gotham-Book.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

谢谢

【讨论】：

感谢@SaurabhLP。会检查这个

【解决方案2】：

这是有效的解决方案 CSS：

  @font-face {
  font-family: "gotham";
  src: url('ff/Gotham-Book.woff') format('woff'),
       url('ff/Gotham-Book.woff2') format('woff2'),
       url('ff/Gotham-Book.ttf') format('truetype');
  font-weight: normal;
}

并且请通过从下面的 URl 下载字体来替换您现有的字体：

https://drive.google.com/open?id=1pbdpXbPRCJC6Qi-QpNGt7WbLuwtwDRUW

谢谢

【讨论】：