首页 文章

@ font-face在字体上返回404s

提问于
浏览 次
0

我试图为我的网站设置自定义字体，但它在Firefox，Chrome或Edge / IE上都不起作用 . Firefox开发人员工具中的网络部分表示找不到字体并列出404，尽管网址应该是正确的 . 这是我的代码：

@font-face {
        font-family: 'Raleway55';
        src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') format('truetype'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') format('woff'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') format('woff2');
    font-weight: normal;
    } 

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Italic.ttf') format('truetype');
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBold.ttf') format('truetype');
font-weight: 600;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBold.ttf') format('truetype');
font-weight: 800;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}

body { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h1 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h2 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h3 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h4 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h5 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h6 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
p { font-family: 'Raleway55'!important; font-weight:normal!important;  }
q { font-family: 'Raleway55'!important; font-weight:normal!important;  }
li { font-family: 'Raleway55'!important; font-weight:normal!important;  }
a { font-family: 'Raleway55'!important; font-weight:normal!important;  } <code>

你能帮我吗？谢谢！

css fonts font-face

1 回答

  • 0

    所以我担心你的路径实际上是不正确的 . 现在你的style.css指向你的web服务器根目录中的 wp-content 目录，我很确定你的Wordpress安装不存在 .

    假设您按照以下方式设置Wordpress文件（这里只是基本设置，显然还有更多文件）：

    wp-admin
wp-content
  plugins
  themes
    my-theme
      style.css
  uploads
    font-organizer
      my-font.ttf
wp-includes

    你希望你的CSS看起来像这样：

    @font-face {
    font-family: 'MyFont';
    src: url('../../uploads/font-organizer/my-font.ttf') format('truetype'),
font-weight: normal;
}

    基本上你正在做的是告诉浏览器从css文件的位置导航两个目录，这应该落在 wp-content 目录中，然后导航到 uploads/etc. 以找到字体 .

    现在，当我正在使用Wordpress网站时，我通常设置字体的方式就是将它们放入 wp-content 文件夹中名为 fonts 的文件夹中 . 这样，它们就会被保留在uploads文件夹之外，这使得客户或您自己不太可能在Wordpress媒体管理器中意外删除它们 . 所以我通常的文件结构是：

    wp-admin
wp-content
  fonts
    my-font.ttf
  plugins
  themes
    my-theme
      style.css
  uploads
wp-includes

    然后我的CSS就像这样：

    @font-face {
    font-family: 'MyFont';
    src: url('../../fonts/my-font.ttf') format('truetype'),
font-weight: normal;
}

    无论如何，没有必要按照我的方式去做，但只是需要一些思考 . 希望这对网站有所帮助和好运！

    回复于

相关问题