如何在 DOM 上加载 google 字体？

Question

我想在 DOM 上用 Ajax 加载此字体 <link href="https://fonts.googleapis.com/css?family=KoHo:400" rel="stylesheet">，可以吗？

Answer 1

我不太确定你想在这里实现什么。如果是页面速度问题，而您想异步加载字体，请参阅这篇文章：
https://www.lockedownseo.com/load-google-fonts-asynchronously-for-page-speed/

通过 <link> 标记加载 Google 字体将确保在加载页面之前呈现字体。

Answer 2

出于性能原因或因为您希望在渲染之前准备好字体，您是否希望在 DOM 上加载字体？

如果您使用的是 jQuery，这里有一本很好的读物，介绍如何从 CC-Tricks 做类似的事情 https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

根据文章所说，您可以设置一个 cookie，让您的脚本知道字体已被缓存。否则你可以加载ajax。

来自文章：

// Check if a cookie exists suggesting fonts are cached
if (!fonts_are_cached) {
    // Don't slow down rendering
    $(window).load(function() {

        // Load in custom fonts
        $.ajax({
            url: 'https://fonts.googleapis.com/css?family=KoHo:400'
        });

        // Don't actually do anything with them, just request them so they are cached.
        // Set cookie indicating fonts are cached

    });
}