在 Mac 上使用 @font-face 会导致文本高度为 0答案

【问题标题】：Using @font-face results in text having height of 0 on Mac在 Mac 上使用 @font-face 会导致文本高度为 0
【发布时间】：2019-02-12 18:28:40
【问题描述】：

我有一个带有自定义字体的网站（Gotham Book）。所有容器都是这样的：

<span>TEXT IN GOTHAM </span>

在 Mac 上获取高度 0（Chrome 和 Safari，而不是 Chrome for Win）。相同的容器适用于其他字体，如 Arial、Roboto 或其他字体。

字体在 CSS 中是这样的：

@font-face {
  font-family: 'Gotham Book';
  src: url("/assets/fonts/GothamBook.ttf")
}

我必须指定其他内容吗？

【问题讨论】：

同样的问题，字体是gotham。 IOS和Mac高度为0。

标签： html css fonts font-face

【解决方案1】：

我认为你的字体由于某种原因没有被加载，你需要在 mac 上调试它（你应该检查你的控制台是否有任何错误）

我建议将您拥有的所有字体文件格式与该字体链接，例如下面的代码

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

我还建议添加备用字体，就好像你的字体没有加载它会采用其他字体一样

font-family: 'MyWebFont', Arial, sans-serif;

【讨论】：

字体已正确加载，如通过网络选项卡看到的那样，并且没有任何控制台错误。字体也正确显示，只是没有高度。