Question

我正在从这里使用字体加载器：https://github.com/smnh/FontLoader，如果您知道其中一个，请提出一个更好的建议。

问题是所有字体均未加载。字体加载器始终出现“未加载所有字体”错误。

我已缩小为单个字体，但无法正常工作。字体文件的所有URL均正确，我可以在浏览器中下载它们。

CSS：

<script type="text/css">
    @font-face{
        font-family:'MrsSaintDelafield';
        src: url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.eot');
        src: url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.woff2') format('woff2'),
        url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.woff') format('woff'),
        url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.ttf') format('truetype'),
        url('https://example.com/wp-content/themes/utterly/designer/fonts/Used/MrsSaintDelafield-Regular.svg') format('svg');
    }
</script>

JS：

// wait for document load
    jQuery(document).ready(function($) {

        // wait for all fonts to be loaded before doing anything else
        var fontLoader = new FontLoader(["MrsSaintDelafield"], {
            "fontLoaded": function (font) {
                console.log("font has loaded " + font.family);
            },
            "complete": function (error) {
                if (error != null) {

                    console.log(error.message);

                } else {

                }
            }
        },3000);

        fontLoader.loadFonts();
    });

我在控制台中得到的全部是：“并非所有字体都已加载（0/1）”

还有其他人遇到过这个问题吗？

Answer 1

仅加载字体似乎有点过头了。看起来该字体可通过Google字体获得。按照link并单击“选择此字体”，以获取有关如何将其添加到您的网站的说明。

FontLoader不起作用-没有字体加载

1 个答案: