@font-face 在字体上返回 404

Posted 2023-03-06

【中文标题】@font-face 在字体上返回 404

【英文标题】：@font-face returns 404s on fonts

【发布时间】：2017-09-29 10:50:57

【问题描述】：

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

 @font-face 
        字体家族：'Raleway55'；
        src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') 格式('truetype'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') 格式('woff'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') 格式('woff2');
    字体粗细：正常；
    

@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>

你能帮忙吗？谢谢！

【问题讨论】：

尝试从/wp-content/中删除/。

另外，不用声明所有的元素 font-family，只需使用 *font-family: 'Raleway55';。不要将其设置为重要，否则以后将很难更改。

最后一件事，如果样式表在文件夹中，您可以在 url 前面使用../ 表示父文件夹。假设wp-content/stylesheets 你的字体是wp-content/fonts 然后你输入../fonts/myfont.fontExtension。

【参考方案1】：

所以恐怕你的路径实际上是不正确的。现在您的 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 的文件夹中。这样一来，它们就不会出现在上传文件夹中，这样客户或您自己就不太可能在 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;

不管怎样，没必要按照我的方式去做，但只是一些思考的食物。希望这对网站有所帮助并祝您好运！

【讨论】：

这确实有效！非常感谢！ :) 花了很多时间思考它可能是什么，然后它就是这个基本的 :) 也用字体文件夹做了它，这样看起来更有条理。