时间戳

首页 > 解决方案 > @font-face 直接链接到字体文件，但无法加载？

css - @font-face 直接链接到字体文件，但无法加载？

问题描述

我正在使用我在 css 中使用 @font-face 加载的自定义字体管理一个 Wordpress 网站，如下所示：

@font-face {
    font-family: '8BitMadness';
    src: url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.eot');
}

@font-face {
    src: local("8-Bit Madness"),
         local ("8BitMadness"),
         url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.eot') format('embedded-opentype'),
         url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.woff2') format('woff2'),
         url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.woff') format('woff'),
         url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.ttf') format('truetype'),
         url('http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family:'8BitMadness', Arial, sans-serif;
}

以前我只有 url 的链接，fonts/8-bit_madness-webfont.eot但我添加了完整的 url，希望能解决问题。我之前也将其格式化如下，但根据我在此处阅读的另一个线程的建议将其更改为上面的内容。

@font-face {
    font-family: '8BitMadness';
    src: url('fonts/8-bit_madness-webfont.eot');
    src: url('fonts/8-bit_madness-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/8-bit_madness-webfont.woff2') format('woff2'),
         url('fonts/8-bit_madness-webfont.woff') format('woff'),
         url('fonts/8-bit_madness-webfont.ttf') format('truetype'),
         url('fonts/8-bit_madness-webfont.svg#8-bit_madnessregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我在这里阅读了十几个字体线程无济于事，我希望有人能指出我忽略的一些小而愚蠢的事情！请注意，转到其中一个 url 链接（例如http://www.surrealitycomic.com/wp-content/themes/comicpress-child-surreality/fonts/8-bit_madness-webfont.eot）确实会下载文件，因此我认为链接是正确的并且应该可以工作？识别 h1 元素确实显示font-family: "8BitMadness", Arial, sans-serif;，但将鼠标悬停"8BitMadness"仅显示 Arial 文本示例，因此出现了问题。

标签： cssurlfontsfont-face

解决方案

推荐阅读