html - @font-face 不适用于一种特定字体

标签 html css fonts cross-browser font-face

我正在尝试为客户建立并运行网站,但我遇到了字体问题。除了一种字体外,所有字体都可以正常工作,我不确定为什么。在 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 是否以某种方式限制了您使用字体的方式,或者是否有其他我需要修复的问题?

最佳答案

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

关于html - @font-face 不适用于一种特定字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42017108/

相关文章:

html - 按钮波浪效果不使用 angular2 Materialize 重置

javascript - CSS 长字体不适合屏幕的问题

javascript - HTML 编辑器漏洞

css - Wordpress 博客上的响应图像

css - 缩短 CSS 代码

html - CSS - Google 字体 (Montserrat) 未覆盖 Bootstrap 标准字体

android - 自定义字体适用于 android 模拟器,但不适用于设备。 (电话机)

javascript - HTML 将单个背景图像拆分为两个相等的链接(顶部和底部)

javascript - 使用变量根据时间向用户显示上午、下午或晚上

ios - iOS 上的自定义字体始终使用 'regular' 样式