【问题标题】:@font-face Isn't Working On One Specific Font@font-face 不适用于一种特定字体
【发布时间】:2017-06-20 09:40:59
【问题描述】:

我正在尝试为客户建立并运行网站,但我遇到了字体问题。除了一种字体外,所有字体都正常工作,我不知道为什么。在 2 种字体不起作用的 Internet Explorer 和没有任何作用的 Edge 中,问题更加严重。这是我正在使用的代码。不工作的字体是“chunkfive”。

@font-face {
    font-family: 'chunkfive';
    src: url('fonts/chunkfive-webfont-webfont.woff2') format('woff2'),
         url('fonts/chunkfive-webfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'streetwear';
    src: url('fonts/streetwear-webfont.woff2') format('woff2'),
         url('fonts/streetwear-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: streetwear, serif;
}

nav {
    background: #000;
    border: solid 4px #FFF;
    font-family: chunkfive, serif;
    font-size: 22px;
    left: 50%;
    margin-left: -425px;
    position: absolute;
    top: 143px;
    width: 850px;
    z-index: 0;
}

ol,
p,
ul {
    font-family: roboto, sans-serif;
    font-size: 18px;
}

这些字体在我的免费网站上都可以正常使用,但是在使用 GoDaddy 的帐户发布时,它们无法正常使用。使用 chrome,即使 chunkfive 以外的字体正确显示,每种字体都会出现以下错误:

GET http://website-url.com/css/fonts/streetwear-webfont.woff2 

GoDaddy 是否以某种方式限制了您使用字体的方式,还是我需要解决其他问题?

【问题讨论】:

  • 您没有显示错误。您只是显示网络请求 - 错误文本在哪里?
  • 这个旁边有个大 X。
  • 这仍然不是错误。这只是一个控制台日志。转到您的网络选项卡,查看 实际 错误是什么。是404吗? 403? 500?开发工具为您提供了很多信息,请检查所有信息。尤其要确保您确实记录所有内容:默认情况下,您的开发工具甚至可能不会向您显示所有类别的所有警告和错误(检查哪些选项已打开,如果不是全部是错误+警告,将它们设置为)

标签: html css fonts cross-browser font-face


【解决方案1】:

您可以做 2-3 件事来解决这个问题 - 1. 检查链接是否正确。 2.尝试使用双引号而不是单引号。 3. 检查字体文件夹权限,这是 go daddy 的主要问题。

【讨论】:

  • 链接正确,并且在我的其他托管站点上完美运行。我会尝试双引号,看看它是否有任何区别。如何更改字体文件夹权限?
  • 这是一个参考链接 frm go daddy 更改文件夹权限。 in.godaddy.com/help/set-directory-permissions-16135
猜你喜欢
  • 2013-03-02
  • 2014-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-07
  • 2019-08-06
  • 2021-09-26
相关资源
最近更新 更多